Categories
PrestaShop Web Stuffs

How to embed Instagram feed to your website

This free tool is what I used to quickly embed an Instagram feed to a website: https://www.pixlee.com/social-feed

Project: To add an Instagram feed on https://mooniebridal.com.au to showcase the make-up portfolio.

As I just wanted a quick way to embed the feed, I went for a free pre-built tool with the basic ability to show the feed in tile view on the web page.

Step 1: Sign up for an account with Pixlee

Step 2: Authenticate and authorise Pixlee to access the Instagram feed

Step 3: Copy and paste the generated script on the website

<div id="pixlee_container"></div>
<script type="text/javascript">
window.PixleeAsyncInit = function()    {Pixlee.init({apiKey:'X2gN99kYVn40F3Jv__mi'});
Pixlee.addSimpleWidget({widgetId:'29866'});};
</script>
<script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>

That should be it but because Moonie Bridal is built on Prestashop, the following was done:

In Step 3, instead of having the whole block pasted in the CMS page, I split it to just have <div id=”pixlee_container”></div> in the position of the page I want the feed to go.

Step 4: Insert the JS block to the template file so it gets appended at the end of the page.

~/themes/<your_theme>/templates/cms/page.tpl

{block name='javascript_bottom' append}
  {if $cms.id==8}
  {literal}
  <script type="text/javascript">
    window.PixleeAsyncInit = function() {
        Pixlee.init({apiKey:'X2gN99kYVn40F3Jv__mi'});
        Pixlee.addSimpleWidget({widgetId:'29866'});
    };
  </script>
  <script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>
  {/literal}
  {/if}
{/block}

The result can be found here:

It seems to only display the first 30 posts or so but that’s good enough for me