ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBE2.13カスタマイズの説明:Facebook(OGPタグ設定)やTwitterなどのソーシャルブックマークの表示 2013年10月30日カテゴリー: EC-CUBEデザインテンプレート 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」は適宜 [php] INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘FACEBOOK_APPID’, ‘”なし”‘, 3007, ‘FacebookのApp_ID ””で囲む。(持っていない場合は、「”なし”」を指定)’); [/php] ② ツイッターの場合は、アカウントを設定しないとボタンが有効活用できない。(ボタンは表示される) データベースへTwitterアカウントの挿入(mtb_constants) 下記「3008」は適宜 [php] INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘ACCOUNT_KEY_TWITTER’, ‘”なし”‘, 3008, ‘Twitterアカウント ””で囲む。(持っていない場合は、「”なし”」を指定)’); [/php] ★つまり、パラメータ設定にApp_IDを設定しないと、OGPタグは有効にならない。Twitterアカウントを設定しないと、有効活用はできない。(Twitterボタンは表示される) ============================ 2.13カスタマイズ(デフォルト)デモサイト 2.13カスタマイズ(デザインテンプレート適用)デモサイト 2.13レスポンシブWebデザイン(スタンダード)デモサイト 2.13レスポンシブWebデザイン(特集ページ作成版)デモサイト ▼詳細はこちらから ダウンロードEC-CUBEカスタマイズ ============================ ● SSL接続(https://)で問題なく表示されるのは、「Twitter」、Facebookの「いいね!」と、Googleプラスなので、SSL接続のみ、他のボタンはコメントアウトして表示させないようにする。
・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」は適宜
[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘FACEBOOK_APPID’, ‘”なし”‘, 3007, ‘FacebookのApp_ID ””で囲む。(持っていない場合は、「”なし”」を指定)’);
[/php]
② ツイッターの場合は、アカウントを設定しないとボタンが有効活用できない。(ボタンは表示される)
データベースへTwitterアカウントの挿入(mtb_constants) 下記「3008」は適宜
[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘ACCOUNT_KEY_TWITTER’, ‘”なし”‘, 3008, ‘Twitterアカウント ””で囲む。(持っていない場合は、「”なし”」を指定)’);
[/php]
★つまり、パラメータ設定にApp_IDを設定しないと、OGPタグは有効にならない。Twitterアカウントを設定しないと、有効活用はできない。(Twitterボタンは表示される)
============================
2.13カスタマイズ(デフォルト)デモサイト
2.13カスタマイズ(デザインテンプレート適用)デモサイト
2.13レスポンシブWebデザイン(スタンダード)デモサイト
2.13レスポンシブWebデザイン(特集ページ作成版)デモサイト
▼詳細はこちらから
ダウンロードEC-CUBEカスタマイズ
============================
● SSL接続(https://)で問題なく表示されるのは、「Twitter」、Facebookの「いいね!」と、Googleプラスなので、SSL接続のみ、他のボタンはコメントアウトして表示させないようにする。