From Shopify Wiki

This article will show you how to add Tweet buttons to your Shopify content.

Step 1: Create a social.liquid snippet

Go to Theme in your shop Admin, and click on the Template Editor link:

Begin by creating a backup of your theme by downloading it. Do not skip that step.

Once you've created a back-up, and still on the Template Editor page, scroll down and look under Snippets. We will add a new snippet called 'social'.

Click on the 'Add a new snippet' link:

Name the snippet social and click on the 'Create snippet' button:

Click on your snippet name to open it in the online code editor.

Step 2: Paste your button code in your Liquid snippet

Paste the following code in your social.liquid snippet:

<span class="twitter">
  <a href="http://twitter.com/share"{% if template == 'product' or template == 'article' or template == 'blog' %} data-url="{{ shop.url }}{{ social.url }}"{% endif %} data-text="{% if template == 'product' %}{{ product.title | escape }} by {{ product.vendor | escape }}{% elsif template == 'blog' %}{{ social.title | escape }}{% else %}{{ page_title | escape }}{% endif %}" class="twitter-share-button" data-count="horizontal" data-via="TWITTERNAME">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>

Replace TWITTERNAME with your Twitter name.

When done, save your Liquid snippet.

We can use the following HTML attributes in the <a></a> element to gain granular control over the tweet generated:

In the code provided above, we used all 3 attributes:

1. We used data-url to provide a link to the product page that is not within the scope of a collection. So, in other words, the URL that will show up in the Tweet message will never be:

 shopname.myshopify.com/collections/snickers/products/my-awesome-shoes 

It will rather be:

 shopname.myshopify.com/products/my-awesome-shoes

If not on a product page, we let Twitter use the URL of the page the button is on.

2. We used data-via to provide our Twitter name.

3. We used data-text to provide the tweet text. If on a product page, we use Product Title by Product Vendor, otherwise we rely on the global Liquid variable page_title. If you don't use data-text at all, Twitter will use the title of the page, in your case that will likely be Shop Name — Product Title on product pages. Use your creativity and marketing sense here. You can even include 'On Sale now at x Price You Save Y%' on product pages if a product has a compare at price using that code:

data-text="{% if template == 'product' %}{{ product.title | escape }} by {{ product.vendor | escape }}{% if product.compare_at_price_min > product.price %} On Sale Now at {{ product.price | money }} You save {{ product.compare_at_price_min | minus: product.price | times: 100 | divided_by: product.compare_at_price_min }}%{% endif %}{% elsif template == 'blog' %}{{ social.title | escape }}{% else %}{{ page_title | escape }}{% endif %}"

Note: Part of the HTML5 spec is that you can now add any arbitrary tag to an HTML element, as long as it starts with “data-”.

Step 3: Add your button to your product pages

On the Template Editor page, click on 'product' under Templates. That will open the file product.liquid in the online code editor.

Paste the following code where you want to position your button. This could be after your product description, or in vicinity of your Add to cart button. It's up to you.

{% include 'social' with product %}

With this as a result if you're using the beautiful Structure theme:

Step 4: Add your button to other content

1. If you want to add the button to your collection pages, open the template file collection.liquid in the online code editor and type in this code where you want your button to appear (that may be right after your collection description):

{% include 'social' with collection %}

2. If you want to add the button to your blog posts, open the template file article.liquid in the online code editor and type in this code where you want your button to appear:

{% include 'social' with article %}

Combine your Like and Tweet buttons

Shopify recommends that you add both Facebook Like and Tweet buttons to your Shopify content. Your business doesn't need to have a Facebook page for you to take advantage of a Facebook Like button.

So, if you want to use both as you should, wrap your existing code in a span element:

<span class="twitter">
  CODE FOR YOUR TWEET BUTTON HERE
</span>

Below, add this:

<span class="facebook">
  <iframe src="http://www.facebook.com/plugins/like.php?href={{ shop.url }}{{ social.url }}&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:30px" allowTransparency="true"></iframe>
</span>

Finally, wrap all your snippet code in a div element and give that div element a style attribute:

<div style="clear:both;overflow:hidden;margin-top:10px;">
<style type="text/css">
.facebook { float: left }
.twitter { float: left }
</style>
  BOTH SPAN ELEMENTS HERE
</div>

Then save.

You will get something like this:

Demo store

Visit the Social Buttons Sandbox for a demonstration.