読者です 読者をやめる 読者になる 読者になる

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

Facebook Tips

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


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

手順1:Facebook Like Boxのコードを取得する

Facebookページの管理者であるアカウントで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」の3種類のコードが用意されているので、「IFRAME」をクリックしてコードを表示させます。

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

何かコードがおかしい?

上の画像をよ〜く見てみてください。
これっておかしいですよね?「http:」が抜けてる。。Facebook側のバグでしょうか?

この部分の「http:」が抜けていることに気づかないで、何度も以降の手順を試して上手くいかなくて困っていました(苦笑
なので、取得したコードに必ず「http:」を追記しておいてください。

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

先ほど取得したコードにはiframeタグが含まれているのですが、はてなダイアリーではiframeタグが利用できません。
これを解決するために、iframeを含むコードをGoogle Gadget用コードに変換してくれるツールがあるので、それを利用させてもらいます。
iframe → Google Gadget コンバータ
このページに先ほど取得したコードを貼り付けて生成したGoogle Gadget用コードをコピーしてテキストエディタなどに保存しておきます。
はてなダイアリーGoogle Gadgetには対応しているので、この状態であれば貼り付けることが可能です。
iframeを利用した他のブログパーツなども同様に変換することで、はてなダイアリーに表示させることができるので、大変ありがたいツールですm(__)m

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

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


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

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


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

    1. 「ページのヘッダ」または「ページのフッタ」に以下の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を付けることができます。