intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Adding a Facebook Like button to your products and content

This article will show you how to add Facebook Like buttons to your Shopify website.

You don't need to have a Facebook account to partake in this, although it will be easier to test your buttons if you do.

Step 1: Get your button code

Go to the Like Button developer page and customize the look of your button.

EDITS for recent Facebook changes - uncheck the send option:

#
  • Type any valid URL in the 'URL to Like' text field.

  • Later, we will replace that with dynamic and smart Liquid code.

#

After you have clicked on the Get Code button, you'll be presented with 2 snippets of code. Copy the 'iframe' code to your clipboard. Leave the 'HTML5' & 'XFBML' code alone, we won't use either.

#

Step 2: Create a snippet

  • Navigate to your Themes area of the admin.

  • Hover over the button and click Edit HTML/CSS.

#
  • Click to open the snippet's folder.

  • Click add a new snippet

#
  • Name the snippet like and click on the create snippet button.

    Reminder

    This snippet is used in several areas of your website. To avoid problems, ensure that you name the snippet like and nothing else.

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

Step 3: Paste your button code in your Liquid snippet

  • Place your cursor in the big text box and paste your Facebook button code inside.

  • Then, select 'http://www.shopify.com' in your code to highlight it:

#

Then type in this, or paste this in lieu of your selection:

{{ shop.url }}{{ like.url }}

With this as a result:

#

In other words, you want to replace http://www.shopify.com with the above Liquid code.

If you intend on adding other social buttons next to your Facebook Like button, make sure the iframe has proportions that won't push those other buttons away. In the style attribute, use this:

width:200px; height:30px

When you're done with this tutorial, you can add a Tweet button to your like snippet by going to this other tutorial: Adding a Tweet Button to your Content.

When done, save your Liquid snippet.

Step 4: Add your button to your product pages

On the Edit HTML/CSS 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 'like' with product %}

It will look something like this depending what theme you're using:

#

Link: http://kirlin-berge7409.myshopify.com/products/comfort-plus

Step 5: 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 'like' with collection %}
  1. 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 'like' with article %}
  1. Want a global Like button for your shop? Drop this code in theme.liquid:
{% include 'like'  %}

Step 6: Adding some metadata to help Facebook

You may want to give Facebook more information about your content than just the URL that points to it. For example, you may want to tell Facebook where to find an image that will best illustrate the content, and you may also want to specify your shop name.

For this, go to Edit HTML/CSS page and click on 'theme' under Layouts, to open the file theme.liquid in the online code editor.

In the head of your document, between <head> and </head>, copy the following code:

<meta property="og:site_name" content="{{ shop.name }}" />
{% if template contains 'product' %}
<meta property="og:image" content="{{ product.featured_image | product_img_url: 'large'  | prepend: 'http:' }}" />
{% elsif template contains 'article' %}
{% if article.content contains '&#60;img' %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' %}
{% if src %}<meta property="og:image" content="{{ src }}" />{% endif %}
{% endif %}
{% else %}
<meta property="og:image" content="{{ 'logo.png' | asset_url | prepend: 'http:' }}" />
{% endif %}

Step 7: Demo store

Visit the Social Buttons Sandbox for a demonstration

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.