livedoorblog_logofacebook logo

みなさん、Facebook ライフ楽しんでいますかー?


Facebook とブログのようなウェブサイトを連携するには、[Facebook] OGPタグを設定しウェブページの情報をきちんとわかりやすく伝える に記載したように OGPタグを設定して Facebook の JavaScript SDK コードと「いいね!」ボタンなどのパーツとなる HTMLコードをウェブページにコピペしなければいけません。


これが結構面倒なんですが、ライブドアブログにはあらかじめ用意されている OGPタグの変数があるんです!

今回は、この OGPタグを利用したライブドアブログの Facebook 設定方法をご紹介します。


OGP 変数タグを設定する

ライブドアブログには、<$OGP$> という変数タグがあります。まずはこれを設定します。


ブログの管理画面から、「ブログ設定」⇒ デザイン / ブログパーツ設定の「PC」⇒「カスタマイズ」タブを選択し、「トップページ」を開きます。


lv_fbparts01_1

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


lv_fbparts02_1

わたしが利用している キャンパス レイアウトは、既に <$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 プロパティを記載して、"保存する" をクリックし反映させます。


lv_fbparts03_1

Facebook の「いいね!」ボタン、Like Box、コメントを設置する

これらは、これまでに紹介した以下方法と同じです。こちらをご覧ください。

【補足】

「いいね! ボタン」と「コメント」をブログの各記事に対応するには、貼り付けるコードの "data-href" に <$ArticlePermalink$> を設定すれば OK です。
例)  「data-href="<$ArticlePermalink$>" 」



[Facebook] いいね!ボタンを設置してサイトの情報をみんなに拡げる | C-through the Mac


[Facebook] Like Box を設置して ウェブサイトのファンを増やす | C-through the Mac


[Facebook] コメントを設置してみんなとコミュニケーションする場を作る | C-through the Mac

++++++++++

はい、以上で完了です! ライブドアブログでは便利な <$OGP$> 変数タグがありますので、これを積極的に利用して不足分のみ追記するようにしましょう!


これでライブドアブログでの Facebook 連携はカンペキ・・・ と言いたいところなのですが、このままではスマートフォンサイトでは Like Box やコメントが表示されないという問題があります。


こちらを解決したい方は、以下をご覧ください。


ライブドアブログのスマートフォンサイトでも Facebook パーツを表示させる | C-through the Mac


スポンサーリンク