Add Facebook Like buttons to your online store

You can customize your theme to add Facebook Like buttons to pages.

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. By connecting your store with Facebook, you can publish products and collections to your Facebook page.

Getting help

Before customizing your theme, make sure that you understand what level of support is available.

Supported customizations

If you use a free theme from Shopify, we can help if you have trouble with supported customizations. Supported customizations include all tutorials in the Shopify Help Center that do not have the warning message shown in the Unsupported customizations section below. You can chat, email, or call us any time.

Unsupported customizations

Unsupported customizations are outside the scope of our support service. This means that we’re not able to help you if you run into problems. All unsupported customizations include the following warning message:

If you are having trouble with an unsupported customization, then consider hiring a Shopify Expert. There’s also a growing community on our forums. You’ll often find friendly and helpful advice there.

If you do not use a free theme from Shopify, then customizations for your theme are not supported by Shopify. To find out what kind of support is available for your theme, go to your Themes page, and click Customize theme. Next, click the ... button beside your theme name in the top-left corner of the theme editor. Select Support:

Theme support

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 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. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

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

  3. 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 %}
    
    
  4. 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. 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, then it tells Facebook to use the product image to illustrate the posting. If it's a blog post that is shared, then it tells Facebook to use the first image in that blog post if it contains any images. If any other page is shared, then it tells Facebook to use your logo as image.

Want to discuss this page?

Visit the Shopify Community