TwitterなどのSNSリンクをShopifyに埋め込む方法

この記事ではTwitterのSNSアイコンをShopifyストアのページに埋め込む方法をご紹介します。

SNSリンクをストアに埋め込む際の流れ

SNSリンクをストアに埋め込むには、「手動でテーマをカスタマイズする」もしくは「Shopifyアプリを利用する」方法があります。
この記事では手動でカスタマイズする方法をご紹介します。

弊社が提供しているPafit Social Media Iconsを利用することで、簡単にSNSアイコンをフローティングボタンとして設置することもできます。
手っ取り早くSNSアイコンを設置したい方や、画面内に常にSNSアイコンを表示したい方はぜひアプリの利用をご検討ください。

Pafit Social Media Icons| Shopify アプリストア
LINE公式アカウントのチャットでお問い合わせ対応 & InstagramやTwitterのSNSリンクをストアに設置!

Twitterのフォローボタンを埋め込み

以下のような手順で、Twitterボタンを埋め込みます。

  1. Twitterのプロフィールリンクをコピー
  2. 「Twitter Publish」というサイトにリンクをペーストし、フォローボタンを作成
  3. Shopifyの管理画面を編集

Twitterのプロフィールリンクをコピー

Twitterを開き、ご自身のプロフィールのURL全体をまずはコピーします。

例:https://twitter.com/pafit_official

Twitter_pfofile

Twitter Publishでボタンを作成

Twitter Publishにアクセスし、コピーしたURLをペーストします。
また、矢印ボタンをクリックします。

Twitter_Publish1

次に、Twitter Buttonsを選択します。

Twitter_Publish2

今回はTwitterのフォローボタンを作るために、Follow Buttonを選択します。

Twitter_Publish3

フォローボタンのコードが作成されるため、「Copy Code」をクリックし、コードをコピーします。
これでTwitterのフォローボタンの用意は完了しました。

Twitter_Publish4

Shopifyの管理画面からフォローボタンを追加

Shopifyの管理画面から、テーマのカスタマイズを開きます。

LINE_Friend_Add_3

また、フォローボタンのコードを追加するために「カスタマイズされたLiquid」を任意の場所に追加します。

LINE_Friend_Add_4

先程コピーしたTwitterのフォローボタンのコードをペーストします。
また、フォローボタンを中央表示するためにコードを以下の要素で囲います。

<div style="text-align: center">
    先程コピーしたコード
</div>

以下は完成形のコードの例になります。

<div style="text-align: center">
  <a href="https://twitter.com/ツイッターID?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @pafit_official</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

そして、「保存する」をクリックします。

customize_liquid_twitter_button

以下のようにTwitterのフォローボタンが表示されることを確認します。

twitte_follow_button_shopify

Shopifyアプリを利用する方法

弊社が提供するShopifyアプリPafit Social Media Iconsを利用したSNSアイコン追加方法は以下をご参照下さい。

Pafit Social Media Iconsについて

Pafit株式会社ではShopifyストアにLINE公式アカウントなどのチャットサービス、SNSへのリンクを設置するためのアプリを提供しています。
フリートライアルを提供していますので、ぜひお試し下さい。

Pafit Social Media Iconsのメリット

  1. SNSのチャットでカスタマーサポートを実現
  2. ストア訪問者様が使い慣れたSNSでお問い合わせ可能
  3. SNSアイコンとリンクをノーコードで設置可能
Pafit Social Media Icons| Shopify アプリストア
LINE公式アカウントのチャットでお問い合わせ対応 & InstagramやTwitterのSNSリンクをストアに設置!
Twitter
シェアする
村馬賢介

Pafit株式会社の代表取締役。
GoogleアナリティクスやBigQueryを利用したデータ分析の経験をもとにShopifyアプリPafit Tag Managementを開発中です。

村馬賢介をフォローする
Pafit株式会社(パフィット)
タイトルとURLをコピーしました