Featured Blog: Welcome Home Taylor
Introducing: A shiny new newsletter design!

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.

Default-pin-hover
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. 

Wee Transparent HeartTo 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";

Pinit-heart-center
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 (The Perfect Pantry)

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

Lydia (The Perfect Pantry)

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.

The comments to this entry are closed.