ソーシャルブックマーク&投稿ボタンの設置②

この記事が良ければ、ぜひシェアお願いします

ソーシャルブックマーク&投稿ボタンの設置①の続きです。

ということで、とりあえず設置できましたでは、知識としても充分ではないと考えたので、それぞれのWEBサービスの技術ページを探してみました。そのスクリプトをベースに、綺麗にボタンが並べられるようにしたいと思います!

はてなブックマークボタンの場合

はてなブックマークでは、ボタンの種類が3種類あるようです。こちらのページに各ボタンのスクリプトや概要が記載されています。

はてなブックマークボタンの作成・設置について


<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Facebookいいねボタンの場合

Facebookはshareボタンがもともとありましたが、Likeボタン(日本語だと『いいね』ボタン)が現在では主流になっていますよね。Facebookは日本でも急拡大していますが、開発スピードがとんでもなく速いせいか、仕様が随時変わっているようです。そのせいで、色々と記事を検索してみるものの、どうも記事の内容とズレがある・・・気がする(汗

ちなみに、こちらのサイトを参考にさせてもらいました。

「いいね!」ボタンを設置しよう | Facebook Guide
facebook いいねボタンの仕様変更?OGPの設定についてまとめました( localeプロパティについて) | HTML5でサイトを作ろう

Facebookのプラグインを使うためには、まずFacebook Developersに登録が必要です。(アカウント認証が済んでいない場合は、携帯電話かクレジットカードを使って認証をする必要があります。)

ちなみに、『Likeボタン』の仕様はこちらのページに書かれています。

Step 1 – Get Like Button Code

こんな感じの画面が表示されますので、それぞれ入力していきます。


2011年12月現在だと、iframe版とXFBML版の2種類にHTML5版が追加され、3種類のコードが表示されるようになります。ここでは、HTML5版を使った場合のコード例を表示したいと思います。


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://blog.info-architecture.jp" data-send="true" data-width="450" data-show-faces="true"></div>

Step 2 – Get Open Graph Tags

いいねボタンと同様のページでOpen Graphタグのソースコードを取得します。

Open Graphの設定がなぜ必要かというと、別に設定しなくても良いっちゃよいのですが、こちらのサイトでも書かれているのですが、Social Graphのメリットをより享受できるようになります。今のFacebookを使っている方は分かると思いますが、『フレンドが誰のコメントに書き込みをしたか』や『どのリンクをshareしたか』、『誰と誰が友達になったか』と、Social関係が丸わかりな状態になっています。これにより、Facebookのボタンを押された場合に、それがその人のSocial Graphに繋がっていく→さらに連鎖するという良い状態が作れる訳です。


入力をしていくと、このような感じでオープングラフタグが生成されますので、それをmetaに含めるようにします。


また、『Likeボタン』と『Shareボタン』では、このように仕様が微妙に異なるようです。

【Likeボタン】

  • 自分のページに画像なしのリンクが出来る
  • コメントなし
  • Friendsへの通知が行われない
  • Friendsのハイライトへの通知が行われず、最新情報へ通知される

【Shareボタン】

  • 自分のページに画像ありのリンクが出来る
  • リンクにコメントを付けられる
  • Friendsへ通知が行われる

つまり、Likeボタンはあなたの備忘録として残しておくような場合に使用し、Shareボタンは友人に通知したり、自分の意見を言ったり、友人の意見を聞いたりしたい場合となります。Likeボタンを使うかShareボタンを使うかはホームページ、ブログの目的によって変えて良さそうですが、今後のことを考えると『Likeボタン』の設置の方が良さそうな気がしますね!

Twitterボタンの場合

Twitterボタンは2011年12月現在4種類用意されていますが、その設置方法については公式サイトで作れるようになっています。

Twitter社について / 素材 / Twitterボタン

下記に当サイトの場合のコードを記述したいと思います。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="digi_cyber" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

もうここまで書いてきて、だいぶお腹いっぱいになってしまいましたので(笑)、②編はこの辺にしておきたいと思います。ソーシャルブックマークボタンの設置は、デザインリニューアルを考えているので、それと合わせて進めたいと思います。

※この記事はソーシャルブックマーク&投稿ボタンの設置①の続きです。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク

コメントをどうぞ