Facebookやはてぶなど大きなソーシャルシェアボタンの作り方

Pocket

大きなSNSボタンの作り方
facebookやtwitterなどブログをより多くの人にシェアしてもらうために必須と言えるシェアボタン。ボタンだけの小さなものから上の画像のような数字入りの大きなボタンまで様々な種類があります。

やっぱり設置するなら大きく目立つ方が良い!ということでこの記事では以外とわかりにくい大きなシェアボタンを設置する方法を紹介します。facebookやTwitterのみでなく、最近人気のpocketやはてぶのボタンも作っていきます。

Facebookいいねボタンの作り方

Facebookのいいねボタンはこちらの公式ページで作成し、コードを取得します。
大きなSNSボタンの作り方facebookボタン
GetCodeを押すとコードが表示されるので上の部分をhtmlのbodyタグの後ろへ、下にあるコードは好きな場所へ配置します。
大きなSNSボタンの作り方facebookボタン2
変更箇所はURLのみ。URLにはいいねしたいページのURLを入力。wordpressなど動的なサイトの場合はページのURLを表示するタグを入れます。

data-href="<?php the_permalink(); ?>"

Twitterシェアボタンの作り方

Twitterボタンを設置するには公式デベロッパーサイトで下の方にあるコードを取得します。
大きなSNSボタンの作り方2
変更箇所は以下の通り。

  • data-url:現在のページの場合はここを削除、特定のページならURLを入力
  • data-via:自分のtwitterアカウント
  • data-lang:ja

はてなブックマークボタンの作り方

はてなブックマークのボタンはこちらの公式ページから取得します。

大きなSNSボタンの作り方
公式ページでタイトルなどを入力します。Facebookと同様、wordpressのような動的なサイトの場合はURLやタイトルを取得するタグを入れておきます。

href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"

data-hatena-bookmark-title="<?php the_title(); ?>"

pocketボタンの作り方

pocketのボタンはこちらで作成します。
大きなSNSボタンの作り方 - pocket
pocketのボタンは特に設定する必要はなく、表示したいところにぺたっとコードを貼付ければOK。

Google+1ボタンの作り方

Google+1ボタンはこちらのページでコードを取得します。
大きなSNSボタンの作り方 - google1
サイズはtall、+1情報にバルーンを選択すればOK。こちらもpocketと同様特にコードを修正することはないのでコードをそのまま貼付ければOK。

さいごに

Webサイトのアクセスアップにはこういったソーシャルボタンの存在は欠かせません。実際に僕のブログもはてなブックマークやFacebookのいいねが多いページはアクセスが非常に多くなります。

ブログに限らずECサイトやコーポレートサイトのキャンペーンページなどでは必ず設置しておきたいところ。しかし、ただ単に置くだけではその効果を十分に発揮できない可能性があります。ボタンを押してもらえるようにレイアウトを最適化する必要があるということですね。

これを機会に是非ソーシャルメディアマーケティングについて学んでみて下さい。しっかりやるのと適当にやるのとでは本当に大きな差があります。