FacebookのOGPタグを挿入することで、いいねボタンを押してもらった時に「ニュースフィード」に表示され、ホームページやブログ記事がより多くの人の目に触れるようになります。

▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから（facebookユーザーのみ）

サンプルはこちら

1　jQuery.socialbuttonの設定

（1）html/jsフォルダに「jquery.socialbutton」フォルダを追加
jquery.socialbuttonの中身→jquery.socialbutton-1.8.1.js
http://itra.jp/jquery_socialbutton_plugin/

（2）SSL接続しても「セキュリティで保護されていないページが混在している」というアラートを表示させないために、jquery.socialbutton-1.8.1.jsの、ファイルパスの指定を「http://」から「//」に変更する。（2カ所変更）
「//」から始めると、アクセスしているページの接続方法に対応した接続方法になる。http://から始まる非SSL接続であればhttp://から始まるファイルとして読み込み、https://から始まるSSL接続であればhttps://から始まるファイルとして読み込む。

①　479ページあたり

[php]
var tag = ‘‘;

↓変更

var tag = ‘‘;
[/php]

②　528ページあたり

[php]
$(‘body’).append(‘‘);

↓変更

$(‘body’).append(‘‘);
[/php]

（3）PCとスマートフォンのsite_frame.tplに追加する。

①　■data/Smarty/templates/default/site_frame.tpl

[/php]

②　■data/Smarty/templates/sphone/site_frame.tpl

[/php]

2　Facebook用のOGPタグを組み込む。Twitterアカウント設定。

（1）商品一覧ページで「いいね！」がクリックされたときのページ内のイメージを指定することが難しいので、画像を新しく用意する。
その際、縦横ともに200px以上ないとOGPチェックでエラーが出るので、200px×200pxの画像を作成する。
保存場所と画像名は、■img/common/facebook_ogp.png

（2）商品詳細ページでのイメージは商品画像を指定するが、これもまた縦横ともに200px以上が必要。
商品画像に長方形を使用した場合、main_imageの片方の辺が200pxに満たないことも考え、main_large_imageを設定する。
しかし、main_large_imageが登録されない場合もあるので、条件分岐文で「main_large_imageが存在しなければmain_imageを使う」となるように設定する。
200pxに満たないというエラーが出ても、Facebook上ではとりあえず表示される。

※Facebookの仕様は、度々変更されるので上記のことも今後変更の可能性がある。（2012年10月現在）

（3）OGPを機能させるには、App_IDが必要となる。
https://developers.facebook.com/で、サイト専用のアプリを作成して取得する。

（4）App_IDの有無によって、OGPタグを組み込むタグを表示するかしない設定する。mtb_constantsテーブルに追加する。

①　データベースへApp_IDの設定を挿入（mtb_constants） 下記「1433」は適宜

[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('FACEBOOK_APPID', '"なし"', 1433, 'FacebookのApp_ID　""で囲む。（持っていない場合は、「"なし"」を指定）');
[/php]

②　ツイッターの場合もアカウントを設定しないとボタンが有効活用できないので、アカウントがない時は、ボタンを表示しないようにする。
データベースへTwitterアカウントの挿入（mtb_constants） 下記「1416」は適宜

[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('ACCOUNT_KEY_TWITTER', '"なし"', 1416, 'Twitterアカウント　""で囲む。（持っていない場合は、「"なし"」を指定）');
[/php]

★つまり、パラメータ設定にApp_IDを設定しないと、OGPタグは有効にならない。Twitterアカウントを設定しないと、ボタンは表示されない。

③　パラメータ設定を開き、App_IDとTwitterアカウントを設定したら「この内容で登録する」ボタンをクリックする。

（5）OGPタグの入力

①　■data/Smarty/templates/default/site_frame.tpl
タグの箇所へ

[php]






























[/php]

②　■data/Smarty/templates/sphone/site_frame.tpl
タグの箇所へ

[php]






























[/php]

3　ブロックを新規作成する

（1）コールPHP　■html/frontparts/bloc/socialbtn.php

[php]
blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>
[/php]

（2）拡張クラス　■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_Ex.php

[php]

[/php]

（3）ページクラス　■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_.php

[php]
action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {

//データ取得
$objQuery =SC_Query_Ex::getSingletonInstance();
$this->arrRet = array();

//おすすめ商品を取得
$arrRet = $objQuery->select("*", "dtb_baseinfo");

//データベースからデータの取得ができたか
if(isset($arrRet)){
$this->arrRet = $arrRet[0];
}
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
[/php]

（4）テンプレート　PC用　■data/Smarty/templates/default/frontparts/bloc/socialbtn.tpl

● SSL接続（https://）で問題なく表示されるのは、「Twitter」、Facebookの「いいね!」と、Googleプラスなので、SSL接続のみ、他のボタンはコメントアウトして表示させないようにする。
● ツイッターボタンは、パラメータ設定でアカウントを入力しないと表示されない。

[php]