Social media - Add Facebook Like buttons to your online store

Community Manager
Community Manager
311 10 288

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.


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 because they use 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. Enter your website or your product's URL and click Debug.

 

 

Changing the Like button image

 

If you add Facebook Like buttons to your pages and you don't like the image that Facebook has chosen to illustrate your content, you can change the Like button image. 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, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  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: 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. 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. If the page you are "liking" has been liked recently, 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 by using the Facebook debugger. Enter the URL of your web page there and click Debug.

 

Facebook and protocol-independent URLs

 

In all 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, page content, or collection descriptions.

 

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.

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes