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.

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, and then click Actions > Edit code.

  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.

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.

Ready to start selling with Shopify?

Try it free