Add Facebook Like buttons to your online store

Caution

This app is no longer supported. The best way to display your products on Facebook is to add a Shop tab to your business's Facebook page using the Facebook sales channel in Shopify. If you're already using the Facebook Store app, make sure that you upgrade to the Facebook sales channel.

Getting help

Before you customize your theme, make sure you understand what level of support to expect.

Supported customizations

We can help if you have trouble with supported customizations. You can chat, email, or call us any time.

Unsupported customizations

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether to attempt it on your own. There’s also a growing community on our forums - you’ll often find friendly and helpful advice there.

You could also consider hiring a Shopify Expert to do your customizations for you.

By connecting your store with Facebook, you can publish products and collections to your Facebook page.

Password-protected stores

Facebook buttons will not work on any shop that is password-protected. In fact many themes cannot even display any Facebook buttons or widgets while they are password-protected due to using ajax and javascript to pull these widgets into the page.

To avoid any Facebook caching issues, please avoid clicking on 'like' buttons until you have launched your shop. In the event that you have clicked on those buttons and you are seeing the password protected page in the like area you will need to run your site through the Facebook debugger to help Facebook clear its cache of your shop. The Facebook debugger can be found here: https://developers.facebook.com/tools/debug/. Simply put in your website or your product's URL and click "debug".

Changing the Like button image

You added "Facebook Like" buttons to your pages and you don't like the image that Facebook has chosen to illustrate your content. Facebook uses the Open Graph Protocol, click here to learn more or continue reading to get started. If you've done everything properly in Shopify, try debugging on Facebook.

To change the image Facebook displays, you will need to edit your theme.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Layouts folder, locate and click theme.liquid to open it in the online code editor.

  4. Between the opening <head> tag and closing </head> tag, add the following code:

    
    {% if template contains 'product' %}
      <meta property="og:image" content="http:{{ product.featured_image.src | product_img_url: 'grande' }}" />
      <meta property="og:image:secure_url" content="https:{{ product.featured_image.src | product_img_url: 'grande' }}" />
    {% elsif template contains 'article' %}
      {% assign img_tag = '<' | append: 'img' %}
      {% if article.content contains img_tag %}
        {% assign src = article.content | split: 'src="' %}
        {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
        {% if src %}
          <meta property="og:image" content="http:{{ src }}" />
          <meta property="og:image:secure_url" content="https:{{ src }}" />
        {% endif %}
      {% endif %}
    {% else %}
      {% if settings.use_logo %}
        <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}" />
        <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}" />
      {% endif %}
    {% endif %}
    
    
  5. Save your changes.

Note

It is likely that your theme already uses Facebook meta data code like the one above, but that it contains errors. You might need to fix your code, replacing it with the one provided above.

Note

Take note that some themes contain that Facebook code in a separate snippet, included in the theme.liquid file. If that's the case in your theme, you will need to update your code in a Liquid snippet, and not in theme.liquid. Snippets are found on the Edit HTML/CSS page, under Snippets on the left. The name of your snippet will be snippet-fb-open-graph-tags.liquid, fb-open-graph-tags.liquid, fb-open-graph.liquid, or a similar name.

The wrong image still appears

Facebook keeps cached content that has been liked before — it 'memorizes' it. So if the page you are 'liking' has been liked before — and recently so — you might still see the old image after you have made those edits to your theme. You can wait a couple of days or you can force Facebook to retrieve fresh content right away. How do you do that? You use this service: https://developers.facebook.com/tools/debug. Enter the URL of your web page there and click 'Debug'.

Facebook and protocol-independent URLs

In all its content generated by the Rich Text Editor, Shopify uses special URLs for images that are ‘protocol-independent’. Those URLs begin with //cdn.shopify.com instead of the usual http://cdn.shopify.com or https://cdn.shopify.com. Such URLs are well-understood by all browsers and have several advantages over protocol-specific URLs: they work just as well with a secure and a non-secure connection (HTTP versus HTTPS).

Facebook has a problem with recognizing protocol-independent URLs for images. Facebook does not yet recognize those URLs. Hence, Facebook does not ‘see’ any images that are in your blog articles, pages' content and collections' description.

The snippet of code provided above achieves the following: if a product page is shared on Facebook, it tells Facebook to use the product image to illustrate the posting. If it's a blog post that is shared, it tells Facebook to use the first image in that blog post if it contains any images. If any other page is shared, it tells Facebook to use your logo as image.

Want to discuss this page?

Visit the Shopify Community