I recently moved a client from WordPress.com to a self-hosted WordPress installation. After I imported all her entries, I noticed that the shortcode WordPress.com had used to display her YouTube videos was no longer working. Instead, the shortcode itself was appearing, like this:

[youtube=http://www.youtube.com/watch?v=1LLls4hPEfM&w=500&h=311]

This is actually pretty easy to fix once your figure out the regular expression that can grab the YouTube video id, width and height from the shortcode. Then you add a shortcode definition to the functions.php file of your theme by copying and pasting this code:

function youtubeSC($atts) {
	$posttext = substr($atts[0],1);
	preg_match('/v\=([a-zA-Z0-9]+)/', $posttext, $youtubeID);
	preg_match('/w\=([0-9]+)/', $posttext, $width);
	preg_match('/h\=([0-9]+)/', $posttext, $height);
	
	return '<iframe width="' . $width[1] . '" height="' . $height[1] . '" src="http://www.youtube.com/embed/' . $youtubeID[1] . '" frameborder="0" allowfullscreen></iframe>';
}

Hope that helps!

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:

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.

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:

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.