What is widget embed code?
Widget embed code is a piece of HTML code generated when you create a widget on our website. You must copy that code to your website or blog to display our widget. Here is what our example widget embed code looks like:
<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
It contains three parts – comment tag, script tag, and iframe
Comment tag
<!-- LightWidget WIDGET -->
The initial segment of our widget embed code is the comment tag. This information proves useful for web developers, especially during debugging processes. It’s important to note that the comment tag is not mandatory, and you can exclude it if desired.
Script tag
<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
Including the script tag is crucial for two reasons:
- To ensure the proper responsiveness of our widgets.
- To load the lightbox on your website.
If you omit this tag, our widget will not display the entire content. You can fix that by manually setting the widget’s height in your styles. Another consequence of omitting this tag is that if you have set the click action to “Open lightbox,” the lightbox will not load properly.
A commonly asked question is whether it’s possible to copy the content of this script to one’s website instead of loading it from our CDN. The answer is yes. However, it’s important to note that we occasionally update this script to introduce new or improved functionalities. If you choose to store it locally on your website, please remember to update it periodically.
Iframe tag
<iframe src="//lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
The iframe tag will load our widget. It is the essential tag. You will need it to see the pictures on your website. Below you will find the list of attributes.
src attribute
src="//lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html"
This attribute points to your widget. It tells the iframe which widget file it should load. For feeds with the upgrade add-on, we use advanced CDN, which speeds up the performance and loading time of the Instagram widgets.
scrolling attribute
scrolling="no"
By default, the iframe tag shows a scrollbar. We are hiding the scrollbars by adding this attribute.
allowtransparency attribute
allowtransparency="true"
By default, the iframe tag has a white background. The best experience is when our widget has your website background color, which this attribute provides.
class attribute
class="lightwidget-widget"
It is an optional attribute. It is helpful for development and debugging or extracting styles from the style attribute to your CSS files.
style attribute
style="width:100%;border:0;overflow:hidden;"
This attribute provides basic styling for the responsiveness and look of our widget. We remove some default styling from web browsers. If you wish, you can remove this attribute and add the following snippet to your CSS files:
.lightwidget-widget {
width: 100%;
border: 0;
overflow: hidden;
}
Can I use this widget to allow my users share their photos on my webpage? I have their instagram accounts and just need to show their photos. So i'll need the widget to be configurable with usernames loaded from my database, is that possible
Oscar Yepes •
Hi there @wp_oyepes. Unfortunately it is not possible at the moment with our widget. We only support one Instagram username per single widget and they can only be created via our website. You would have to create separate widget for each of your user manually and embed it on your website. If you have more question, please send us a support ticket. We can give you some additional information there:)
LightWidget •
can you find the solution of your question , i also have the same question as you mentioned
amir •
Hi, when I paste this code, I get a message "Widget add-on required".. is there something I'm missing
Evan Price Music Group •
Hi there! If you have upgraded widget code, please make sure that you are using upgraded widget code, not free one. If you don’t have the upgraded widget yet, you are most probably on HTTPS. We support SSL only in upgraded widgets. You can read more about it here: https://lightwidget.com/add-on/widget-upgrade
LightWidget •
How do you make the widget show the latest posts instead of randomly selected posts?
ProBeautyBuys •
Hi there! Our widgets by default show latest pictures:)
LightWidget •
I think @probeautybuys means is that the widget is not updated with every new post in Instagram.
Mobe SRL •
Hi there! In such case, please check if the access token is valid. If it is expired we can't fetch new pictures from your Instagram profile. In case the token is active and you still don't get latest pictures in your widget, please create a support ticket. Provide us with your Instagram username and widget ID. We will investigate the problem on our end:)
LightWidget •
Is there a way I can use this for Adobe Dreamweaver? I've been attempting to add it but haven't had any luck. Wasn't sure if I was doing it right or if it doesn't work for it. Thanks.
Fall Photography •
Hi there! We don't really use the Dreamweaver here, but if you have the option to edit html code of your website, you should be able to paste the code and it should work fine. In case it does not, please create a support ticket and provide us with some screenshots or describe the issue. We will try to help you out:)
LightWidget •
I'm embedding your awesome widget on my page using html. But I'm running into a small "padding" issue. I have it set as a 3 x 3 widget and no matter what I set the padding to, I'm getting 3 extra pixels of padding on the bottom. To be specific, I'm trying to embed the widget inside a div tag with a 1 pixel black line border around it. And while the border fits perfectly on the top, right, and left, the bottom has 3 pixels of space between your widget and the border. Any suggestions?
Chris Messineo •
Hi there! This small padding might be caused by line-height. You can add line-height: 0; to the container you have our widget embedded in. If it will not solve the problem, please create a support ticket and send us the link to your website where we can check out why there is some spacing under the widget:)
LightWidget •
Mine is still constantly flickering? do you not have a live chat or anyone that can help?
Dawn •
Hi there, Did you have a chance to look at following support article: https://lightwidget.com/widget-flickers-on-my-website ? Most probably you have two or more exactly the same codes embedded on your website. If the tips in this article will not help you out, please create a support ticket and someone will assist you:)
LightWidget •
It's helpful
Jean Claude Mbarushimana •
Há como usar o widget em mais de um projeto que possuo?
Task •
Is there a way to use the widget in more than one project I own?
Task •
Hi there! You can use single widget on as many pages and websites as you want. We don’t limit particular embed code to given URL:)
LightWidget •
gostaria de centralizar o widget no site, não estou conseguindo.
Ioiô Design •
Oi! Você pode usar alinhamento de texto muito text-align: center; no contêiner pai ou use flexbox ou margins para centralizar o widget. Em caso de problemas, crie um tíquete de suporte :)
LightWidget •
After embed i see "probbably was delete" and sad emoticons. wats happend?
KropkaWeb •
Hi there! Please check this tutorial here: https://lightwidget.com/file-not-found-error-on-local If it will not help you out, please create a support ticket and provide us with the link to your website. We will check what’s going on:)
LightWidget •
not working
Doc. Vijay S •
Hello! try this src="http://lightwidget.com/widgets/..." (force http in code) with me work!
Oficina Du Rio •
Hi! Can I add the widget to the Outlook email signature? I wanted something a bit more extra tan just an IG icon in our mail signature and thought this IG widget could look really cool in the emails our team sends their clients
gosiaciesek •
Hi Gosia! Unfortunately, we don't provide such an option at the moment:/ Our widgets are based on the iframes and scripts that are not widely supported in the email clients. If you would embed our widget inot email signature in most cases it will be stripped out of the message.
LightWidget •
Kann ich dieses Widget ohne Iframe einbinden?
serdar27 •
Leider basieren unsere Widgets derzeit auf Iframes. Es ist nicht möglich, es einzubetten, ohne dieses Element zu verwenden.
LightWidget •