こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はよく見かけるSNSのコンテンツを表示する方法をご紹介いたします!
Facebook、Twitter、mixiなどSNSサイトをお持ちのショップ様もおおいかと思います。
ショップページにも積極的に表示をして販売促進につなげましょう!
こんなお悩みありませんか?
・よく見る Facebookのページはどうやって表示するの?
・Twitterのタイムラインを入れたい
・商品詳細ページ以外にも「いいね」「Tweet」ボタンを表示させたい
[難易度 ★☆☆ ]
ソースを貼り付けるだけ!SNSのタイムラインを表示!
※プレミアムショッププランのみ
Facebook 「Page Plugin」を設定
このサイトでも表示している↓このような表示です。
設置してみましょう!
その前に・・!「 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. のテキストエリア内のソースをコピーし、各管理画面へ貼り付けましょう!
【ショップデザイン(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ボタンを表示する機能は、こちらもご利用ください!
参考:オンラインマニュアル「SNSボタンの設定」
いかがでしたでしょうか。
商品詳細ページにSNSボタンを表示したい場合は、商品詳細ページにSNS(Facebook、Twitterなど)ボタンが表示されない時の対処方法をご参考ください。