How-to: Add Pinterest Pin-It Button to Typepad Without Advanced Templates
Now the way I see things, there are two ways to be in the world: selfish or giving. All snark aside, I choose the latter. With Pinterest, for example, once I was enlightened about it I wanted to share the way of thePin. I wanted to share it here because then even more people could pin my biscuits. (Pin my biscuits! sounds a southern euphemism for...well...something else, doesn't it?)
I was surprised to learn that Typepad does not have a Pinterest widget. Yeah I know, right? That is just silly given the level of pinning going on right now. Being a geek, I put on my coding hat and figured out how to make a pin-it button for my web sites. being the generous sort I figured I'd share so you too can have Pin-it buttons now.
The instructions on this page work for all Typepad templates (and any other web page you want to throw the code into). If you have advanced templates, you can use these instructions for how to add the Pinterest Pin it Button with Pin Count to Individual Posts with Typepad Advanced Templates.
Going to the source, in this case, Pinterest's Goodies page, yielded some iffy scripts and a distinct lack of "simple" ways to get a freaking Pin it button onto each individual post. (Hard-coding each link and image is a joke, you guys. A freaking joke!)
You know what's not a joke? Look down there. (No not "down there"...jeebus people! The footer of this post.) That looks suspiciously like a Pin it button. Works a whole lot like one, too.
Have a Typepad blog and want one of your very own? It's a quick tweak if you are using Advanced Templates. If you don't code, though, you're pretty much screwed on this. Typepad even says so...
Hey, wait now...what about the post title? Where I promise you that you can have a Pin it button even without advanced templates?
Well, while I haven't yet figured out how to give you a Pin-it button in your post footer (like mine) without Advanced Templates, I can give you a Pin-it button in your Navigation Bar that works for individual posts. Would that work for you? Yeah, I thought so. I am really happy because any time a vendor shrugs their shoulders without getting creative, I wince. (@jaydeflix will be along any moment to tell me this isn't in the header/footer so technically Typepad said NOTHING about what I am doing. I would simply point out the lack of a Pin it button on Cook Local and move on with the installation instructions.)
- Backup your templates — Go to your blog at Typepad. Click Design. Find your template set in the list (it will have a little icon indicating it is the Current design) and click Actions, Duplicate. Give the copy a clever name/description so you can find it later if you need. (Mine often say "KM-before this or that crazy tweak" or other things that make little sense to normal folk.) This is just in case something goes badly...and because backups are critical to any computer-bound content creator. (Also, #someoneElse is now extra happy because "backup your data" is a sort of mantra with him.)
- Create your Image — Right-click the Pin it button in the footer of this post and Save it to your computer. Upload that image to wherever you host site images and snag the URL to the image for your code.
- Create your Code — Copy the following (bolded) code to a text editor (Notepad) so you have a copy to work with. There should not be any line breaks in it when you paste it in to your text editor so get rid of any that show up. Replace YOUR_IMAGE_GOES_HERE with the URL to your image.
- Install your Code — This depends on the type of templates you are using.
Advanced Template sites can use the code pretty much wherever you want. Move along now...
Standard Templates, login to Typepad and go to Design, Content and click on the pencil to edit your Navigation Bar. Click on Advanced so you can see the actual HTML. The default entries look roughly like this:
<li><a href="someLink">someText</a></li>
If that's what yours look like, just add the LI tags to the start and end of the code, like this:
<li><a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img style="margin: 0 0 0 0;" onclick="doPinIt();" src=" YOUR_IMAGE_GOES_HERE" alt="Pin It" /></a></li>
- Decide where on the Navigation Bar you want the Pin it button to show up and find that bit of the code. Insert a few blank lines after the closing </li> and before the next opening <li> tag then paste your Pin it code into that space. (The extra space is just to make it easier to look at later.)
- Click Okay. Once you are out at the main Content screen, click Preview to see what it looks like. You may need to tweak the alignment to make it line up correctly. At Not Like Normal People, where I did this, I had to change the margins to "0 0 -10px 0" (the order is: top, right, bottom, left and negative numbers pull the image that direction) but your blog may well need different tweaks.
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img style="margin: 0 0 0 0;" onclick="doPinIt();" src=" YOUR_IMAGE_GOES_HERE" alt="Pin It" /></a>
Note for people using Advanced Templates — Pay attention to page load time changes when installing this. When the sharing service plug-in was on the other side of the Pin it button the layout kept freaking out and page loads were slow and occasionally hung. It's happy here with a couple of non-breaking spaces and margin tweaks for alignment and I really don't know why the weirdness. Just thought I'd mention it in case someone ran into it.
Disclaimer: This has been installed for a few hours, it has not been exhaustively tested, m'kay... If you have trouble, talk to me in comments and lets figure it out together.
kitchenMage has a seemingly eternal site redesign underway and I really want the little count of how many times that post has been pinned. I'll definitely let you know when I figure it out. I am also working on a similar thing for Blogger, though I hear of all sorts of issues with similar code over there.
One more thing. This code is based on the official Pinterest bookmarklet and I would love to give someone credit if only I could figure out who. There are variations of this floating around all over the place so at the moment I will just thank the spirits in the wires for leading me to it.
Okay, another thing. I really appreciate the people who share the word about my tech tweaks. What I don't appreciate is people who wholesale lift my code and instructions, cut some of the most important stuff (like backing up templates) and then post the rest. Please don't be that person. One of them is enough.