Navigation

How To Add Instagram Widget In Blogger


How To Add Instagram Widget In 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

How To Add Instagram Widget In Blogger
How To Add Instagram Widget In Blogger
How To Add Instagram Widget In Blogger

Instagram Widget Blogger For Sidebar Only

For Sidebar Instagram Use the Code below.

For Instagram Grid Style

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id='instaside'>   
</ul>   

<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',
target:'instaside',  
  userId: 15920822,   
  limit:9,
  sortBy:'random',  
 accessToken:'1531863919.1677ed0.0184dae01d2745a0be5ddea16e4fd8ef', 
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'   
 });   
 instaside.run();   

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<ul id='instaside'>   
</ul>   


<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',
target:'instaside',  
  userId: 381848181,   
  limit:9,
  sortBy:'random',  
 accessToken:'381848181.1677ed0.14b2e5f55b6842a2a898da10ef99cb54', 
 after: function () {
     
     var owl = $('#instaside');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 800,
 prevArrow: '<div class="slider-nav-prev"></div>',
 nextArrow: '<div class="slider-nav-next"></div>',
  arrows:true,
  slidesToShow: 1,
  slidesToScroll: 1,
 fade: true,
  cssEase: 'linear',
autoplay: true,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        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"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'



  
 });   
 instaside.run();   

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

Notejust change the # with your instagram url
Generate Access Tokenyou need access token for instagram widget to work Go to this url-> 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 photoslimit:14 ( CHange the value in instagram code).
Share

Post A Comment:

0 comments: