こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回はよく見かけるSNSのコンテンツを表示する方法をご紹介いたします!
Facebook、Twitter、mixiなどSNSサイトをお持ちのショップ様もおおいかと思います。
ショップページにも積極的に表示をして販売促進につなげましょう!

こんなお悩みありませんか?

・よく見る Facebookのページはどうやって表示するの?
・Twitterのタイムラインを入れたい
・商品詳細ページ以外にも「いいね」「Tweet」ボタンを表示させたい

[難易度 ★☆☆ ]
ソースを貼り付けるだけ!SNSのタイムラインを表示!
※プレミアムショッププランのみ

Facebook 「Page Plugin」を設定

このサイトでも表示している↓このような表示です。
設置してみましょう!

Facebook PagePlugin

その前に・・!「 Facebookページ 」は、お持ちですか?

こんな感じのFacebookページは、個人のアカウントとは違って
企業の紹介お店のキャンペーンページを作りたい人向けのページです。
まだ持ってない場合は、作成して情報を発信しファンを増やしてみましょう!

(1)ソースを取得!

外部サイト↓にアクセス!
https://developers.facebook.com/docs/plugins/page-plugin 
設置したい内容を設定!

・Facebook Page URL:表示したいFacebookページのアドレスを入力
・Width:幅180~500 の間を入力
・Height:高さは指定なしでOK(または70以上を入力)

他の英語で記載のあるチェック項目も全てプレビュー表示で確認できます。
お好みの表示項目にチェックをつけましょう!

(2)ソースをコピー&ペースト!

(1)の設定後に左下にある「Get Code」をクリックして「Your Plugin Code」を表示
  1. と 2. のテキストエリア内のソースをコピーし、各管理画面へ貼り付けましょう!

・1.のソースは、
【独自デザイン(PC)】>【トップページ編集】>【共通headタグ管理】「全ページ共通」に入力

・2.のソースは、
【左側メニュー管理】【中央画面管理】内のエディターエリアに入力

(3)設置完了!

→できあがり!
かんたんですね。

Facebook「いいね!」ボタンを表示したい場合

外部サイト:https://developers.facebook.com/docs/plugins/like-button

Twitter「埋め込みタイムライン」を表示したい場合

外部サイト:https://support.twitter.com/articles/20171533?lang=ja#

Twitter 「Tweetボタン」を表示したい場合

外部サイト:https://twitter.com/about/resources/buttons#tweet

mixi「mixiチェック」を表示したい場合

外部サイト:https://twitter.com/about/resources/buttons#tweet

MakeShopでは、SNSボタンを表示する機能や、Shoptweet機能もあります。
こちらもご利用ください!

参考:オンラインマニュアル
SNSボタンの設定」「Shoptweet基本設定

いかがでしたでしょうか。
商品詳細ページにSNSボタンを表示したい場合は、商品詳細ページにSNS(Facebook、Twitterなど)ボタンが表示されない時の対処方法をご参考ください。