ウェブサイトでユーザにソーシャルメディアの拡散を促すボタンや、ソーシャルアカウントをフォローしてファンとなってもらうボタンを設置することは、ウェブサイトへの流入増加のために、近年では必須となっています。

様々なソーシャルメディアやボタンがありますが、今回は特に導入しておきたいソーシャルボタンの種類と、設置方法を紹介します。

導入しておきたいソーシャルボタン

シェア(拡散)を促すボタン

拡散のために、必ずおさえておきたいソーシャルボタンは次の4つです。

Facebook いいね!

ユーザがもっともアクションを起こしやすいボタンです。ページに対する評価を示すボタンです。設定をきちんと行っていれば、他のユーザへ拡散されます。

設定(OGPタグ)については記事の後半で紹介します。

Facebook シェア

シェアをしたユーザのFacebookのタイムラインに、ページのURLと任意のコメント付きの投稿を促します。

投稿を見た友人がページへ訪問したり、さらにシェアをしたりすることで、さらに拡散されます。

Twitter

URL付きのツイートを促し、そのユーザのフォロワーに拡散されます。

ツイッターは拡散の仕組み「リツイート」のハードルが低く、特にヘビーユーザが多い10代〜20代の層に人気の内容の場合、爆発的な勢いで拡散されます。

はてなブックマーク

はてなブックマークはブックマークツールですが、IT関係の仕事をしているユーザが多いのが特徴です。ユーザがそのページを評価する目的だけでなく、「あとで読みたい」と思ったときにも使われます。

はてなブックマークは、訪問者がブックマーク数をそのページの評価としてみるのはもちろん、一部のキュレーションメディアの掲載ロジックに利用されています。

ソーシャルアカウントのフォローを促すボタン

Facebookページを作成している場合、Twitterアカウントを作成している場合は、次のボタンを設置することで、フォロー(ファン化)を促せます。

Facebook ページ プラグイン

Facebookページのフォローを促すボタンです。

以前はlike boxという名前のプラグインでしたが2015年6月23日に廃止予定となっており、ページプラグインの利用が推奨されています。

Twitter フォローボタン

Twitterアカウントのフォローを促すボタンです。フォローしてもらうことで、ユーザに情報を発信することができるようになります。

ソーシャルボタンの設置方法

Facebook

Facebookにログインした状態で、それぞれ下記にて必要事項を入力して、埋め込みURLを取得できます。

いいねボタン

[https://developers.Facebook.com/docs/plugins/like-button]

シェアボタン

[https://developers.Facebook.com/docs/plugins/share-button]

ページプラグイン

[https://developers.Facebook.com/docs/plugins/page-plugin]

Twitter

Twitterのシェアボタン、フォローボタンは下記にて埋め込みURLを取得できます。

はてなブックマーク

はてなブックマークは下記にて、必要事項を入力して埋め込みURLを取得できます。

OGPタグの設定

OGPタグとは

OGPタグは、ページの内容をそれぞれのサービスに伝えるためのタグです。OGPタグを適切に設定してあるページにFacebookのいいね!をすると、画像やタイトルを指定してタイムラインに表示させることができます。

HTMLソースのメタタグに記入する必要があります。

OGPタグの種類

OGPタグは次の内容を指定できます。動画やオーディオファイル用の指定もありますが、今回は省略します。

 ウェブページが何のページであるか(必須)

 例:blog,article,website

og:title

 ウェブページの名前(必須)

og:image

 ウェブページのサムネイル(必須)

og:url

 ウェブページの URL(必須)

og:description

 ウェブページの説明

og:site_name

 サイト名

og:emailまたはog:phone_number

 連絡先

og:locality

 場所

og:latitude,og:longitude

 経度緯度での位置情報

 例:37.416343,-122.153013

og:country-name

 国名

OGPタグの確認方法

OGPタグが正しく設定できているかは、Facebookのデベロッパーツールで確認できます。

ソーシャルボタンを簡単に設置できるツール

Facebook、Twitter、はてなブックマークのそれぞれのプラグインを導入するまでは簡単ですが、きれいに並べるにはHTMLやCSSの知識が必要です。

きれいなデザインで簡単にソーシャルボタンを設置できるツールがあります。

zenback

zenbackを利用すると、*ソーシャルボタンの設置を簡単にできる*ほか、Facebookのコメントやツイート、はてなブックマークのコメントなどを、1つのタグを入れるだけで導入が可能です。

また、法人向けの有料版以外に、個人ブロガー向けの無料版があります。

まとめ

ソーシャルボタンやプラグインの導入自体は簡単ですが、レイアウトを綺麗にする場合はCSSの知識が必要です。

Facebookの効果を最大化するためにはOGPタグの設定が必須です。