ソーシャルボタンの設置
情報拡散のためのSNSの利用
概要
情報の拡散には各種SNSのボタンが効果を発揮します。SNSのボタンには様々な役割がありますが、まずはシェア系とフォロー系の違いから。
シェアボタン
シェアボタンは、サイトのコンテンツをSNS上で紹介してもらうためのボタン。
Twitterのツイートボタン、Facebookのいいね！ボタンとシェアボタンなどが該当します。シェアのためのハイパーリンクを作成できる場合もあります。
シェアボタンやリンクを使うと、コンテンツ拡散されて、新規の訪問者を呼び込みやすくなります。基本的には全ページ・記事にボタンを置きます。
フォローボタン
フォローボタンは、あなたのSNSアカウントに対するファンやフォロワーを獲得するためボタンです。Twitterのフォローボタン、Facebookのフォローボタンなどが該当し、それぞれのSNSでのリーチ拡大につながります。
サイトの概要ページ、ブログのトップ、サイドバーなどに設置します。
拡散力
- Twitter：拡散性が高く、新規獲得に効果大です。リツイートよるキャンペーン情報の拡散が期待できます。
- Facebook：拡散性は中程度。既存のフォロワーとの関係強化に向いています。コメントやいいね！によって、フォロワー以外のニュースフィードにも表示される点で、拡散を狙うこともできます。
Share Link Generator
Share Link Generatorを使うと、Twitter、Facebook、TLinkedIn、Google+、Pinterest用など、のソーシャル共有リンクをまとめて簡単に作成できます。
- http://www.sharelinkgenerator.com/ を開く
- SNSを選択する ＞ Twitter、Facebook、Google+、LinkedIn、Pinterest
- 共有したいコンテンツのURLを空欄に貼り付け ＞ Create the Link!
- 生成されたURLやHTMLリンクを、自分のウェブページに貼り付ける
シェアボタン
Instagramは画像に特化されているので、外部サイトの情報をそのままシェアする機能は用意されていません。
フォローボタン
あなたのサイトから、インスタグラムに誘導するには、以下のようなコードを記述します。
<a class="ig-b- ig-b-48" href="（URL）?ref=badge"> <img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /> </a>
- URL の部分には、自分のInstagramアカウントのURL を書きます。
- ボタン画像については、以下のブランドリソースから取得できます。
Instagram ブランドリソース
https://en.instagram-brand.com/assets/icons
参考：InstaWidget
instawidget のサービスを使うと、自分のサイトにインスタグラムの写真アルバムを追加するための「埋め込みコード」を簡単に取得することができます。https://instawidget.net/
ツイート/シェアボタン
あなたのサイトにあるコンテンツを、サイト利用者のフォロワーに紹介してもらうためのボタンです。これがあるとシェアが簡単になり、コンテンツのリーチ拡大につながります。
- https://publish.twitter.com/# を開く
- Or browse your options below > Twitter Buttons > Share Button を選択
- シェアしたいページのURLその他を設定
- HTMLコードが表示される ＞ コピー
- あなたのサイトでボタンを設置したい場所に貼り付
フォローボタン
ページにTwitterのフォローボタンを設置しておくと、1クリックであなたのアカウントをフォローしてもらうことができます。
- https://publish.twitter.com/# を開く
- Or browse your options below > Twitter Buttons > Follow Button を選択
- ボタンの対象アカウントを設定
- HTMLコードが表示される ＞ コピー
- あなたのサイトでボタンを設置したい場所に貼り付け
ハッシュタグボタン
キャンペーンを、特定のハッシュタグでのツイートを促すボタン。対象キャンペーンのページにボタンを設置します。
- https://publish.twitter.com/# を開く
- Or browse your options below > Twitter Buttons > Hashtag Button を選択
- ハッシュタグを設定
- HTMLコードが表示される ＞ コピー
- 対象のページに貼り付け
Twitterブランドリソース
https://about.twitter.com/ja/company/brand-resources.html
「いいね！」ボタン
あなたのサイトを見たユーザーが、ページ上の「いいね！」をクリックすると、そのユーザーのタイムラインや友達のフィードにその情報が表示されます。
このボタンから共有するリンクに、ユーザーがコメントを加えるなどの操作を可能にしたい場合は、シェアボタン（次項）を使ってください。
https://developers.facebook.com/docs/reference/plugins/like/を開く
- ボタンのカスタマイズ指定
- コード（HTML5、XFBML、IFRAME、URLのいずれか）を生成
- あなたのサイトの目的の場所に貼り付け
シェアボタン
いいね！ボタンと同じように、ユーザー本人のタイムラインとその友達のフィードを通じてコンテンツを共有してもらえる機能。いいね！ボタンとの違いは、リンクにコメントやメッセージを添えられる点です。
- https://developers.facebook.com/docs/plugins/share-buttonを開く
- 対象のURLとボタンのカスタマイズについて指定
- コードを生成（HTML5かXFBMLにのみ対応、JavaScript SDKを使用）
- あなたのサイトの目的の場所に貼り付け
参考：シェアボタン
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP
送信ボタン
サイト上のコンテンツをメッセージで紹介してもらうためのボタン。Facebookのメッセージ機能で特定の友達に送る、Facebookグループに投稿、メールで送るなどが可能です。
- https://developers.facebook.com/docs/reference/plugins/send/ を開く
- 対象URLとボタンのカスタマイズについて指定
- コードを生成（HTML5かXFBMLにのみ対応、JavaScript SDKを使用）
- あなたのサイトの目的の場所に貼り付け
フォローボタン（旧：フィード購読ボタン）
Twitterのフォローボタンと同様、１クリックで、あなたのFacebookページに「いいね！」してもらうことができ、Facebookでのリーチ拡大につながります。ボタンには獲得した「いいね！」の数と、ユーザーの写真が表示されます。
- https://developers.facebook.com/docs/reference/plugins/follow/ を開く
- ボタンをカスタマイズ
- コード（HTML5、XFBML、IFRAME、URLのいずれか）を生成
- あなたのサイトの目的の場所に貼り付け
参考：フォローボタン
https://developers.facebook.com/docs/plugins/follow-button?locale=ja_JP
Google+
同様の手順です。リンクのみ記載します。
シェアボタン
共有ボタン
https://developers.google.com/+/web/share/