Embed comment from Facebook into your site

In a previous article, I’ve guidance you create and get app ID from Facebook. Now I will help you embed comment function Facebook into your site.

Actually, In Shopify Apps Store have many app free help user add comment function into your site. But If you don’t like them you can add comment from Facebook.

Here we go.

Step 1: Include the JavaScript SDK

  • Go to the Edit HTML/CSS page.
  • Under the Layout folder, locate and click the theme.liquid file to open it in the online code editor.
  • Look for the <body> tag and add the following code under it:

Step 2: Add to your Customize theme page

  • On the Edit HTML/CSS page, locate and click Config.
  • Under the Config folder, locate and click the settings_schema.json file. This will open the file in the online text editor.

fb-comments-3

  • Scroll down to the very bottom of your settings_schema.json file and add this code before the last square bracket ] and after the last curly bracket } – make sure to include that first comma , since you’re modifying a JSON data structure:

  • Click Save.

Step 3: Place the code for your plugin

  • On the Edit HTML/CSS page, locate and click Templates.
  • Under the Templates folder, locate and click the product.liquid file. This will open the file in the online text editor.
  • Place the code for your plugin wherever you want the plugin to appear on your page.

Depending on the theme you are using maybe you need open product.liquid (in Templates folder) or anything file in Snippets folder place for place this code

  • Click Save.

Step 4: Configure your plugin

You can now configure your plugin using your Customize theme page:

  • Go to the Customize theme page.
  • Configure your plugin in the Facebook Comments section:

fb-comments-2

This article just stop at basic level. If you want your plugin become professional, you need read more document about API of Facebook in here: https://developers.facebook.com/docs/plugins/comments.

Good luck for you.

Huynh Mai Anh Kiet

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *