Stickyシェアボタンのカスタマイズ方法(画像、URL、その他)
In this guide, you’ll learn how to customize sticky share button URLs and other share properties using data attributes (If you want to learn how to customize your Inline Share Buttons, go 詳細はこちら。).
ことがよくあります。 オープングラフプロトコル タグはこの情報にあなたのページからのコンテンツを入力しますが、あなたが望む情報が抽出されていない場合は、より関連性の高い情報に調整することができます。例えば、ユーザーがあなたのホームページをシェアした場合、製品の画像を追加したり、より魅力的な説明文を提供したりすることができます。
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でも可)の指定 |
| データ・ショート・url | data-urlと組み合わせて使用できる短縮URLを指定します。 |
| データタイトル | 共有したいタイトルを指定します(一部のメールチャネルではメールの件名)。 |
| データ-イメージ | 共有コンテンツに表示させたい画像へのリンクを指定する |
| データの説明 | 共有したい要約文/説明文を指定する |
| データユーザー名 | Twitter のユーザー名を指定します。 |
| データメッセージ | メールシェアのボディコピーを指定する |
| データメール件名 | メールの件名を指定します |
例このボタンは、"Sharing is great!"というタイトルで、ShareThis のホームページを共有するように設定されています。
備考
- このカスタマイズは、すべてのソーシャルチャネルで利用できるわけではありません。例えば、Facebookでは、これらの値の代わりに、常にURLのog: metaタグを使用する場合があります。
- data-url属性は、特定のURLを設定したり(ユーザーがどのページを共有しているかにもかかわらず)、追跡リンクを追加するのに役立ちます。
- シェアされたURLとボタンがあるURLが異なるため、シェア数が記録されない場合があります。
優先順位
ShareThis コードがプロパティの共有を処理する際の優先順位を覚えておくことが重要です。一般的には、エラーを防ぐために、ページ上で共有プロパティを指定する方法を1つにすることをお勧めします。
- 動的に指定されるJavaScriptのプロパティ(すなわち最優先事項)
- タグで指定されたプロパティ(例:2 番目の優先順位)
- Open Graph Protocolタグ(=優先順位が最も低いもの)
