Zen Cartハイエンド版のモジュール：social_buttonsによりコンテンツを共有する : アークウェブのブログ

ホーム » ビジネスブログ » Zen Cart(オンラインショップ構築) »

Zen Cartハイエンド版のモジュール：social_buttonsによりコンテンツを共有する

2013年12月11日

Zen Cartハイエンド版のモジュール：social_buttonsによりコンテンツを共有する

投稿者竹村

Twitterの「ツイート」ボタンやFacebookの「いいね！」ボタン、スマートフォン対応では「LINEで送る」ボタンなど、コンテンツを気軽に共有・拡散できるソーシャルメディア連携ボタンは、今やマーケティングの上で必要不可欠な存在です。

Zen Cartハイエンド版では、このソーシャルボタンを商品詳細に付けることができます。

利用できるボタンの種類は以下の通り。管理画面から利用する・しないを指定できます。

Twitter:
Facebook:
GooglePlus:
LINE:
mixi:
GREE:

次に、ブロックの管理から「social_buttons#block」を「main_bottom」の一番上に配置。これでメインコンテンツの後に表示できます。ただ、これだと全画面にボタンが出てしまうので「編集」から「ページ毎の表示/非表示」を「以下のページのみ表示」にして「商品詳細 (通常) (product_info)」だけチェックを入れます。

これで、商品詳細のみボタンを出す準備ができました。確認してみましょう！

▲すべてのボタンをONにした場合のサンプル
(※図版はクリックで拡大します)

facebook_ogpモジュールでOGP対応

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」の設定は、管理画面から行うことができます。

投稿者竹村 : 2013年12月11日 10:35

カテゴリー: Zen Cart(オンラインショップ構築)

タグ： addon_modules , オンラインショップ , ECサイト , Zen Cart , ZHE