Have you ever clicked on a Pin that took you to the home page of a blog instead of the post you wanted to see? Today I'm sharing a bit of code to help prevent that problem on Blogger.
Pinterest created a special image attribute, data-pin-url, that lets you add your post's permalink to all of the images in the post. Pinterest will link images with this attribute to the right post no matter what page your reader is on when they Pin it.
It's a time-consuming chore to add this attribute to all of your photos one-by-one, so I wrote some JavaScript to do it for you automatically!
What This Code Does
This code adds the data-pin-url attribute to every image in posts on your home page and the "index" pages (archive, label, search, "older posts", and "newer posts" pages). The attribute links each image to its original post.
After you install this code, new Pins created from posts on your home page or index pages will link to the right blog post, not the home/index page. This code can't change old Pins. It can only prevent future mixups!
Template Compatibility
This code works on all of the standard Blogger templates except Dynamic Views, which does not accept custom code.
It also works on custom templates that have the same internal structure as a standard Blogger template.
Installation
Back Up Your Template
Backup instructions here. Do not skip the backup.
Open the Template Search Box
After you save your backup file, click the "Edit HTML" button below your "Live On Blog" screenshot.
Next, open the template search box to search your code. Your browser's search function can't search the code, so be sure to follow these three steps exactly.
- Place your cursor on the template code.
- Click once.
- Press CTRL and F at the same time (PC) or Command and F (Mac).
The search box will open in the upper right corner of the template editor. It looks like this:
Enter </body> in the search box, then press enter. The code will "jump" down to the </body> tag in your template and highlight it in yellow.
Copy the Code
Select and copy the entire code from the code box below. Only copy the code, you don't need the line numbers.
If the embedded code doesn't load for you, or you're having trouble copying it, you can copy it from here.
Paste the Code
Paste the code into your template, directly above the highlighted </body> tag. Next, press the "preview template" button. If you get an error message, press the "revert template" button and start over. Otherwise, press the "Save template" button.
Test the Code
There are two different ways to test your installation.
Test Option One - Create a Test Pin
Go to the home page of your blog and create a new Pin from any of your post images. After you create the Pin, go to Pinterest and click on it. It should take you directly to the post page, not your home page. You can also try this test from any index page to double-check!
Test Option Two - Check Your Blog's Source Code
If you'd rather not create a new Pin, you can check your blog's source code to confirm that your new data attribute is in place.
Visit your blog's home page in Chrome or Firefox. Hover your cursor over any image in your blog post and right click it. Select "Inspect Element" from the context menu. You'll see something like this screenshot (click to enlarge):
Look for the data-pin-url attribute inside the img element. If it's there and the URL is correct, you're all set!
Note: this code adds the data-pin-url attribute to images on the home page and index pages only. The attribute isn't necessary on post permalink pages because Pins created from permalink pages automatically link to the correct page.
Alternate Version with data-pin-description
Pinterest has another attribute that's supposed to control the description of your image, data-pin-description. But, only the Pin It hover buttons pick up the text from this attribute reliably — the Pinmarklet and the Pinterest browser buttons don't always recognize it on Blogger.
If you don't mind a little inconsistency with your Pinterest descriptions, you can set both the data-pin-url and data-pin-description attributes for your images with this alternate version of the code. The installation process is the same as the url-only version. The alternate code adds both the data-pin-url and data-pin-description attributes to your post images. The code uses the post's title for the data-pin-description attribute.
More Pinterest Attributes
Pinterest has two more image attributes: data-pin-media, which you can use to specify a Pinterest-specific image for your posts, and data-pin-id, which counts new pins from your page as a "repin" on your original pin.
This post on Pinterest's blog has the full details of all four attributes. After you read that, this post from Blog Chicka Blog will show you how to add them to post images by hand. The tutorial shows how to do it on WordPress, but the same basic technique works on Blogger, too. Remember that you don't need to add data-pin-url if you're using this code (and data-pin-description if you're using the variation) — the code will do it for you!
Happy Pinning!
