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

 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』を選択しましょう。

Shopify Embed Twitter タイムライン

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

 

Shopify Twitter Embed 方法

 

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

 

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

 

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

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

Shopify Twitter 埋め込み 設定 高さ 幅

すると、

  • Height 
  • Width
  • Color
  • Language

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

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

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

Twitter Language Japanese

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

 

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

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

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

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

 

 

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

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

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

{% include 'twitter-feed' %}

 

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

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

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

 

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

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

これで

Twitter → Shopifyストア

という流れだけでなく、

Shopifyストア → Twitter

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

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

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

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