前回、書いたFacebookのコメント欄、いいねボタンを追加するの記事に足りないところ(Get Open Graph Tags)を記述するがあったので補足と自分用まとめ。
備忘録
Social Pluginsのページから「Like Button」へ進む。
Step 1 – Get Like Button Code へ必要事項を記入。
「Get Code」をクリック
表示されたコードを表示させたいところwordpressのテーマ(single.phpのループ内等)に貼り付け。
貼り付けたコードを修正
data-href=”記入したURL”
を ↓
data-href=”<?php the_permalink(); ?>”
に変更。
日本語表示にする為に en_US を→ ja_JP に変更。
「Comments欄」
Social Pluginsのページから「Comments」へ進む。
同じようにURL等必要事項を記入して「Get Code」をクリック。
同じように
表示されたコードを表示させたいところwordpressのテーマ(single.phpのループ内等)に貼り付け。
貼り付けたコードを修正
data-href=”記入したURL”
を ↓
data-href=”<?php the_permalink(); ?>”
に変更。
日本語表示にする為に en_US を→ ja_JP に変更。
「Get Open Graph Tags」
「いいねボタン」を取得したページにて、「Get Open Graph Tags」を取得する。
それを<head></head>内に記入
設定時にアプリIDが必要になるので取得
Create an App のページでサイト名(任意)とURLを記入して「Create app」をクリック。
アプリID等が表示されるのでメモしておく。
アプリIDは<meta property="fb:app_id" content="***************"/>
で同様に<head></head>内に記入。
いいねボタンのコードを表示したページに戻って 「Step 2 – Get Open Graph Tags」に必要事項を記入。
TypeはBlogで、Imageはボタンが押された時に表示されるサムネイル。
「Get Code」をクリックしてコードをコピー。
<head></head>内に記入。
必要事項を記入。
は
に。
さらに、
xmlns:og=”http://ogp.me/ns#”
xmlns:fb=”http://www.facebook.com/2008/fbml”
を<head></head>
に追加。
例:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
以上で設置したOpen Graph Tagsが正常に作動しているかどうかをObject Debuggerのページで確認。
エラーが出ていたら表示内容にあわせて修正。