Add Instagram Badge

[buddysmom]

HOw do I add an instagram badge to my website?

I have tried posting the html code for the badge that I got from the instagram site into my website and nothing shows up when I view it in the browser. Any tips?

[Vasili]

Re: instagram badge

RE: http://www.passionfloral.ca/ .... http://www.passionfloralboutique.net/

FOR WHICH - your BlueVoda site or your osCommerce site?? (You previously mention an osC Shop, but in fact the Cart you now link to is a specialty script provided by Flower Shop Network --- and you will need to contact them to add an Instagram badge on your particular site)
To add an Instagram Badge to either involves completely different methods and requirements ....

FOR BOTH - Follow the instructions provided by Instagram precisely.

To add the Badge to your osCommerce site, you should be following the detailed instructions provided on the official osCommerce Support Forums. You will also find some tips and additional suggestions from other Users there that may prove insightful.

As for adding a Badge to your BlueVoda site, you do know that you add HTML to a BlueVoda created page by using a HTML Box, yes?
> How To Add HTML To BlueVoda Pages

[buddysmom]

Re: Add Instagram Badge

Yes I made sure I am following the steps correctly. I wanted to add it to the website not the ecommerce site.

I added the html box to my page, and then I pasted in the custom code generated by Instagram. But nothing happens. I tried publishing it to see maybe it needed to be published to show up, but it doesn't.

this is the code I am pasting:

<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-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.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-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }</style>
<a href="http://instagram.com/passionfloral?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>

[Vasili]

Re: Add Instagram Badge

Isn't there additional code you need to insert on the page code in a specific place (Start of Page, Between Head Tag, End of Body, etc.) via Right-Click on BV Page > PAGE HTML?

I'm not a "Coder" ... but even I can see there's a missing "<a>" that should be at the beginning of the script.

* I suggest you generate the code once again and this time pay particular close attention to copying the whole code intact before pasting it to a BV HTML Box.


When all else fails, you can simply add the Instagram icon image of your choice to link directly to your Instagram Account using the same method outlined in this Tip for Facebook. Just do a Google Search for "Instagram Icon image PNG" to find a selection to choose from.
I use the same technique successfully on my sites, one of which you can see here (top-right of site). Just a suggestion ...

[buddysmom]

Re: Add Instagram Badge

I have tried that same code on a site that lets you test html and it works fine there.

I will take a look at your example to try to add it differently. thanks again.