Stickyシェアボタンのカスタマイズ方法(画像、URL、その他)

ユーザーがコンテンツを共有したときに表示されるタイトル、説明、画像、URLをカスタマイズしたいですか?正しい場所に来ましたね。(インラインシェアボタンのカスタマイズ方法については 詳細はこちら。)

ことがよくあります。 オープングラフプロトコル タグはこの情報にあなたのページからのコンテンツを入力しますが、あなたが望む情報が抽出されていない場合は、より関連性の高い情報に調整することができます。例えば、ユーザーがあなたのホームページをシェアした場合、製品の画像を追加したり、より魅力的な説明文を提供したりすることができます。 

Due to the way Sticky Share Buttons are designed (i.e. they don’t need a placement code) you will need to manually add the following code inside the <body> of your site, preferably before the closing of the </body> tag (our script will deal with moving the div where it needs to go):

<strong>Properties in <div> tags</strong>

Depending on whether you want to simply set a universal URL or shortened URL, add the following tags in the tool placement code <strong><div class=”sharethis-sticky-share-buttons”></div></strong>. 

データネットワークコンテンツを共有するソーシャルプラットフォームを指定します。
data-url共有したいURL(短縮URLでも可)の指定
データ・ショート・urldata-urlと組み合わせて使用できる短縮URLを指定します。
データタイトル共有したいタイトルを指定します(一部のメールチャネルではメールの件名)。
データ-イメージ共有コンテンツに表示させたい画像へのリンクを指定する
データの説明共有したい要約文/説明文を指定する
データユーザー名Twitter のユーザー名を指定します。
データメッセージメールシェアのボディコピーを指定する
データメール件名メールの件名を指定します

例このボタンは、"Sharing is great!"というタイトルで、ShareThis のホームページを共有するように設定されています。

 

備考

  • このカスタマイズは、すべてのソーシャルチャネルで利用できるわけではありません。例えば、Facebookでは、これらの値の代わりに、常にURLのog: metaタグを使用する場合があります。
  • data-url属性は、特定のURLを設定したり(ユーザーがどのページを共有しているかにもかかわらず)、追跡リンクを追加するのに役立ちます。
  • シェアされたURLとボタンがあるURLが異なるため、シェア数が記録されない場合があります。

優先順位

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

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