Code it Pretty: Updates to the Pinterest Gadget for Blogger

I want to thank everyone who left a comment on the Pinterest gadget for Blogger, both for your support and for pointing out bugs and making feature requests. Your feedback is deeply appreciated! Thanks to your comments I have an Internet Explorer 9 bug fix and a new gadget option to share with you today.

Update and a New Option for the Pinterest Gadget

Internet Explorer 9 Bug Fix
Option to open Pinterest links in a new window

Internet Explorer 9 Bug Fix

Big thanks to Robert, who clued me in to an Internet Explorer 9 bug that happens on some Blogger templates. I'm happy to say there's an easy, quick fix for this bug if your template is affected.

Do You Need the Fix?

If you've got the Pinterest gadget on your site, take a quick look at it in Internet Explorer. Click on one of the thumbnail links. If the link goes to the Pinterest page, you don't need to change anything and you can get back to your Pin-happy day. If the link is broken, move on to the fix. I'll show you how to make a tiny tweak to your Blogger template and get the Pinterest gadget working!

The Fix: Step One

In Blogger, go to the Template section and click the "Backup and Restore" button. Download a copy of your full template. If you choose to make this change, do not forget to back up your template.

The Fix: Step Two

After you've downloaded your template copy, click the "Edit HTML" button below your "Live on Blog" screenshot. Click the "proceed" button on the next window.

The Fix: Step Three

In the top of your template's <head> you'll find a part that starts with:


<meta content='IE=EmulateIE(some number here)' http-equiv='X-UA-Compatible'/>

Change whatever number is there to =edge so it reads:

<meta content='IE=EmulateIE=edge' http-equiv='X-UA-Compatible'/>

This change tells your browser to act like the newest version of Internet Explorer when it reads your site. The lower numbers encoded in many Blogger templates (usually 7 or 8) can force IE9 to work below its potential and miss out on some great stuff, like the corrected links in the Pinterest gadget!

After you've updated the meta tag, save your changes and go check out your blog again in Internet Explorer 9. Click a link from your Pinterest gadget and it should go to the right place. If it doesn't, double check that your change was saved, and make sure you didn't add any spaces into the meta tag. If you've made the changes correctly and this doesn't fix the problem, please let me know in the comments. Link me to your blog so I can take a look at your template and the gadget.

Option to Open Pinterest Links in a New Window

This feature was requested by Michele. If you'd like your Pinterest thumbnails to open in a new window, too, here's what to do:

Step One

Save a copy of your version of the gadget to a plain text editor (like Notepad or TextEdit). Do Not use a word processing program to save your gadget.

Step Two

You'll be changing the jQuery here, so be super careful not to drop any of the curly braces {} or parentheses (). It's a fussy language!

Scroll down near the bottom of the gadget code and find the segment of the code marked with the comment "//correct href for images so they point to Pinterest". Add a line of code right before the last }; in that segment, like so:


$(function() {

  $('.rssFeed a').each(function() {

    var href = $(this).attr('href');

    $(this).attr('href', 'http://www.pinterest.com' + href);

  });

});

  $("#pinterest a[href^='http://']").attr("target","_blank");  
       
 };

})(jQuery);

Save your gadget and click your Pinterest links. They'll now open in a new window (or tab, depending on your browser settings). If it doesn't work, check your code for typos or omissions, and watch those fussy braces & parentheses!