Add a Pinterest Pin It Mouseover Button on Blogger Images

Images have always played a big role in getting new visitors from search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante significantly.

Pinterest allows bloggers to use its service to "pin" content images or images to the site. When visitors to this site see an image they like, they can click the red Pinterest for Blogger button and add it to their Pinterest account.

Someone who clicked on a blogger's Pinterest button can now see your photo on their dashboard and share it with friends or followers of the service. You may also come across this image when users add keywords or category tags to the image. Most importantly, clicking this image results in a link to your website and includes the title or descriptive name of your blog.

So adding a Pinterest blogger button will help you get a lot of new traffic from Pinterest and people who found your photos and posted links through the service. Here are some steps to add your own Pinterest button.

1. Go to your Blogger form.

The first thing you need to do is edit the template code so that it knows when to display the blogger Pinterest button along with the content. To do this, log into your Blogger dashboard and select Template > Edit HTML.

When you open the editor, it might look a little strange if you don't have much experience with HTML. Click anywhere in the code area and find it by pressing CTRL + F. Lighthouse - press Enter to find it:

Body tags are the overall content of your website. Think of it as the dashboard of a website. If you delete everything in this section, your page will be a blank white page.

2. Add a Pinterest text.

Once you find them tag, paste the following script above:

3. Change his pin status! the button

The benefit of this code is that it gives you some freedom in choosing where the blogger's Pinterest button appears in the image. Look at the code you just copied and paste it into the Word Center HTML code.

var pinit_button_position = " center ";

To move the pin to a different area of ​​the image, change the center to one of the following settings:

in the upper left corner
in the upper right corner
down left
bottom right

And change the pin in it! that appears when you hover over it, replace the blue title above with your own title:

var custom_pinit_button = " http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-button.png ";

4. Save the template

Make sure you've added everything correctly, then save the template and go to the last image post you made. Hover over the image and you should now see a red Pinterest blogger button on the image. Try it and see how it works.

If you want to hide the pin button before a specific image, when creating a post, go to the HTML tab of the post editor and type class="nopin" before the slash and angle brackets of the image element, for example: :

The only downside to this button is that it doesn't get information from your custom image captions. It is automatically placed in the title of the blog post that contains the image. Therefore, you should pay more attention to the title of the post so that it perfectly matches the featured images.

Remember that if this code is enabled, you must tag your captions to match the photos you post. It might seem obvious, but sometimes creating a post with a photo seems like a silly joke in the context of a Pinterest post.

If you use Google Analytics , you can see the traffic going from Pinterest to your site. You should also create your own Pinterest account so that you can manage the content and keep track of how it is shared. This is. Enjoy and happy blogging!