FacebookのLikeボタンとShareボタンの使い方と付け方

Parc de Sceaux, France

先月、FacebookのLikeボタン（日本語環境だと「いいね！」ボタン）が公開されたので、このブログでもつけてみました。

Facebookは日本ではあまり流行ってないのかも知れませんが、フランスではここ2年ぐらいでかなり流行ってきました。先週今週とパリから近いソー公園という花見スポットで、3回花見（←写真参照）に参加しましたが、3つともFacebookで告知が行われていました。パリでは暖かくなりこれからピクニックとかが増えてくると思いますが、facebookに参加しておくと呼ばれることも増えると思うので、オススメです。自分でピクニックとかパーティとかの通知をするのも、パリ周辺に住んでいる友だちリストにクリックひとつで通知できるので便利なのです。

また、各国から研究所に来るインターンシップ生が帰国しても、帰国後の近況を知れるのが嬉しかったりします。このエントリでは、今回このブログに導入したLikeボタンとShareボタンの違いなどを説明して、ブログに付ける方法を説明します。

（追記：2011年2月28日、LikeボタンとShareボタンの機能は統合されました→Facebook、「Like」ボタンの機能を強化--「Share」ボタンの機能を統合）

全世界の4億人以上が利用するFacebook

Facebookをやっていない人のために少し解説しておくと、facebookはミクシィのような友達と近況を報告できるようなソーシャルネットワーキングサービスです。日本ではあまり流行っていない印象がありますが、ユーザが約100万人ぐらいと言われているそうです。Facebook ユーザーの実態とマーケティングにおける実力とは？：日経ビジネスオンラインによると

• 全世界の4億人以上のアクティブユーザーの 50％はいつもログオンしている
• 平均的なユーザーは130人のフレンドを持ち、13のグループ（コミュニティ）のメンバーに登録している
• 毎週50億のコンテンツ（リンク、ニュース、ブログ投稿、ノート、写真など）が共有されている
• 平均的なユーザーは毎月4つの企業や友人のページなどのファンになる
  

だそうです。

このブログのアクセスは8.5割ぐらい日本からなので、facebookを使っている人も少ないかも知れませんが、逆に日本でFacebookをやっている人は海外とのつながりが多い人だと推測されます。このブログの興味とも合うと感じるので、facebookのボタンも付けるにしました。各エントリの下にあるこれ（↓）のうち右の二つのボタンがFacebookのShareとLikeのボタンです。はてなブックマークやTwitterとは違い、見知らぬ人が付けたコメントを見ることはできません。
また、本文の右側に表示されているfacebook上のフランスの日々のページ「Facebook | フランスの日々」も合わせてよろしくお願いします。

LikeボタンとShareボタンの違い

先月公開されたLike（いいね！）ボタンと元からあったshare（シェア）ボタンのどこが違うか解説したページがありました→Facebook Like Button Vs. Facebook Share: Why I’m Keeping Both（FacebookのLikeボタンVS. FacebookのShareボタン：なぜ両方付けることにしたか）。

これによると、LikeボタンとShareボタンでは主に、1) 自分のページにできるリンクの画像の有り無し、2)コメント、3) Friendsへの通知、の点で違いがあるようです。

Likeボタンは

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

一方、Shareボタンは、

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

となります。本ブログでも両方付けることにしました。

実際に試してみて自分のページを見てみると、Likeボタンを押したものは、画像下のようにシンプルなリンクが貼られています。一方、Shareボタンを押すと、ページの画像の上のようにコメントとページ画像、ページ概要を見ることができます。また、Shareボタンの方ではその記事に対してコメントやLike、Shareができます。

LikeボタンとShareボタンの使い方

まとめると、Likeボタンは自分への備忘録として残しておくような場合につかい、Shareボタンは友人に通知したり、自分の意見を言ったり、友人の意見を聞いたりしたい場合となります。ぜひこのブログにつけられているボタンも、どんどん押してくださいね。

Facebookでは英語を使っている人は、日本語のサイトをシェアするのをためらうかも知れません。実際、僕もfacebookは英語主体で使っています。友人との会話の場合は、相手に応じて、日本語、フランス語、英語を使い分けたりしています。それでも、トップページに流れる情報を見てみると、日本語、フランス語、英語のほかにも、僕は読めないアラビア語、韓国語、中国語、ポルトガル語、スペイン語、イタリア語などなど、友人たちが使っています。

はてなは日本語、Diggは英語とサービスごとに言語が分かれていますが、facebookは世界の人が参加しているので、何語を使ってもいいはずです。翻訳しないと読めないページも有りますが、それはそれなりに楽しいものなのです。なので、このブログのように日本語の記事をシェアするのも問題ないと思います。いろいろな言語の人達が参加するfacebookではこれからどんな文化が花開くか楽しみですね。

Facebookのボタンのつけ方

Likeボタンのつけ方は「Like Button - Facebook Developers」にあります。iframeで付ける方法と、XFBMLで付けるやり方があります。XFBMLの方がコメント機能やタイトルの設定機能などすべての機能が使えるそうですが、実験してみたところ本ブログでは表示されたり表示されなかったりするので、今のところiframeを使っています。Bloggerのエントリー投稿画面にログインして、レイアウトの編集をクリック→HTMLの編集（ここで、ウィジットのテンプレートを展開をチェッ ク）→ボタンを貼付けたいところに、ボタンのHTMLを編集すればO.K.です。このブログでは、

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span>
</div>

の後に、以下のコードを貼り付けてあります。横幅90ピクセル、縦幅60ピクセルにしています。このボタンは読者が英語設定だとLikeと表示され、日本語設定だと「いいね！」と表示されます。日本語だと英語に比べて横幅が増えてしまうので、90ピクセル以下だとはみ出してしまいました。

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;  &amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:60px'/>

一方、Shareボタンは「Facebook | Share」で手に入ります。このブログでは、上のコードの近くに、以下のように貼り付けてあります。

<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Bloggerのアーカイブにはてなブックマーク数を表示する

ココからはfacebookとは関係ありませんが、本ブログでは何ヶ月か前から導入しているBloggerのアーカイブにはてなブックマーク数を表示する方法を書いておこうと思います。まず、上と同じように、Bloggerのエントリー投稿画面にログインして、レイアウトの編集をクリック→HTMLの編集（ここで、ウィジットのテンプレートを展開をチェッ ク）と進みます。それから<li><a expr:href='data:i.url'><data:i.title/></a></li>の部分を探し出して、以下のコードに置き換えれば、完了です。右の画像のようにブログアーカイブの後にはてなブックマーク数が表示されるようになります。

<li><a expr:href='data:i.url'><data:i.title/></a> <a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:i.url'><img alt='このエントリーを含むはてなブックマーク' expr:src='&quot;http://b.hatena.ne.jp/entry/image/&quot; + data:i.url' style='border: none; padding: 0px;' title='このエントリーを含むはてなブックマーク'/></a></li>

関連：

• Blogger にブックマーク（はてな、Livedoor、Yahoo）のボタンをつける
• Blogger にソーシャルブックマークのボタンをつける

like（いいね！）ボタンを押すとFacebookで記事の更新が受けられます。