Recent Instagram Feed Slider For Blogger [automatic]

Recent Instagram Feed Slider For Blogger

WordPress users are lucky to have built-in plugins of their own for adding Instagram feed to their sites but for blogger it's not like that. You have to either use a third party service or make your own plugin for adding your Instagram feed to blogger.

After releasing tutorials like muti-level sidebar navigation and hamburger drop down menu finally today we are releasing the most advanced recent Instagram feed slider for blogger which will display your Instagram feed in descending order i.e from latest to oldest. The best thing about it's that it slides automatically with amazing fade-in and fade-out animation that makes it more dynamic.

The widget is developed using only pure JavaScript and built from scratch using Instagram API. If you are a developer then you would exactly know how this widget functions and fetches data from Instagram feed.


Instagram Feed Slider Widget Features:

You can call a blogger widget good if and only if it loads fast and doesn't harm your blog load time. You could find a bunch of widgets online that are not even optimized and hurts your blog load time so we designed this widget by keeping that in mind. 

  • Fetches recent photos from your Instagram account
  • Coded in pure JavaScript ( Instagram API )
  • Animated Fade-in and fade-out effect 
  • Switches automatically using a timer
  • Loads faster and yet dynamic
  • Secure with access token 
  • Links straight to your Instagram photo url
 
Note: You would rarely find such widget online!

Get your Instagram access token:

Since we are fetching data using Instagram API so remember that days gone by when we could get from Instagram as much photos as we want. Those times are gone now and Instagram security is much stronger than it was before so we had to generate our access token for developing the widget.

You would also have to do that and it's not that difficult as much as you might be assuming just follow these steps: 
  • Visit Generate Access Token 
  • Generate your access token there by signing in to your Instagram account
  • Save that access token for now. We will be using it later. That simple! 

Don't feel secure? You might have question about your Instagram access token that what if someone else gets your access token? 

If someone gets your access token then don't worry at all. He can't do anything with the token except browsing photos. The token doesn't give access to any type of personal data!   

Add recent instagram feed slider in Blogger:

As we discussed earlier that this widget uses only pure JavaScript and CSS for making it stunning slider so we will first add CSS to our template and then we will add JavaScript as a sidebar gadget to see it functioning properly!

The CSS:

  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML    
  • Search for ]]> </b:skin> (Hint: Click anywhere in the code and press CTRL + F for find box to appear! ) 
  • Now above that tag paste the following CSS code.   
/*Instagram Feed Slider TopEarningBoy */
 

.mySlides img{
 

border-radius:5px;
 

animation:fading 5s infinite
}

@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}


  • Change fading time and opacity as your requirement.
  • Save your template. ( We aren't done yet!

 The JavaScript:

  • On your Blogger dashboard click on Layout
  • At your sidebar section click Add a Gadget
  • Select HTML/JavaScript gadget 
  • In the content field add the following JavaScript Code
<!-- Instagram JSON Feed Fetch topearningboy.com -->
  <script type="text/javascript">
   
    function showSlides() {
  var i;
     for (i = 0; i < slides.length; i++)
  {
      slides[i].style.display = "none"; 
  }
     slideIndex++;
  if (slideIndex > slides.length) 
  {
    slideIndex = 1
  }    

      slides[slideIndex-1].style.display = "block";
  
      setTimeout(showSlides, 5000);
     
}

    function tebinsta(json) {
  var listing="";
  
      for (var i = 0; i < json.data.length; i++)       
{ if (i<5){
  var url = json.data[i].images.low_resolution.url;
 var linkto = json.data[i].link; 

  listing += "<div class='mySlides'><a href=\"" + linkto  + "\">" + "<img  src=\"" + url + "\"/></a></div>";  
}
}  
 document.write(listing);
    }
    
</script>

 <script type="text/javascript" src="https://api.instagram.com/v1/users/self/media/recent/?access_token=Access Token&callback=tebinsta">     

</script>

<script>
  var slideIndex = 0;

  var slides= document.getElementsByClassName("mySlides");
  
  showSlides();
  </script>  
  • Replace 5000 with 7000 if you want the slider to switch after 7 seconds.
  • Replace Access Token with your generated access token.  
  • Now if you want more than 5 recent photos then you have to replace i<5  with i< no. of photos 
  • Remember that no. of photos doesn't exceed 20 because Instagram API doesn't allow it anymore. Instagram decided to stop endless spam and created Sandbox Mode so now you can only fetch latest 20 media.  
  • Save and you are done!

Disclaimer: All rights belong to TopEarningBoy. You may not modify, publish, distribute any type of content without our prior written consent from Copyright Owner.

Need help?

I have tried my best to make this tutorial as simple as possible and if you learned from it then link back to this page. Now I want a sincere feedback from all of you in the comments section to let me know if you liked it or not and what else do you want from this tutorial? Comment below and I would love to answer. Stay blessed always!

 
If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!

No comments:

Powered by Blogger.