facebookやtwitterなどブログをより多くの人にシェアしてもらうために必須と言えるシェアボタン。ボタンだけの小さなものから上の画像のような数字入りの大きなボタンまで様々な種類があります。
やっぱり設置するなら大きく目立つ方が良い！ということでこの記事では以外とわかりにくい大きなシェアボタンを設置する方法を紹介します。facebookやTwitterのみでなく、最近人気のpocketやはてぶのボタンも作っていきます。
Facebookいいねボタンの作り方
Facebookのいいねボタンはこちらの公式ページで作成し、コードを取得します。
GetCodeを押すとコードが表示されるので上の部分をhtmlのbodyタグの後ろへ、下にあるコードは好きな場所へ配置します。
変更箇所はURLのみ。URLにはいいねしたいページのURLを入力。wordpressなど動的なサイトの場合はページのURLを表示するタグを入れます。
data-href="<?php the_permalink(); ?>"Twitterシェアボタンの作り方
Twitterボタンを設置するには公式デベロッパーサイトで下の方にあるコードを取得します。
変更箇所は以下の通り。
- data-url:現在のページの場合はここを削除、特定のページならURLを入力
- data-via:自分のtwitterアカウント
- data-lang:ja
はてなブックマークボタンの作り方
はてなブックマークのボタンはこちらの公式ページから取得します。
公式ページでタイトルなどを入力します。Facebookと同様、wordpressのような動的なサイトの場合はURLやタイトルを取得するタグを入れておきます。
href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"
data-hatena-bookmark-title="<?php the_title(); ?>"pocketボタンの作り方
pocketのボタンはこちらで作成します。
pocketのボタンは特に設定する必要はなく、表示したいところにぺたっとコードを貼付ければOK。
Google+1ボタンの作り方
Google+1ボタンはこちらのページでコードを取得します。
サイズはtall、+1情報にバルーンを選択すればOK。こちらもpocketと同様特にコードを修正することはないのでコードをそのまま貼付ければOK。
さいごに
Webサイトのアクセスアップにはこういったソーシャルボタンの存在は欠かせません。実際に僕のブログもはてなブックマークやFacebookのいいねが多いページはアクセスが非常に多くなります。
ブログに限らずECサイトやコーポレートサイトのキャンペーンページなどでは必ず設置しておきたいところ。しかし、ただ単に置くだけではその効果を十分に発揮できない可能性があります。ボタンを押してもらえるようにレイアウトを最適化する必要があるということですね。
これを機会に是非ソーシャルメディアマーケティングについて学んでみて下さい。しっかりやるのと適当にやるのとでは本当に大きな差があります。
