How to insert a Twitter button to your blog Facebook in Shopify

As a mean of driving more traffics to visit your blog, that insert a Twitter button to your blog is extremely a smart choice. Plenty of your Twitter followers will come to view your blogs about products and make some purchases. Hence, I’ve prepared a step-by-step guide for you to follow to do this. Below is the details.

Table of content

Step 1: Choose Themes{#choose-themes}

Take a look of the admin page after you’ve logged in. Make sure to find the Online Store section and tap on it. Then, the Themes page will appear.

Insert a Twitter button to your blog

Step 2: Tap on Edit code{#tap-edit-code}

Choose one of the themes and click Actions next to its name. Afterward, a drop-down list will come out and you just need to tap on Edit code.

Insert a Twitter button to your blog

Step 3: Select article.liquid and blog.liquid{#select-article.liquid-blog.liquid}

Press on the Templates directory. Find two files named article.liquid and blog.liquid. What you do now is open both of them by clicking.

Insert a Twitter button to your blog

Step 4: Paste the code{#paste-code}

Now, you do this step with both of files you’ve just opened. Find the following code:

{{ article.content }}

You can press on the Ctrl and the F on the keyboard. A textbox will appear for you to type what you are looking for. Just typing the word article. You can find it faster.

Above that element, make sure to paste the following code like this:

<script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
   <a href="https://twitter.com/share" class="twitter-share-button"
      data-url=""
      data-via="your_screen_name"
      data-text=""
      data-count="horizontal">Tweet</a>
</div>

Insert a Twitter button to your blog

Step 5: Rename without the @{#[email protected]}

In this step, instead of your_screen_name in the above code, enter your Twitter account alias. It must be without the @. For example, Mageplaza’s twitter account name is mageplaza.

Insert a Twitter button to your blog

Step 6: Save{#save}

In the final step, tap on Save to save all you’ve done.

Insert a Twitter button to your blog

To insert a Twitter button to your blog for iPhone/Android (Click here)

Step 1: Tap on Store
From the admin page, tap on Store to go to the next step.

Step 2: Choose Online Store
In this step, look for the Sales channels field. Then, make sure to choose Online Store there.

Step 3: Click Manage themes
To view all your themes, click Manage themes.

Step 4: Tap on Edit code
Choose one of the themes and click Actions next to its name. Afterward, a drop-down list will come out and you just need to tap on Edit code.

Step 5: Select article.liquid and blog.liquid
Press on the Templates directory. Find two files named article.liquid and blog.liquid. What you do now is open both of them by clicking.

Step 6: Paste the code
Now, you do this step with both of files you’ve just opened. Find the following code:

{{ article.content }}

You can press on the Ctrl and the F on the keyboard. A textbox will appear for you to type what you are looking for. Just typing the word article. You can find it faster.

Above that element, make sure to paste the following code like this:

<script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
   <a href="https://twitter.com/share" class="twitter-share-button"
      data-url=""
      data-via="your_screen_name"
      data-text=""
      data-count="horizontal">Tweet</a>
</div>

Step 7: Rename without the @
In this step, instead of your_screen_name in the above code, enter your Twitter account alias. It must be without the @. For example, Mageplaza’s twitter account name is mageplaza.

Step 8: Save
In the final step, tap on Save to save all you’ve done.

Summary

To sum up, this post takes you through how to insert a Twitter button to your blog. With the images, hope you find it easy to do. Hope after you’ve inserted a Twitter button to your blog, there are more and more visitors coming to view your blog. If you are concern about how to embed a Twitter feed in your online store, click on it to visit the instruction.