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

公開日:2013年5月15日

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

(1)下記のコードをbodyタグのすぐ下に追加

<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>

(2)HTMLタグにコードを追加

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

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

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

(3)OGP用コードをheadに追加

EC-CUBE

<!--{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}-->

WordPress

<?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; ?>

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

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

(4)「いいね」ボタンのコードを取得して追加

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

wordpress

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

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

EC-CUBE

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

<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>

■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)