@ I Blog
Travel, Food & Me.

Opencart 1.5.x Embed Instagram Feed Link

Opencart 1.5.x Embed Instagram Feed Link. You can add Instagram single feed link into your Opencart product description text with a little tweak to your codes. If you do not tweak the code to include the <script> section from Instagram embed code, the feed will not be shown. Problem with Opencart text box is, it filters or NULL any <script> in the text box. In order to have the feed shown, the best place to tweak, well, actually add a line of code in to the template -> common folder “footer.tpl” file.

Anyway, here is the step by step how to add Instagram single feed into the product description. Note: tested in Opencart 1.5.x.

  1. Goto the instagram link (example: https://www.instagram.com/p/BYdRmMHBwKh/?taken-by=dropbymall).
  2. Click on the right bottom corner of the image (as shown below in “RED” rectangular box).
  3. Copy the “EMBED” codes which is something like this: “<blockquote class=”instagram-media” data-instgrm-captioned data-instgrm-permalink=”https://www.instagram.com/p/BYdRmMHBwKh/” data-instgrm-version=”8″ style=” background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”><div style=”padding:8px;”> <div style=” background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;”> <div style=” background:url(data:image/png;base64,xxxx); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;”></div></div> <p style=” margin:8px 0 0 0; padding:0 4px;”> <a href=”https://www.instagram.com/p/BYdRmMHBwKh/” style=” color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;” target=”_blank”>Terminus Bags on sale. #terminusmalaysia Login Now www.DropByMall.com for best deals.</a></p> <p style=” color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;”>A post shared by <a href=”https://www.instagram.com/dropbymall/” style=” color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;” target=”_blank”> DropByMall</a> (@dropbymall) on <time style=” font-family:Arial,sans-serif; font-size:14px; line-height:17px;” datetime=”2017-08-31T12:01:27+00:00″>Aug 31, 2017 at 5:01am PDT</time></p></div></blockquote> <script async defer src=”//platform.instagram.com/en_US/embeds.js”></script>”
  4. This is ONE time code addition -> Goto Opencart -> Catalog -> View -> Default or Custom -> Template -. Common -> Footer.tpl.
  5. Open Footer.tpl and scroll to the bottom then add <script async defer src=”//platform.instagram.com/en_US/embeds.js”></script> before the </body></html> tag.
  6. Save the file and upload into your server.
  7. Now copy the ‘EMBED’ code into your product description text box as SOURCE like so:
  8. Then Save!
  9. Instagram feed should show in your product page.

Simple hack to show Instagram feed in your Opencart product page.