はてなダイアリーにFacebook Like Boxを付ける方法が上手くいかなくて苦戦しました

最近、Facebookを始めて、この星羽モバイル日和のFacebookページを作ってみたので、サイドバーにFacebook Like Box（Facebookページに「いいね」してくれた人の数を表示するもの）を付けたいと思い、調べつつ試してみたのですが、なかなか上手く行かず。。でも、その原因がやっと分かりました。

はてなダイアリーにFacebook Like Boxを付ける手順と、上手くいかなかった原因についてです。

手順１：Facebook Like Boxのコードを取得する

Facebookページの管理者であるアカウントでFacebookにログインした状態で、以下のページへアクセスします。

Like Box - Facebook開発者

すると、以下のようなFacebook公式のFacebookページのLike Boxが既に表示されています。

「Facebook Page URL」にLike Boxを生成したいFacebookページのURLを指定します。

星羽モバイル日和の場合は、このURLを指定します。

Facebook

設定を変えるとリアルタイムでLike Boxのデザインが変わるので、適当に設定を変えてみると分かると思いますが、

・Width：表示幅

・Height：表示高さ

・Color Scheme：Light→背景が白の標準的な感じ、Dark→背景が黒のハイコントラスト

・Show Faces：「いいね」を押してくれた人のFacebookアイコンを表示する/しない

・Border Color：Like Boxの枠の色。デフォルトは黒

・Show Stream：Facebookページのウォールを表示する/しない

・Show Header：Like Boxの上に青背景の「Facebookもチェック」を表示する/しない

という感じで設定項目が並んでいるので、自分のブログに合わせて設定してください。

で、こんなになりました。

このLike Boxをブログに貼り付けるためのコードを取得するには、設定の下にある「Get Code」をクリックします。

するとウィンドウが出てきます。

「HTML5」「XFBML」「IFRAME」の３種類のコードが用意されているので、「IFRAME」をクリックしてコードを表示させます。

コード部分をクリックすると全選択されるので、コピーしてテキストエディタ等に保存しておきます。

何かコードがおかしい？

上の画像をよ～く見てみてください。

これっておかしいですよね？「http:」が抜けてる。。Facebook側のバグでしょうか？

この部分の「http:」が抜けていることに気づかないで、何度も以降の手順を試して上手くいかなくて困っていました（苦笑

なので、取得したコードに必ず「http:」を追記しておいてください。

手順２：はてなダイアリーで利用するためにコードを変換する

先ほど取得したコードにはiframeタグが含まれているのですが、はてなダイアリーではiframeタグが利用できません。

これを解決するために、iframeを含むコードをGoogle Gadget用コードに変換してくれるツールがあるので、それを利用させてもらいます。

iframe → Google Gadget コンバータ

このページに先ほど取得したコードを貼り付けて生成したGoogle Gadget用コードをコピーしてテキストエディタなどに保存しておきます。

はてなダイアリーはGoogle Gadgetには対応しているので、この状態であれば貼り付けることが可能です。

iframeを利用した他のブログパーツなども同様に変換することで、はてなダイアリーに表示させることができるので、大変ありがたいツールですm(__)m

手順３：はてなダイアリーに貼り付ける

はてなダイアリーの「管理画面」→「デザイン」を選択します。

・「かんたん」設定タブの場合

「サイドバー」タブに切り替える
「次へ」を押して「ブログパーツ」を見つけてクリック
コード貼り付け用のウィンドウが表示されたら、先程のコードを貼り付けて「決定」

・「詳細」設定タブの場合

「ページのヘッダ」または「ページのフッタ」に以下のdivタグでコードを挟む形で好きな場所に貼り付ける

<div class="hatena-widget">
Google Gadget化したFacebook Like Boxのコードをここに
</div>

【追記】＜div class="sidebar"＞＜/div＞の間に入っていれば、＜div class="hatena-widget"＞＜/div＞の中に入れなくても表示は崩れないようです。id:satonaoakiさん、教えていただきありがとうございますm(__)m

これで、はてなダイアリーにFacebook Like Boxを付けることができます。

Permalink | コメント(6) | トラックバック(2)

コメントを書く

satonaoaki 2011/11/18 15:41 はじめまして、佐藤直曉と申します。おかげさまで、Facebookページをはてなのサイドバーに付けられました。私はデザインを「詳細」でつくっていますが、<div class="hatena-widget">はなくても大丈夫でした。前の方に<div class="sidebar">がありますので。いずれにしろ、ありがとうございました。

Hoshiba 2011/11/19 12:27 ◆satonaokiさんへ◆
はじめまして（ぺこり
記事がお役に立って良かったです♪
<div class="hatena-widget">は無くても大丈夫ということで今試してみたところ、確かに無くても<div class="sidebar">の中にあれば表示が崩れることはありませんでした。
教えていただきありがとうございます☆

Nanako 2012/01/15 11:11 はじめまして。Nanakoと申します。
Like Boxの設置がどうしてもできず、困っていました！
確かに「http:」が抜けてる！！！
こちらにたどり着くまで気づきませんでした。
おかげで、無事設置できる事ができました♪
ありがとうございました★

Hoshiba 2012/02/25 12:20 ◆Nanakoさんへ◆
はじめまして（ぺこり
この記事がお役に立って良かったです。
ただ、今現在ではList Boxの部分が「You are being redirected.」という表示になって、「redirected」の部分をクリックしないと表示されない状態になっているので、FacebookかGoogle Gadgetの仕様が変わってしまったのかもしれません。。
また調べてみたいと思います。

gomanjp 2012/03/20 22:07 とても役に立ちました！
ありがとうございました！