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

[Shopify] Embed Twitter feed to store without app

Shopify Twitter embed how

Promoting your products or store on Twitter, or publish some news in social media.

It seems like a lot of Shopify store owners utilize Twitter to get more customers. And it is a very good place to communicate with customers directly through social media, and not only one way communication in ad campaigns.

And I'm not the exception. I also use Twitter and would love to know my twitter account even though they come from search engines.

So this time, we are going to embed Twitter feed (to show the latest tweets of your account) in the store without using apps.

Get feed code to embed from Twitter

Firstable, we need to go to Twitter developer page and paste the URL of your account.

https://publish.twitter.com/

In my case, my user name is @ec_penguin_

https://twitter.com/ec_penguin_

So I will copy paste the above URL.

Then you will be asked to choose how you want to embed it, so choose 『Embedded Timeline』 .

Shopify Embed Twitter timeline

Now we have succeeded to make code to embed!

Shopify Twitter Embed how to

So copy the "Copy Code" part, and paste it to wherever you want to embed in your Shopify store.

Edit height and width of Twitter feed

I personally thought that it might be too much tweets to show. and also thought that the width is a bit too wide, so we will edit it.

In previous image, specifically in the center, there is a option called 『set customization option』, so lets just click that.

Shopify Twitter embed settings height width

Then you can choose,

  • Height
  • Width
  • Color
  • Language

so edit as you like.

In my case, when I embedded to the store, width was auto adjusted, so I've just customized height.

I think the English is the first choice as a language.

Twitter Language Japanese

I've chosen Japanese, but it wasn't really cool, so even though this is Japanese website, I've chosen English.

Hide header and footer

After embedding the twitter feed, I though it looks better to hide header and footer, so if you also want to hide that.... add class like below after class="twitter-timeline"

  • No header
    data-chrome=”noheader”
  • No footer
    data-chrome=”nofooter”

Then you can just delete it.

Specific way to embed Twitter feed in Shopify store

Specific way to embed in Shopify, personally I need to embed in various place of the store so I've made snioppet called "twitter-feed.liquid".

And to where you want to embed, state the code below.

{% include 'twitter-feed' %}

I think this is the minimum code to embed Twitter feed.

If you don't really know how to make new Snippets, then refer to below article. (It's the way to make new section, but making new snippets is exactly the same.)

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

Embed Twitter feed to Shopify store SUMMARY

That's all to embed Twitter feed to Shopify without using app.

By embedding this Twitter feed, we can make the flow not only like

Twitter → Shopify store

but also

Shopify store → Twitter

which is quite important to make both ways.

Recently, we cannot separate social medias and managing online store. Therefore, we need to utilize both social media and online store effectively to maximize customer flow and communication.

Thank you for reading this article!

Have a nice day!

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら