My wife started a lifestyle blog a couple of months ago. One of the things she really wanted to add was an Instagram feed in the side column of the theme. We looked at different WordPress plugins, but were not too happy with the options.
I looked at some of the blogs my wife follows to see what they use. Turns out, they use something called SnapWidget.
SnapWidget is a free service that lets you display your Instagram photos on your site. You enter in your Instagram account information, along with different styling options and it gives you a piece of code for you to copy and paste anywhere on your site. Pretty nice. The only thing is… when you click on the Instagram image, thinking that it’s going to take you to your Instagram page, it takes you to their third party knock-off faker Instagram site. Bummer.
The other bloggers that use SnapWidget on their WordPress sites don’t do that. When you clicked on their Instagram images, it goes right to their Instagram account.
After digging around in the code, I saw what they did. They added a link that sits above SnapWidget. This new link goes to their real Instagram account. Pretty awesome.
Here’s how you do this in Wordpress:
1. Under ‘Appearance’ in the Dashboard menu, go to ‘Widgets’.
2. Put a new ‘Text’ widget (these are awesome, you can read all about them here) where you want your Instagram images to appear. Footer. Right-side column. This all depends on what spaces you have available based on your theme.
3. Copy the HTML and paste it into the ‘Content’ field of the Text Widget.
4. Go to SnapWidget and create your personal Instagram widget/code. It will look something like this:
5. Copy and paste YOUR SnapWidget code between the SnapWidget HTML comments.
6. In the HTML code, change the ‘USERNAME’ in the “a href= “http…/USERNAME/”>” and in the p text USERNAME at the bottom to the username of the Instagram account you want to link to.
7. Click “Save.”
8. You should start to see SnapWidget working wherever you placed your Text widget.
9. Now, copy the CSS into your master style css file (usually style.css) for your WordPress theme. MAKE SURE YOU READ THE COMMENTS IN THE CSS FILE. This will put the new link on top of SnapWidget. I tried to use pretty specific CSS classes and IDs so as not to cause any conflicts with the theme. Nothing is 100%, so check before you implement.
Depending on your CSS reset or the WordPress theme you are using, you may have to adjust the CSS to position the link on top of SnapWidget. You will also probably need to match the fonts and color to your theme.
10. When you are done, you should have something that looks like this. (Note: You don’t need the white box on top of your Instagram to link to your Instagram account.)