GoDaddy

This tutorial shows how to install a responsive Instagram widget on the GoDaddy website builder. Due to some limitations of GoDaddy builder, installation is a bit more complicated than copy and pasting. This article will guide you on adequately installing the widget on your GoDaddy website.

Step-by-step instructions

This tutorial does not show how to create your website on GoDaddy builder. We assume you already have a working website to which you would like to add the Instagram widget. If you need some help with creating your first website using GoDaddy, we would recommend following the instructions in this guide – Create your websites in minutes.

Step 1 – log in to your GoDaddy account.

Screenshot showing login screen on GoDaddy website.

Log in to your GoDaddy account first. If you don’t have a GoDaddy account yet, please create one and build your website first.

Step 2 – edit your website.

Screenshot showing the Edit website button in GoDaddy dashboard.

Click the Edit website button next to the website to which you would like to add the Instagram feed.

Step 3 – add a new section.

Screenshot showing the Add section button in GoDaddy page builder.

In the Site navigation section, select the page to which you want to add the LightWidget feed. We will use the default Home page in this example.

Hover your mouse cursor over the page preview in the area where you want to display photos from your Instagram account. The Add Section button will appear. Click on this button to add a new section.

Step 4 – select HTML component.

Screenshot showing HTML component in GoDaddy section selector.

In the list of the section, expand the Files & Web section and select the HTML option. In the list of available components, click the Add button next to the Embed custom code on the page. It will add a new block where you can paste the modified widget embed code.

Step 5 – modify the widget embed code.

The widget embed code needs to be slightly modified to work fully with GoDaddy Website Builder. Copy the embed code of the Instagram widget you want to install on your GoDaddy website. Paste it to notepad or any other editor where you can modify the code.

You should have code similar to this:

<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="https://cdn.lightwidget.com/widgets/ebf2ff4a73ae5b10af65f494d4bebed1.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

First, remove the <script> tag and comment portion from the widget embed code. Leave only the <iframe> tag. After the modification, the code should look like this:

<iframe src="https://cdn.lightwidget.com/widgets/ebf2ff4a73ae5b10af65f494d4bebed1.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

Copy the following snippet:

<script>if("websites.godaddy.com"!==window.parent.location.host){const a=document.createElement("script");a.src="https://cdn.lightwidget.com/widgets/lightwidget.js",window.parent.document.body.appendChild(a)}const b=document.querySelector("iframe"),c=window.parent.document.querySelector('iframe[srcdoc*="lightwidget.com"]');c.after(b),c.remove();</script>

And paste it after the <iframe> tag. Your widget embed code should look like this:

<iframe src="https://cdn.lightwidget.com/widgets/ebf2ff4a73ae5b10af65f494d4bebed1.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe><script>if("websites.godaddy.com"!==window.parent.location.host){const a=document.createElement("script");a.src="https://cdn.lightwidget.com/widgets/lightwidget.js",window.parent.document.body.appendChild(a)}const b=document.querySelector("iframe"),c=window.parent.document.querySelector('iframe[srcdoc*="lightwidget.com"]');c.after(b),c.remove();</script>

Step 6 – paste the modified code to the GoDaddy component.

Screenshot showing the modified widget embed code pasted into the Custom Code in HTML component.

Copy the code you’ve created in Step 5 of this tutorial. Paste it into the Custom Code field of the HTML component. You can optionally add the title to your section or any other information you want.

Step 7 – publish your site.

You will probably note that the widget in the preview mode looks like it’s cut off. The same will happen if you will click the Preview button. Unfortunately, due to specific limitations of the GoDaddy Website Builder, it is impossible to display the widget at full height in preview mode.

However, once you click the Publish and View Site buttons, the widget will be displayed correctly, at its full height.

Screenshot showing example widget installed on GoDaddy website.

Comments (0)

You must be logged in to post comments.