etsy

Instagram Photos

To display your photos on the Instagram gadget, follow these steps:
  1. Go to Layout on the Blogger dashboard vertical menu.
  2. Locate the Instagram gadget and open it
  3. Locate the 'username': 'your-username', (line 5)
  4. Replace your-username with your username. Do not use @ symbol. Be careful to not delete the quotation marks.
  5. 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)

  1. Go to Layout on the Blogger dashboard vertical menu.
  2. Open a new HTML/Javascript gadget.
  3. Copy the Instagram code below and paste on it.
  4. Replace your-username with your username. Do not use @ symbol. Be careful to not delete the quotation marks.
  5. 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

  1. Locate 'items': 5, on the Instagram code (line 13).
  2. Replace 5 to 9 or another multiple of 3. Be careful to not delete the comma.
  3. Save the changes.
Note: 12 photos is the maximum allowed.

Adding the grid style

  1. Go to Theme on the Blogger dashboard vertical menu.
  2. Click on the Customize button
  3. Click on Advanced link on the left menu
  4. Scroll the list of theme sections until the end and locate Add CSS
  5. Copy the code below and paste it on the Add custom CSS box
  6. 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%;
}

Contact Form