How to Add Instagram Follow Button in Blogger Blog/ Websites

How to Add Instagram Follow button in to your blogger , Instagram is a most widely used image sharing app. People all over the world uses Instagram in order to share their photos and videos with their friends. For the case of a blog, when the bloggers view your site and share in the social media then we can say that this blog is successful.

The blogs which uses simple words which can even understand for a common man are the ones people will prefer most. An uninformative and useless blogs will be neglected by the If the blog is useful, informative and helpful for them, then the people who searches your blog will definitely share your thoughts thinking that this will certainly be helpful for others too.

People won’t be copying all the content and pasting it in their social media in order to share your blogs. So it is the responsibility of the blogger to provide social media share Instagram Follow Button in Blogger along with the article. By doing so, the people who likes the blog can easily click on the social sharing button and can share the page with others easily.

In WordPress blog, it may be easy to add Instagram Follow button easily through plugins.But in Blogger blog, this idea may not work. Today many people are visiting to their Instagram daily. So if you use Instagram share in your blog, you will certainly get the benefit.

Steps to add Instagram follow button in Blogger/ Websites:

In WordPress sites, we use various plugins like “Monarch”, “Add to any share buttons”, Easy social share buttons, etc for social media sharing of blog posts. But in the case of Blogger blogs, we cannot follow any of the plugins. Instead according to the design of the button you can use the codes mentioned below.

Select the design of Instagram Follow Button in Blogger you require from the following and use the code mentioned for it.

Design 1
Instagram Follow Button in Blogger

Code for design 1<style>.ig-b- { display: inline; }

.ig-b- img { visibility: hidden; }

.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }

.ig-b-16 { width: 16px; height: 16px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-16.png) no-repeat 0 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

.ig-b-16 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-16@2x.png); background-size: 60px 178px; } }</style>

<a href=”https://www.instagram.com/your-instagram-username/?ref=badge” class=”ig-b- ig-b-16″><img src=”//badges.instagram.com/static/images/ig-badge-16.png” alt=”Instagram” /> <b>Follow on Instagram</b></a>

Design 2
Instagram Follow Button in Blogger

Code for design 2  Instagram Follow Button in Blogger:

<style>.ig-b- { display: inline-block; }

.ig-b- img { visibility: hidden; }

.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }

.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }</style>

<a href=”https://www.instagram.com/your-instagram-username?ref=badge” class=”ig-b- ig-b-v-24″><img src=”//badges.instagram.com/static/images/ig-badge-view-24.png” alt=”Instagram” /></a>

 

Steps to Add Instagram Follow button in to your Blogger Blog:

Step 1: Choose any one design for yourInstagram Follow Button in Blogger for your website. Copy the respective code and paste it in the blogger widget.

Step 2: For the code above, in place of “https://www.instagram.com/your-instagram-username” you have to provide your own Instagram username.

Follow on Instagram” text on the design 1 code, is the label of the button. You can change this label by editing the last line of design 1 code within the bold <b> button label</b>tags.

Step 3: Now click on the save button to see the blog with the Instagram Follow Button in Blogger.

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *