For awhile now I’ve been using a slide-out Facebook widget on the Five Fifteen website that I found here: http://www.richosoft-support.co.uk/fortune/slideoutfacebook.html. It’s worked out pretty good for me so far, however I wish I had one just like it for Instagram. I looked around and all of the solutions I found were either overly complicated or cost money. So I decided to just modify the code for the Facebook one and make it work for Instagram!
I’m not going to go too much into the code seeing as I didn’t write it from scratch rather than just modify someone else’s code. It uses a website called Intagme which allows you to place an Instagram widget on your page, which is cool, but we want it to slide out!
So to start off you want to download the following zip file:
1.) Unzip it, and upload instagme-widget.js and instagme-widget-plain.png to your server.
2.) Go to intagme.com.
3.) Put either your instagram username in the username box or a hashtag in the hashtag box.
4.) Fill out the rest of the form like so:
- Widget Type: Grid
- Thumbnail Size: 100
- Layout: 3 x 3
- Photo Border: No
- Background Color: (Leave Blank)
- Photo Padding: 0
- Sharing Buttons: (Whichever you perfer, Yes is recommended)
5.) Click “Get Code”.
6.) You should get a code that looks like this:
<!-- www.intagme.com -->
<iframe src="http://www.intagme.com/in/?u=Zml2ZWZpZnRlZW5wcmludGluZ3xpbnwxMDB8M3wzfHxub3wwfHVuZGVmaW5lZHx5ZXM=" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:300px; height: 300px" ></iframe>
You need the URL from that code, specifically the part after “?u=”.
So in this case, the part we need is “Zml2ZWZpZnRlZW5wcmludGluZ3xpbnwxMDB8M3wzfHxub3wwfHVuZGVmaW5lZHx5ZXM=”.
7.) Put this code on your website, but with your own long mess of numbers and letters we got above, perferably right before the closing </body> tag:
And that’s it! I even included the Instagram tab image I made to match the Facebook one!
There are some improvements I need to make to it, mostly to make it more compatible with the Facebook widget. For example, when the page is loaded and if you hover your cursor over the Facebook tab first, before you hover over the Instagram one, and then hover over the Instagram tab, the Facebook tab will be visable ontop of the Instagram widget. Another issue is that both tabs are position “fixed” on the page, the Facebook one being set to 21% from the top of the page and the Instagram one being set to 10%. This means that if the browser window is resized, the tabs will more than likely overlap. But these are just two very small issues. I’ve been using both widgets on my website just fine.
Let me know what you think!