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ボタンを埋め込みます。

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

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

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

例：https://twitter.com/pafit_official

Twitter Publishでボタンを作成

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

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

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

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

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

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

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

先程コピーした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>

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