

みなさん、Facebook ライフ楽しんでいますかー?
Facebook とブログのようなウェブサイトを連携するには、[Facebook] OGPタグを設定しウェブページの情報をきちんとわかりやすく伝える に記載したように OGPタグを設定して Facebook の JavaScript SDK コードと「いいね!」ボタンなどのパーツとなる HTMLコードをウェブページにコピペしなければいけません。
これが結構面倒なんですが、ライブドアブログにはあらかじめ用意されている OGPタグの変数があるんです!
今回は、この OGPタグを利用したライブドアブログの Facebook 設定方法をご紹介します。
OGP 変数タグを設定する
ライブドアブログには、<$OGP$> という変数タグがあります。まずはこれを設定します。
ブログの管理画面から、「ブログ設定」⇒ デザイン / ブログパーツ設定の「PC」⇒「カスタマイズ」タブを選択し、「トップページ」を開きます。

そして、<head> と </head> タグの間に <$OGP$> という文字列をコピペし、「保存する」ボタンをクリックして反映させます。

わたしが利用している キャンパス レイアウトは、既に <$OGP$> タグが設定されていました。もしかすると、デフォルトでどのレイアウトにも設定されているかもしれません。
既に設定されている場合は何もしなくて OK です。この OGPタグの設定と確認を「個別記事ページ」「カテゴリアーカイブページ」「月別アーカイブページ」で実施し次のステップに移ります。
fb:admins プロパティを追記する
調べてみると、<$OGP$> 変数タグで設定される プロパティと設定値は以下のようです。
og:type | トップページの場合は blog、各記事の場合は article |
og:title | 各ブログ記事のタイトル |
og:description | トップページの場合は説明、各記事の場合は文章の先頭から130文字ぐらい? |
og:url | 各記事の URL |
og:image | トップページの場合はアイコン画像、各記事の場合は記事内で最初に貼り付けられた画像 |
og:site_name | ブログのタイトル |
og:locale | "ja_JP" (日本語) で統一 |
色々と設定が自動でされており非常に便利なのですが、fg:admins プロパティが入っていません!
これを追記します。
「トップページ」「個別記事ページ」・・・ とそれぞれ追加していっても良いのですがメンドクサイので、ここは管理のしやすさも考えて、一箇所の設定ですべてのページに配置できるよう、同じブログ管理画面のカスタマイズページにある「カスタムJS」に設定します。
「head内」に fb:admins プロパティを記載して、"保存する" をクリックし反映させます。

Facebook の「いいね!」ボタン、Like Box、コメントを設置する
これらは、これまでに紹介した以下方法と同じです。こちらをご覧ください。
【補足】「いいね! ボタン」と「コメント」をブログの各記事に対応するには、貼り付けるコードの "data-href" に <$ArticlePermalink$> を設定すれば OK です。
例) 「data-href="<$ArticlePermalink$>" 」
++++++++++
はい、以上で完了です! ライブドアブログでは便利な <$OGP$> 変数タグがありますので、これを積極的に利用して不足分のみ追記するようにしましょう!
これでライブドアブログでの Facebook 連携はカンペキ・・・ と言いたいところなのですが、このままではスマートフォンサイトでは Like Box やコメントが表示されないという問題があります。
こちらを解決したい方は、以下をご覧ください。
コメント