カスタムシェアボタンの作成方法
独自のシェアボタンをデザインしたいが、ソーシャルエンゲージメントを追跡するために当社のプラットフォームを活用したいとお考えですか？
パブリッシャーの皆様は、自社のブランドやカラーパレットに合ったアイコンを作成したい場合や、ページごとにボタンの構成を変えたい場合などに、シェアボタンを一からデザインすることがあります。その後、無料の分析プラットフォームを利用して、トップページ、ソーシャルチャンネル、ソーシャルリファラルをより深く掘り下げていきます。
カスタムシェアボタンを使ってできることは、以下の通りです。
- CSSで形状や色を自由に変更し、ブランドを反映させることができます。
- ボタンに好きなテキストを書き込めるので、カスタムCall to Actionに便利!
- 同じページ内の異なるセクションに、複数のボタンセット/インスタンスを表示することができます。
ShareThis ツールがあなたのウェブサイトで機能するためには、以下の手順に従って、あなた独自のShareThis コードをあなたのウェブサイトのヘッダーセクションに追加してください。
- ShareThis Platform のアカウントにログインします。ShareThis のアカウントをお持ちでない場合は、無料でサインアップしてください。 詳細はこちら。.
- Apps Directoryで、Custom Share Buttonsを選択します。
- 右上の「Activate code」ボタンを選択します。ポップアップで「コードをコピー 」ボタンをクリックします。
- HTMLサイトにログインします。
- ステップ3でコピーしたユニークなShareThis コードをヘッダーフィールドに貼り付け、「保存」をクリックします。
- カスタムシェアボタンのHTMLとCSSを作成してください。FacebookとTwitter のカスタムボタンの設定は、以下のようになります。
- HTMLです。
- CSSです。
.st-custom-button[data-network] {
background-color: #0ADEFF;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
color: #fff;
}
.st-custom-button[data-network]:hover,
.st-custom-button[data-network]:focus {
text-decoration: none;
background-color: #00C7FF;
}
例えば、Facebookボタンの見た目を特に変更したい場合、CSSファイル内のCSSクラスは、.st-custom-button[data-network="facebook"]とします。
- 各ソーシャルチャンネルのdivにデータ属性を追加して、ユーザーがシェアボタンをクリックまたはタップしたときにコアコードに何をさせたいかを指定してください。
対応するソーシャルチャネルは以下の通りです。
| 社会貢献活動 | データネットワークコード |
| ブラック・ライヴズ・マター（黒人の命を軽んじるな） | BLM |
| Blogger | Blogger |
| Buffer | Buffer |
| コピーリンク | コピー |
| Diaspora | Diaspora |
| Digg | Digg |
| Douban | ドゥバン |
| メール | メール |
| Evernote | Evernote |
| フェイスブック | |
| フリップボード | |
| Gmail | gmail |
| Google Bookmarks | Google Bookmarks |
| ハッカーニュース | hackernews |
| Instapaper | instapaper |
| アイオルビックス | アイオービックス |
| カカオ | カカオ |
| Kooアプリ | クアッペ |
| LINE | ライン |
| LiveJournal | livejournal |
| Mail.Ru | メールルー |
| Meneame | メネアメ |
| メッセンジャー | メッセンジャー |
| Odnoklassniki | オドノクラスニキ |
| 展望 | 見通し |
| getpocket | |
| プリント | プリント |
| Kindleにプッシュ | 焚き付け |
| Qzone | QQ空間 |
| Refind | Refind |
| レンレン | Renren |
| Skype | Skype |
| Surfingbird | Surfingbird |
| Telegram | Telegram |
| テンセントQQ | テンセント |
| Threema | Threema |
| Trello | トレロ |
| Tumblr | tumblr |
| バイバー | サイバー |
| VK | vk |
| ShareThisの | sharethis |
| 新浪微博 | ウェイボー |
| エスエムエス | SMS |
| Snapchat | スナップショット |
| WordPress | ワードプレス |
| クシング | |
| Yahoo Mail | ヤフオクドーム |
| Yummly | うまうま |
データの属性は以下の通りです。
| データネットワーク | コンテンツを共有するソーシャルプラットフォームを指定します。 |
| data-url | 共有したいURL（短縮URLでも可）の指定 |
| データ・ショート・url | data-urlと組み合わせて使用できる短縮URLを指定します。 |
| データタイトル | 共有したいタイトルを指定します（一部のメールチャネルではメールの件名）。 |
| データ-イメージ | 共有コンテンツに表示させたい画像へのリンクを指定します。 |
| データの説明 | 共有したい要約文/説明文を指定する |
| データユーザー名 | Twitter のユーザー名を指定します。 |
| データメッセージ | メールシェアのボディコピーを指定する |
| データメール件名 | メールの件名を指定します |
- あなたのウェブサイトのページ（ブログ、製品など）に移動し、ShareThis プラットフォームからコピーしたプレースメントコードを、ShareThis ツールを表示させたい場所に貼り付けます。
備考
- カスタムシェアボタンの作業例をご覧になりたい方は、こちらをご参照ください。 https://codesandbox.io/s/amazing-sun-0rrb2?file=/index.html
- ShareThis will look for the <div> code of the buttons along with its data attributes and ShareThis classes on your website’s code, so if you have a custom icon or image you want to set for the buttons, you will have to wrap it inside the <div> mentioned above, like this:
- One way to display the share count for each social platform is adding a span code with the <em>count</em> class<em><strong> </strong></em><strong><em>inside</em></strong> the <div> code for the buttons: