特定の共有パラメータでShareThis ボタンを再初期化する方法

このガイドでは、特定の共有パラメータを使用するためにShareThis ボタンを再初期化（リロード）する方法について説明します。デフォルトでは、ShareThis ウィジェットローダは、ブラウザが JavaScript タグに遭遇するとすぐにロードされます。通常はページのタグ内にあります。ShareThis アセットは通常、ユーザーに最も近い CDN からロードされます。しかし、Webページの読み込みが完了した後にウィジェットを読み込むようにデフォルトの設定を変更したい場合は、ページ内でパラメータを設定するだけです。

ボタンを再初期化すると、次のことができるようになります。

  • モーダルやポップアップが開くまでなど、ボタンを表示するタイミングをコントロールすることができます。
  • 例えば、Twitter のボタンだけを特定の部分に表示し、別の部分には Facebook のボタンを表示したい場合、同じページで異なる設定のボタンのインスタンスを用意します。また、ボタンのセットごとに異なる言語を表示させたい場合などです。
  • 新しいリンクがシェアボタン付きで読み込まれた場合、シェアボタンのプロパティを自動更新します（無限スクロール）。

注意：特定のパラメータでボタンを再初期化したくない場合は、モーダルやポップアップなどが起動するたびにwindow.__sharethis__.initialize() 関数をそのまま使用すればよいでしょう。なお、コンテナが表示されるまでの時間を確保するために、上記のコードを追加する前に 0.3 ～ 1 秒程度の遅延を設定する必要があるかもしれません（そうしないと、関数が早く呼び出されすぎてしまいます）。

<strong>Add <div> and Javascript code</strong>

// render the html
<div id="マイラインボタン"></div>

// load the buttons
ウィンドウ.__sharethis__.load('インラインシェアボタン',
{/* ここに設定が必要です。設定のセクションをお読みください。

上記の部分を追加した後、以下の設定オプションのいずれかまたはすべてを含めることができるようになりました。

設定オプション

 コンフィグ = { 
   アライメント: STRING, // left, right, center, justified.
   コンテナ: STRING, // id of the dom element to load the buttons into
   イネーブルド: BOOLEAN
   フォントサイズ: INTEGER, // small = 11, medium = 12, large = 16.
   ID: STRING, // load the javascript into a specific dom element by id attribute
   ラベル: STRING, // "cta", "counts", or "none"
   言語: ストリング   // IETF language tag in which the buttons' labels are,
   min_count: INTEGER, // minimum amount of shares before showing the count
   パディング: INTEGER, // small = 8, medium = 10, large = 12.
   半径: INTEGER, // in pixels
   ネットワーク: ARRAY[STRING],
   ショー・トータル: BOOLEAN
   ショー・モバイル・ボタン: BOOLEANです。 // forces sms to show on desktop
   use_native_counts: BOOLEANです。 // uses native facebook counts from the open graph api
   サイズ: INTEGER, // small = 32, medium = 40, large = 48.
   スペーシング: INTEGER, // spacing = 8, no spacing = 0.
};

例

// render the html
<div id="マイラインボタン"></div>
// load the buttons
ウィンドウ.__sharethis__.load('インラインシェアボタン', {
  アライメント: '左',
  id: 'my-inline-buttons',
  有効: 真,
  font_size: 11,
  パディング: 8,
  半径: 0,
  ネットワーク: ['messenger' (メッセンジャー), 'twitter', 'pinterest', 'sharethis', 'sms', wechat],
  サイズ: 32,
  show_mobile_buttons: 真,
  スペーシング: 0,
  url: "https://www.sharethis.com "となっています。 // custom url
  タイトル: "マイカスタムタイトル",
  言語: エン,
  画像: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  記述: "マイカスタムディスクリプション",
  ユーザー名: "ShareThis" // custom @username for twitter sharing
});
利用可能なネットワーク
社会貢献活動データネットワークコード
ブラック・ライヴズ・マター（黒人の命を軽んじるな）BLM
BloggerBlogger
BufferBuffer
コピーリンクコピー
DiasporaDiaspora
DiggDigg
Doubanドゥバン
メールメール
EvernoteEvernote
Facebookフェイスブック
Flipboardフリップボード
Gmailgmail
Google BookmarksGoogle Bookmarks
ハッカーニュースhackernews
Instapaperinstapaper
アイオルビックスアイオービックス
カカオカカオ
Kooアプリクアッペ
LINEライン
Linkedinlinkedin
LiveJournallivejournal
Mail.Ruメールルー
Meneameメネアメ
メッセンジャーメッセンジャー
Odnoklassnikiオドノクラスニキ
展望見通し
Pinterestpinterest
Pocketgetpocket
プリントプリント
Kindleにプッシュ焚き付け
QzoneQQ空間
Redditreddit
RefindRefind
レンレンRenren
SkypeSkype
SurfingbirdSurfingbird
TelegramTelegram
テンセントQQテンセント
ThreemaThreema
Trelloトレロ
Tumblrtumblr
Twittertwitter
バイバーサイバー
VKvk
WeChatWeChat
ShareThisのsharethis
新浪微博ウェイボー
エスエムエスSMS
Snapchatスナップショット
WhatsAppwhatsapp
WordPressワードプレス
Xingクシング
Yahoo Mailヤフオクドーム
Yummlyうまうま
レイジーローディングとShareThis ツール

ShareThis ツールは、サイトが最初にロードされたときにのみロード/表示されます。画像共有ボタンや動画共有ボタンなどのツールを使用していて、サイトが遅延読み込みや同様の技術を使用している場合、新しい要素が表示されたらツールを再初期化する必要があります。

ShareThis はその時だけ画像/埋め込み動画を検索し、下に近い画像はまだ読み込まれていないため、ShareThis は後から読み込まれてもその存在を知らず、その上にボタンを表示しないのです。

この問題を回避するために、以下のJavascriptコードは、3秒ごとにスクロールが行われたかどうかをチェックし、行われた場合はボタンを再初期化するようにしています。画像が読み込まれたかどうかを知る方法として、スクロールを利用しています。訪問者が特定の部分までスクロールすると画像が読み込まれるからです。

//state variable for scrolling
let scrolling = false;

//in case of scrolling, change the state of the scrolling variable to true
window.onscroll = function() {
scrolling = true;
}
/*create an interval that checks every 3 seconds the state of the scrolling variable, if any scrolling has been done in that interval, reinitialize the buttons*/

setInterval(() => {
if (scrolling) {
scrolling = false;
window.sharethis.initialize()
}
}, 3000);

備考

  • Facebookやその他のソーシャルチャネルで共有する場合は、Open Graphタグが優先されますのでご注意ください。カスタムURLにリンクする場合は、そのページにもオープングラフタグを必ず記入してください。
  • 他のツールと同様に、ローカル/テスト環境では渡されないリソースがあるため、試用する前にサイトを本番環境に移行することをお勧めします。

優先順位

ShareThis コードがプロパティの共有を処理する際の優先順位を覚えておくことが重要です。一般的には、エラーを防ぐために、ページ上で共有プロパティを指定する方法を1つにすることをお勧めします。

  1. 動的に指定されるJavaScriptのプロパティ（すなわち最優先事項）
  2. タグで指定されたプロパティ（例：2 番目の優先順位）
  3. Open Graph Protocolタグ（＝優先順位が最も低いもの）