熊本でWEB開発もホームページ制作もしないブログ

ファンブログにFacebookのいいねボタンを設置してみました。

以下、その方法です。

まずは、Facebookのdevelopperサイトに行って「いいねボタン」のコードを生成します。

なぜか英語のサイトに飛んでしまいますが、必要な部分は大体わかる単語なので気にしません。

facebook developers

以下の部分を見つけて、適当に入力します。
（画像切れちゃいましたが、影響ないのでリサイズしてません）



URLは適当でいいです。後で書き直しますので。
Widthは、デフォルトは450になっていますが、必要な情報だけを表示するのであれば、91で充分です。
まぁ、これも後で書き直せますが。
fontは日本語になってしまいますので何にしても同じです。
まぁ、あとはサンプルがリアルタイムに変化しますので、納得するまでいじってください。
セッティングが決まったら、下の「Get Code」ボタンを押します。

Your Plugin Codeってのが表示されます。



デフォルトではHTML5が選択されていますがファンブログではIFRAMEがいいでしょう。
HTML5だとブラウザによっては動きがまだ微妙です。

生成されたhtmlのコードをコピーしてテキストエディタなどに一旦貼り付けます。

そこでファンブログ用にちょっと改造します。

「href=http%3A%2F%2Fhofehoge.jp」
と、なっている部分を、
「{$BlogEntryPermalinkUrl$}」
に書き換えます。中括弧まできちんと入力してください。

この中括弧で囲まれた部分がファンブログの特徴的なところで、ここにプログラムでデータが挿入されます。
で、{$BlogEntryPermalinkUrl}ってところにそのブログの記事のURLが入るわけです。

ここまでできたら準備完了です。

ファンブログの管理画面で、[スタイルの編集]→[メイン]を選択します。

で、さっきのコードを貼り付ける位置なんですが、ぶっちゃけ

<BlogEntries>〜</BlogEntries>

ならどこでもいいです。

私は気分的に記事の下に入れたかったので、

<div class="entryInfo">〜</div>

の下にいれました。

で、「保存」すればOK。

これだけで充分なのですが、徹底的に付けたい人は「1記事」のテンプレートの内部でも同じような部分を見つけて貼り付けましょう。

これであなたのファンブログもソーシャル化しちゃいました。

Googleの「+1ボタン」に関してはまた次回。

実は「いいねボタン」とは別にCSSも今回いろいろいじってモノクロのシックな感じにしてみました。
ま、そこはCSS読めるレベルであれば大したことはやってないので割愛します。