To display your photos on the Instagram gadget, follow these steps:
- Go to Layout on the Blogger dashboard vertical menu.
- Locate the Instagram gadget and open it
- Locate the 'username': 'your-username', (line 5)
- Replace your-username with your username. Do not use @ symbol. Be careful to not delete the quotation marks.
- Save the changes.
Instagram code
<script>//<![CDATA[
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'your-username',
'container': "#instagram-feed1",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_igtv': false,
'callback': null,
'styling': false,
'items': 5,
'margin': 0
});
});
})(jQuery);
//]]></script>
<div id='instagram-feed1'/></div>
Note: Your account has to be public.
Displaying a second Instagram account (Optional)
- Go to Layout on the Blogger dashboard vertical menu.
- Open a new HTML/Javascript gadget.
- Copy the Instagram code below and paste on it.
- Replace your-username with your username. Do not use @ symbol. Be careful to not delete the quotation marks.
- Save.
<script>//<![CDATA[
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'your-username',
'container': "#instagram-feed2",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_igtv': false,
'callback': null,
'styling': false,
'items': 5,
'margin': 0
});
});
})(jQuery);
//]]></script>
<div id='instagram-feed2'/></div>
The second Instagram will be displayed with the same style as the default one.
Displaying the second Instagram account as a 3x3 grid (Optional)
To change the style of the second Instagram account to a grid with 3 photos in a row, follow the instructions below.Changing the number of photos displayed
- Locate 'items': 5, on the Instagram code (line 13).
- Replace 5 to 9 or another multiple of 3. Be careful to not delete the comma.
- Save the changes.
Adding the grid style
- Go to Theme on the Blogger dashboard vertical menu.
- Click on the Customize button
- Click on Advanced link on the left menu
- Scroll the list of theme sections until the end and locate Add CSS
- Copy the code below and paste it on the Add custom CSS box
- Click on Apply to Blog button.
#instagram-feed2 .instagram_gallery {
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#instagram-feed2 .instagram_gallery a {
width: 33.33%;
}