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.)
6 Comments
Thank you so much! Your post has helped me heaps tonight. After trial & error, as I’m not using word press & know very basic html, it’s worked YAY! I am truly very appreciative and wish good things to come your way 🙂
Hi I needed help adding the widget on my wordpress. I’m having trouble adding to my main page. The only thing popping up is my website to my Instagram page. Please help me!! 🙁
OMG you are a GENUIS!! I have been trying to fix that for months.Thank you so so much for helping! 😊
But now it seems that the linkbox is behind the Snapwidget, so it links only to my instagram account, if i click besides the pictures. You wrote: “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“
But how can i manage that? i didn’t found an answer with google.
Hi Remo. I would need to see it in more detail to help with the issue. I would suggest possibly adjusting the order of your CSS you make sure the link sits on top of the Snapwidget plugin.
Hi Remo.
A couple of things:
Your HTML was a little off. Your closing anchor tag
is in the wrong spot. Look at the code from the post and compare it to yours. That should fix it. I experimented on my end and that solved the issue.Once you get the right code, you will need to adjust your CSS. Adjust the absolute position of the “bottom” of the #linkbox in the CSS. That will move the link up or down. Increasing that number will move the link towards the top, decrease that number will move the link towards the bottom. It is going to be different on your site than it was for mine.
Change the font and color of the link in the CSS, the “a {….”
That should do it.