facebook　いいねボタンを設置 / OGP設定〔EC-CUBE・Wordpess〕

WordPressとEC-CUBEの「いいね」ボタン設置時のOGP設定用コードのメモです。
~~ここにメモしている方法は、XHTMLの場合です。~~今後facebookの仕様が変わる場合があります。

（１）下記のコードをbodyタグのすぐ下に追加

[php highlight=”6″]
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=（アプリID）";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
[/php]

（２）HTMLタグにコードを追加

[php]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
[/php]

　↓　下のコードに置き換える

[php]
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:fb="http://ogp.me/ns/fb#">
[/php]

（３）OGP用コードをheadに追加

EC-CUBE

[php highlight=”10,18,25″]
<!–{assign var=detail value="`$smarty.const.ROOT_URLPATH`products/detail.php"}–>
<!–{assign var=list value="`$smarty.const.ROOT_URLPATH`products/list.php"}–>
<!–{if $smarty.server.PHP_SELF==$detail}–>
<meta property="og:title" content="<!–{$arrProduct.name|escape}–>" />
<meta property="og:type" content="product" />
<meta property="og:image" content="http://<!–{$smarty.server.SERVER_NAME}–>/html/upload/save_image/<!–{$arrProduct.main_list_image}–>" />
<meta property="og:site_name" content="<!–{$arrProduct.name|escape}–> | <!–{$arrSiteInfo.shop_name|h}–>" />
<meta property="og:url" content="http://<!–{$smarty.server.SERVER_NAME}–>/html/products/detail.php?product_id=<!–{$arrProduct.product_id}–>" />
<meta property="og:description" content="<!–{$arrProduct.main_list_comment}–>" />
<meta property="fb:app_id" content="（アプリID)" />
<!–{elseif $smarty.server.PHP_SELF==$list}–>
<meta property="og:title" content="<!–{$tpl_subtitle|h}–> | <!–{$tpl_title|escape}–>" />
<meta property="og:type" content="product" />
<meta property="og:image" content="http://<!–{$smarty.server.SERVER_NAME}–><!–{$TPL_URLPATH}–>img/common/favicon.ico" />
<meta property="og:site_name" content="<!–{$tpl_subtitle|h}–> | <!–{$arrSiteInfo.shop_name|h}–>" />
<meta property="og:url" content="http://<!–{$smarty.server.SERVER_NAME}–><!–{$smarty.server.REQUEST_URI|h}–>" />
<meta property="og:description" content="<!–{$arrSiteInfo.shop_name|h}–>" />
<meta property="fb:app_id" content="（アプリID)" />
<!–{else}–>
<meta property="og:title" content="<!–{$arrPageLayout.description|h}–>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://<!–{$smarty.server.SERVER_NAME}–>" />
<meta property="og:image" content="http://<!–{$smarty.server.SERVER_NAME}–><!–{$TPL_URLPATH}–>img/common/favicon.ico" />
<meta property="og:site_name" content="<!–{$arrSiteInfo.shop_name|h}–>" />
<meta property="fb:app_id" content="（アプリID)" />
<!–{/if}–>
[/php]

WordPress

[php highlight=”4,5,8,12,23,24″]
<?php if(is_home()): ?>
<meta property="og:title" content="<?php bloginfo(‘name’); ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php bloginfo(‘url’); ?>" />
<meta property="og:image" content="http://ドメイン.com/ogp.png">
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>" />
<meta property="og:description" content="<?php bloginfo(‘description’); ?>" />
<meta property="fb:app_id" content="（アプリID)" />
<?php else: ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>" />
<?php
if (is_single()){//投稿ページの場合
if(have_posts()): while(have_posts()): the_post();
echo ‘<meta property="og:description" content="’.mb_substr(get_the_excerpt(), 0, 100).’" />’;echo "n";//抜粋を表示
endwhile; endif;
} else {//投稿ページ以外の場合（アーカイブページやホームなど）
echo ‘<meta property="og:description" content="’; bloginfo(‘description’); echo ‘" />’;echo "n";//「一般設定」管理画面で指定したブログの説明文を表示
}
?>
<meta property="og:image" content="http://ドメイン.com/ogp.png">
<meta property="fb:app_id" content="（アプリID)" />
<?php endif; ?>
[/php]

■OGP用の画像名（og:image）は、任意の名称です。（例：ogp.png）
wordpressのテンプレートディレクトリーに格納するとデバックでエラーがでるようです。ドメイン直下に置くとOKでした。それでもエラーが出るようなら、wordpressのタグを使わず普通に「http://～」のように書いたほうが良いようです。

■（アプリID)は、開発者登録してアプリを作成して取得します。

（４）「いいね」ボタンのコードを取得して追加

コードの仕様は、コード取得時に選択できます

wordpress

下記のコードを、単一ページのテンプレートに追加

[php]
<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="true" data-layout="button_count" data-width="100%" data-show-faces="true"></div>
[/php]

EC-CUBE

下記のコードを、デザイン管理 → ページ詳細設定 → 商品詳細ページに追加

[php]
<div class="facebook-like-botan">
<fb:like href="http://<!–{$smarty.server.SERVER_NAME}–>/html/products/detail.php?product_id=<!–{$arrProduct.product_id}–>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
</div>
[/php]

■Like Botan－Facebook開発者のページで、各コードを取得できます。

http://developers.facebook.com/docs/reference/plugins/like/

■~~デバックでエラーがでる時は、wordpressのタグではなくHTMLで書いてください。wordpressのタグでは不具合があるようです~~。
マルチサイトの子サイトでは、og:urlの部分に＜?php bloginfo(‘url’); ?＞　と書くとエラーになります。og:urlの部分は＜?php the_permalink(); ?＞と記述でOKです。

■下記URLでデバックができます

https://developers.facebook.com/tools/debug

※タグを一部修正しました。(2013.05.31)

※タグを一部修正しました。(2013.06.06)

※タグを一部修正しました。(2013.09.30)