Posts Tagged ‘blogging’

How to add a Pinterest “Pin it” social media button to your blog posts

November 15th, 2011

Today it goes without saying that you need to put a row of social media buttons at the top or bottom of your blog posts. There are plugins and code snippets to do this for most of the major sites like Twitter, Facebook and StumbleUpon. Lately I’ve had clients ask me how they can do the same thing for Pinterest, an increasingly popular social bookmarking site that lets users pin images to their personal boards.

The Pinterest Goodies page includes code for a button, but you must individually set the image and web address to be pinned. This doesn’t work well if there are several images in a post because you’d have to make a different button for each image.

Thankfully, there is a much easier way to create a working “Pin it” button. The trick lies with the “Pin it” bookmarklet that is available at the top of the same Goodies page. A bookmarklet is just javascript code that you save as a bookmark or favorite in your web browser. When you’re visiting a web site with an image you want to pin, you click the name of that bookmarklet in your bookmarks folder and you’re magically presented with the standard pinning interface:

Pin it interface

Since the bookmarklet is just javascript, you can use that same javascript in place of the link in any web link. The only other thing you need is a “Pin It” button, so I made one based on the images Pinterest made available on their site.

Pin It

When inserting this button on your own site, please download the above image and host it on your own server. You can do this by right-clicking on the image and selecting “Save Images As…” If you try linking directly to the image on my site, the image won’t display and you’ll get an error image instead.

Once you’ve downloaded the button, here’s the code to use to make it work. Just replace YOUR-IMAGE-SRC-HERE with the address to your button:

<a href='javascript:void((function(){var%20e=document.createElement(&#39;script&#39;);e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pinit' src='YOUR-IMAGE-SRC-HERE'/></a>

That’s it! Here’s an example of the button working right here: Pinit

One note: It’s possible that Pinterest might update their bookmarklet code in the future, so please check that you have the latest version by visiting the Goodies page. If their developers are on the ball, any old code will be compliant with future updates. But developer aren’t always on the ball, so make sure you are.

How to export your Diaryland posts

July 11th, 2011

If you are interested in my Diaryland to WordPress conversion service, you will need to get a copy of your Diaryland entries. Instructions on how to do that are included below thanks to Weetabix!

  1. Log into the Diaryland account that you want archived.
  2. Look at your Profile. That will tell you exactly how many entries that account has posted. I charge $0.10 per entry to be imported.
  3. If you’re no longer a Gold member, then pay for a 3 month Gold membership (it’s $12) which is the cheapest tier, and then wait an eternity for Andrew to flip the switch on your account and send you the email that you’re Gold again.
  4. Go to the Gold Member resources.
  5. Select Download Diaryland Backup or something like that. That will trigger a giant file that may take a very long time to build. When it finishes, save that file as an .html on your harddrive. It might be helpful to rename it (YOUR NAME) Diaryland Backup.html.
  6. Send it to me (via my email address on the contact page) along with your WordPress admin address and log in information. I’ll invoice you for half the fee before I start and the other half once it’s complete.