The other day I was asked about my Instagram sidebar widget that I have on my
personal blog. They wanted to know where I had gotten it. Truth be told I made it. It's just a simple HTML/Javascript widget that anyone can do. I figured it would be a great idea to post a tutorial on how to make the widget. SERIOUSLY SO EASY!
First things first your going to need to have an instagram account. I'll let you figure that out.
Next you'll want to signup for
Followgram.
Followgram is
a web app developed as a way to extend those Instagram's basic functions so appealing to millions of users already. At least that's what they say. It's just a way to see your instagram pictures online in a gallery setting. It's twitter for pictures. Sort of like Pinterest is twitter for creative ideas.
Before you create the widget you'll need to pick the instagram pictures you would like to use for your widget and get the url of the picture. You can have as many pictures as you would like. I have like 8 pictures on my widget.
To find the URL - First login to followgram and get to your dashboard.
Next click on the picture you would like to use and get to that individual pictures dashboard.
Right click on the image and select view image
The picture now should be the only thing on the screen.
On this screen, in the address bar, there should be the direct link URL to the image.
The direct link URL to this Winnie the Pooh quote is
http://distilleryimage6.s3.amazonaws.com/9b878340695e11e180d51231380fcd7e_7.jpg
Copy the code and save it to a simple text editing document (notepad for PC and textedit for Mac. Don't open a complex word processing application like Microsoft Word. Just use something simple.)
Now go back to your Followgram Dashboard and follow those same steps again until you have gotten the URL's to all the pictures you would like to use.
These are the 4 pictures I've chosen to use in this widget.
See how I have the unique URL to each image copied to my text editor.
Now it's time to start and finish building the Widget.
Copy and paste the following code into your text editor.
Replace
UNIQUE URL with one of the URL's that you have retrieved and saved. For Web Accessibly change the
UNIQUE ALT to a short description of the picture. No need to change the height or width. The 100% percentage code will automatically make the image the size of your sidebar.
I was looking at my example blog and I noticed that the 100% code renders different in different browsers. For instance on safari it stretches the photo and in google chrome the picture looks correct. I am adjusting my instructions and I think it would be more advantageous to code the image with the sidebars pixel width.
on my example blog the side bars width is 220px. Instead of having the width and heights be 100% change it to 220px. your height and width code should look like this.
height="220px" width="220px"
For example this will be the code for the Winnie the Pooh quote.
*PLEASE NOTE: DO NOT DELETE THE QUOTATION MARKS OR IT WON'T CODE RIGHT.
Here is a look at the final code for all four images.
Finally create a new sidebar gadget. Select the HTML/Javascript widget gadget and add YOUR final code to the widget gadget. I suggest building the code in the text editor and then just copy/pasting it in the HTML/Javascript gadget.
Viola! You are done!
*ONE FINAL NOTE: This is not an automatically updating widget. If you want to change the images to more current pictures you will have to do this all over again. But once you've done it a few times you'll be a pro.
To see what the widget looks like with these 4 images you can see it on
my example blog. To just see the widget with other images you can view it on
my personal blog.
If you have any questions on how to do this please feel free to leave a comment and I will be happy to answer your question. And if you apply this to your blog I would love to see it in action. Leave a comment and post a link.
I'll be posting a tutorial on how to add the view my gallery link to your blog soon.
