Typepad Master Class: Add a Pinterest hover image

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

Typepad's default Pin It button is a great way for you and your readers to add your images to Pinterest. But lately, lots of Typepad bloggers have asked how to get a Pinterest button to show up when hovering over images in blog posts. Today, we've got you covered.

Listen, we get it--you're seduced by neat tricks. They're fancy, they look cool, and you like to show off. We like these things too, which is why this Master Class post will tell you exactly how to setup a hovered image Pin It button. The best part? You don't have to be some Code Jedi, designing your blog from scratch in HTML and Typepad code, calling upon the power of The Schwartz when things get jammed. All Pro plans can use this tip. 

The code we're using for this Master Class post is courtesy of bloggersentral.com. Their post details how to add the Pin It button in Blogger and Wordpress blogs, but this code works out-of-the-box for Typepad blogs as well! 

Quick Setup

The first, and only, step is to add the code provided below to the correct location in your blog.

For blogs that are using a pre-designed or Theme Builder theme, you will add the code via the Advanced section of your Blog Footer module at Design > Content. 

For blogs using Advanced Templates, you would add this code before the </body> tag in your templates.

The Code

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
//This Pinterest Hover Button is developed by bloggersentral.com.
//Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
//Please do not remove this attribution.
</script>

If your blog already has a jQuery library installed for another script/feature, then you will need to remove the following line from the above code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Once the code is added, save your changes and load your blog. Try hovering over an image.

Quick, simple, pretty! That's it, you can call it a day.

Customizations

If you followed the earlier link to BloggerSentral, you'll see that there are customizations available. They detail how to use a custom image instead of the Pinterest icon that's loaded by default, as well as how to change where it appears. 

To use a custom image, like the one to the left, you will need to update the image URL in the code above, making certain that you do not remove the quotation marks around the URL.

e.g. var bs_pinButtonURL = "http://everything.typepad.com/icons/wee_heart.png";

If you want to change the position as well, BloggerSentral offers additional position attributes that you can use:

• topleft
• topright
• bottomleft
• bottomright
• center (default state)

We quite like the center position, but if you'd like your image to appear elsewhere, then choose from one of the above options and replace the "center" attribute with the one of your choice.

e.g. var bs_pinButtonPos = "bottomright";

For additional customization options, please visit the BloggerSentral link above. To show off your custom images, placement, and more, visit the community forum!

Comments

[The Folding Chair]

it doesnt work for me

[The Folding Chair]

NEVER MIND. IT WORKED! AWESOME ! YAY :)

[kelly sill]

This is sooooo cool!!!! I have to admit that this is the first time I have ever done anything through Typepad's Master Class and I'm so glad I stepped out of the box and tried something new! Thanks for the code!!! :)

[Quing Obillos]

COOL!!! Thanks for sharing! :D This is why I love TypePad! I get really cool tips in addition to their awesomely efficient support team!

[Kiều Gia Trang]

So said !

[Love My Dress]

YES! Typepad, you ARE listening! ;) We do want these nifty little bits and bobs that Wordpress users seem so streets ahead on and that are actually helpful to our users.

Carry on! ;)

[Denise]

It's not working for me. I put it before the body tag in my Theme Stylesheet template (makes sense, and that's the only template I see body code) but I've got nothing.

Please advise!

[Simple Stampin']

Ok -- not working fro me but I am sure it is me! Went to Advanced section module at Design > Content - copied and pasted the L O N G code - hit save...went to my blog and nothing! What am I doing wrong!?!

[Lydia]

In Advanced Templates, which template or templates do we insert the code in?

[Lydia]

Help! Installed this in my templates, and it's working, but it has somehow blocked the other Pinterest widget on my sites. I'll send a help ticket on this one.

[Lyssa Griffin Zwolanek]

LOVE IT!! I have been looking and looking for how to do this in Typepad. Thank you SO MUCH!

[Bri]

Hi Nat! Looks like you got it to work. Exciting! :D

[Bri]

Kelly--look at you stepping outside your comfort zone and rocking this tip. I'm sure your readers will love it. :)

[Bri]

We're so glad you're a part of Typepad, Quing, and I'm happy that you enjoyed this tip. :D

[Bri]

LOL Thanks for your enthusiasm. Really glad you enjoyed this tip and I hope it's something you can use on your blog. :)

[Bri]

Hi Denise! The Stylesheet doesn't apply in this case, since it does not contain any HTML, only CSS. You need to add it to the following templates:

Main Index
Individual
Date Based
Category
Page (optional)

At the very bottom of each template will be the closing body tag that you need to insert the code above. If you're still having some trouble, go ahead and open a ticket at Account > Help > New Ticket, and we'll get it sorted for you. :)

[Bri]

Hi Susan. I'm not able to find the code in your blog, so it looks like you removed it. Would you mind enabling it again, and then opening a help ticket at Account > Help > New Ticket so that I can take a look?

[Bri]

Hey Lydia. I answered your ticket just a moment ago, but I'll repeat myself here for anyone who has a similar issue:

If you have a jquery item installed in your blog already, remove the script line in the code I provided that calls/loads the jquery library--http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js. Having multiple libraries loading in the same template can create a conflict. Once that's removed, and changes are saved, both should work without issue.

[Bri]

Hi Lyssa! I'm really glad we were able to provide you this tip after you'd been looking for it. Hope you and your readers enjoy it. :D

[Simple Stampin']

Ok....I just did it......

[Love My Dress]

Yes! I put it in place straight away and it works a treat ;)

--->

http://www.lovemydress.net

[Lisa]

Easy as - thank you

[Denise]

Ah, thanks so much Brianna! I've just followed your instructions and it worked perfectly. (Next time I'll remember about the CSS, d'oh!)

[Bri]

So glad to know it's working for you now. :D

[Bri]

Susan, it looks like you had added the code correctly, but the Blog Footer module wasn't enabled to display on your blog. This is why you weren't seeing anything on your images when you hovered over them. I just wanted to point out that the hover effect won't show until the blog is fully loaded. Since your blog takes a while to completely load, you may not see the hover effect for a while. If you want to reduce the load time, I recommend reviewing tips here: http://help.typepad.com/improve_load_time.html

[musemyworld]

Thank you, Thank you, Thank you!! Typepad is awesome!!

[Time Worn Style - Alicia]

most excellent, used the little heart one, love it!

[breathe happiness]

Hi. Installed this and it works beautifully! However, we've found that even on the pages that we don't want a Pinterest hover on, it's there. For example, on this page (http://breathehappiness.typepad.com/my-blog/meet-shaneen.html) the social icons at the bottom of the page content have the hover. Is there some code I can use on that page to remove it? OR to remove pages from the script and just have it for posts?

The code appears to exclude the right hand column, which is good but I can't see in the code how it does this.

[Bri]

The hover icon appears on all images in Posts and Pages. If you want to exclude specific images in a Post, then you will need to edit the HTML after you've finished the composition. Once you're finished composing, click the HTML tab and scroll to the section where the images are that you do not want to have a Pinterest icon on. Just before the code for those images, add:

div class='nopin'

Then directly after the code for the images, add:

/div

After you add those two sections, click Publish without switching back to Rich Text beforehand.