浜松市を拠点に静岡県西部にてWeb,デザイン,写真撮影〜を行っております。SOHOならではの身軽さと適正料金にてお客様の企業価値向上に取り組んでいます。サイト制作・管理、カタログ・広告デザイン、撮影等までお気軽にご相談下さい。




2011年9月11日

wordpressにFacebookのコメント欄、いいねボタンを追加(補足版)

Filed under: Web & Design,備忘録 — Cript @ 12:01 PM

前回、書いた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のページで確認。
エラーが出ていたら表示内容にあわせて修正。

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment