Twitterの「ツイート」ボタンやFacebookの「いいね！」ボタン、スマートフォン対応では「LINEで送る」ボタンなど、コンテンツを気軽に共有・拡散できるソーシャルメディア連携ボタンは、今やマーケティングの上で必要不可欠な存在です。
Zen Cartハイエンド版では、このソーシャルボタンを商品詳細に付けることができます。
利用できるボタンの種類は以下の通り。管理画面から利用する・しないを指定できます。
次に、ブロックの管理から「social_buttons#block」を「main_bottom」の一番上に配置。これでメインコンテンツの後に表示できます。ただ、これだと全画面にボタンが出てしまうので「編集」から「ページ毎の表示/非表示」を「以下のページのみ表示」にして「商品詳細 (通常) (product_info)」だけチェックを入れます。
これで、商品詳細のみボタンを出す準備ができました。確認してみましょう！
▲すべてのボタンをONにした場合のサンプル
(※図版はクリックで拡大します)
Zen Cartハイエンド版に同梱されている「facebook_ogpモジュール」を利用することで、HTMLヘッダーに自動的にメタ情報を追加することができます。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> (中略) <meta property="og:title" content="三毛猫"> <meta property="og:type" content="article"> <meta property="og:url" content="http://domain.example.jp/index.php?main_page=product_info&products_id=6&categories_id=1"> <meta property="og:image" content="https://domain.example.jp/images/sample_t/t-shirt_06.gif"> <meta property="og:site_name" content="ハイエンド1.5ショップ"> <meta property="fb:admins" content=""> <meta property="og:description" content="三毛猫の写真をあしらったキュートなTシャツ。猫好きに大人気！ベースはUSA製、COTTON 100％、6.1オンス、ヘビーウェイトTシャツ。 豊富なカラーバリエーションで人気 No.1のTシャツです。良質な綿花で知られるメンフィスコットンを主に使用し、 水分吸収が良くソフトで肌触りが良いのが特徴です。">
htmlタグに「xmlns:og, xmlns:fb属性」が追加され、metaタグとしてOGPに必要な内容が 商品情報から自動的に取得して設定 されます。
また「fb:admins」の設定は、管理画面から行うことができます。