[Shopify] Twitterの投稿フォードをストアに埋め込む

TwitterでShopifyサイトの宣伝をしていたり、新商品の告知をしたり。

Shopifyストアをお持ちのほとんどの方は、Twitterも並行して運用している印象があります。やはり広告だけでなく、SNSを通じて、消費者と密に繋がれる場は大切ですよね。

私ももれなくTwitterをしており、検索エンジンからストアにきた人にも私のTwitterを知って欲しいなあと感じ、今回の記事を書くことにしました。

具体的には、サイトにTwitterのフィード（複数の最新ツイートを掲載）を載せることが目標です。

Twitterで埋め込み用のフィードコードを取得する

まず下記のTwitter公開用URLにて、自分の埋め込みたいTwitter URLをコピペします。

https://publish.twitter.com/

私の場合は、@ec_penguin_ というユーザー名なので、

https://twitter.com/ec_penguin_

上記のURLをペーストします。

すると、埋め込む際の表示方法を問われるので、フィード（タイムライン）を埋め込みたい方は『Embedded Timeline』を選択しましょう。

これで一応コード作成がされました！

このCopy Code部分をコピーし、Shopifyストア内の埋め込みたい場所のコードにペーストします。

Twitterタイムラインの幅、高さを調整する

ただ個人的に表示されているツイート数が多いなぁと感じたのと、幅も広く感じたので、カスタマイズしていきます。

先ほどの画像の真ん中（copy codeの後）に『set customization option』というものがありますので、クリックしてみます。

すると、

• Height 
• Width
• Color
• Language

がそれぞれ指定できますので、お好みで調整してみてください。

私の場合、埋め込んでみたところ、埋め込み先親要素のdivで調整できましたので、高さのみ調整しました。

また個人的にはここで言語を日本語にしてしまうと、

と大々的に『ツイート』と表示されてしまい、ダサさが拭いきれませんでしたので、英語に設定してあります。

ヘッダーやフッターを消す方法

埋め込んだツイッターのヘッダーやフッター部分も消してしまいたい！という方は、埋め込みコードのclass="twitter-timeline"の後に下記コードを追加すると

• ヘッダーなし
  data-chrome=”noheader”
• フッターなし
  data-chrome=”nofooter”
  

で消してしまうことができます。

Shopifyに具体的に埋め込んだ方法

具体的にShopifyに埋め込んだ方法ですが、複数の場所に埋め込むことを前提にしているので、"twitter-feed.liquid"という新規snippetsを作成しました。

そして、埋め込みたい複数の場所に

を設置し、最小限のコードで埋め込むことができています。

Snippetsの新規作成方法がわからない、、という方はセクションと同じ要領でスニペット作成できますので、こちらをご参照ください。

https://ec-penguin.com/blogs/shopify/introduction-to-sections

Twitterの投稿フォードをShopifyストアに埋め込む　まとめ

以上、ツイッターをShopifyストアに埋め込む方法でした。

これで

Twitter → Shopifyストア

という流れだけでなく、

Shopifyストア → Twitter

という流れも構築できることができました。

昨今では、SNSとECサイト運営は切っても切り離せない関係になっているので、どちらも上手に活用して売り上げ、そして、共感してくれるお客様を増やせていければ良いですね。

最後までお読みいただきありがとうございました。

それでは本日も良い1日を！