how to tutorials

How to Add Instagram Widget in Blogger

instagram widget blogger

A simple guide to show you How you can Add Instagram Widget in Blogger blog,Instagram is a Fun Simple image sharing app and it has quickly become one of the best social visual media platforms and fast-growing social media site with over 400M+ Monthly users and on average 80M+ photos shared on a daily basis.

There are various ways to increase your Instagram followers and embedding Instagram widget on your website/blogger blog can be very helpful to build a strong following on the platform.

As Instagram doesn’t have their Official widget so you can use the Third party javascript widgets to show your Instagram feed in your blog. Like we have included in our Amazine Blogger Template and Blush Blogger Template

To properly use this widget first you need to generate instagram access token.

Note: Steps below will work only in our Blogger Templates.

Instagram Widget Blogger Styles

We have provided several Instagram photos styles to embed in your website/blog directly. Just copy the code below and paste it any javascript/HTML widget in blogger layout.

  1. On Blogger Dashboard Click Layout.
  2. Click Edit on Instagram Widget In footer area.
  3. If there’s no widget then Add a widget and Choose HTML/Javascript.
  4. Copy the following Code:

Instagram Widget Blogger For Footer Style

 

<div class='media-left'>

<div class='table-cell-m'>
		<h4 class='widget-title'>Instagram</h4>
		
				<a class='btn btn-default' href='//instagram.com/bthemez' rel='me'>Follow Us</a>


  </div>
</div>

<div class='instagram-footer'>
<div class='dark-wrapper'>
 
           
      <div class='cf'/>    
      <ul id='instafeed' class='insta-slick'>   
</ul>   
</div> 

<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var feed = new Instafeed({ 
 get: 'user',   
 userId: 3818481741,   
  limit:14,   
  sortBy:'random',  
  accessToken: '3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145',
   after: function () {
     
     var owl = $('.insta-slick');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 300,
prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>',
 nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>',
  arrows:true,
  slidesToShow: 5,
  slidesToScroll: 2,
autoplay: false,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  
  
   template: '<li><a href="{{link}}" target="_blank"><div class="zoom-out-effect left"><div class="img-box"><img src="{{image}}" /></div> <div class="info-box"><div class="info-content"><div class="insta-likes"><i class="fa fa-heart"></i>{{likes}}</div> <div class="insta-com"><i class="fa fa-comment-o"></i>{{comments}}</div>   </div></div></div></a></li>',   
 resolution: 'standard_resolution'   
 });   
 feed.run();   

 });
//]]>   
</script></div></div>

 

instagram-access-token

genacc

access.

Instagram Widget Blogger For Sidebar Only

For Sidebar Instagram Use the Code below.

For Instagram Grid Style

    For Instagram Slider Style For Sidebar

      Notejust change the # with your instagram url
      Generate Access Tokenyou need access token for instagram widget to work Go to this url-> https://blog.bthemez.com/instagram-access-token-generator/ Generate access token
      Sign In and Follow the stepsThen You’ll be given an access token like this 1531863919.1677ed0.23d238bc564249e799095d060c7521327
      Follow The next stepAdd Instagram User ID:
      To Change No. Of Instagram photos in sliderslidesToShow: 5 ( CHange the value in instagram code).
      To Change Total No. Of Instagram photos limit:14 ( CHange the value in instagram code).

       

      You Might Also Like