EC-CUBE2.13カスタマイズの説明:Facebook(OGPタグ設定)やTwitterなどのソーシャルブックマークの表示

・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/で、ECサイト専用のアプリを作成して取得する。

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

 データベースへApp_IDの設定を挿入(mtb_constants) 下記「3007」は適宜

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

 ツイッターの場合は、アカウントを設定しないとボタンが有効活用できない。(ボタンは表示される)
データベースへTwitterアカウントの挿入(mtb_constants) 下記「3008」は適宜

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

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

============================
2.13カスタマイズ(デフォルト)デモサイト
2.13カスタマイズ(デザインテンプレート適用)デモサイト
2.13レスポンシブWebデザイン(スタンダード)デモサイト
2.13レスポンシブWebデザイン(特集ページ作成版)デモサイト
▼詳細はこちらから
ダウンロードEC-CUBEカスタマイズ
============================

● SSL接続(https://)で問題なく表示されるのは、「Twitter」、Facebookの「いいね!」と、Googleプラスなので、SSL接続のみ、他のボタンはコメントアウトして表示させないようにする。