Two more really useful shortcode hacks

We’re going to look at a simple way to add Facebook “like” buttons and embed YouTube videos into content, both of which use iframes and in both cases I’ve used the defaults but support for variations is included in the code.

The Facebook “like” button really only needs to know what page you’re on now which we obtain usingĀ  urlencode(get_permalink($post->ID)) and insert it into the standard Facebook code. You will see that I’ve also allowed variables for all the options within the Facebook Like code.

// facebook like

function facebook_like($atts) {
 'layout' => 'standard',
 'width' => '450',
 'height' => '25',
 'faces' => 'false',
 'colorscheme' => 'light',
 'action' => 'like',
 ), $atts));

 return "<iframe src=\"" . urlencode(get_permalink($post->ID)) . "&amp;layout=" . $layout . "&amp;show_faces=" . $faces . "&amp;width=" . $width . "&amp;action=" . $action . "&amp;colorscheme=" . $colorscheme . "\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:" . $width . "px; height:" . $height . "px\"></iframe>";
add_shortcode('facebook', 'facebook_like');

Using Facebook Like shortcode on your WordPress site

YouTube also uses an iframe to support embedding. I’m going to use the newer version of embedding because it’s simpler to implement but more powerful in the way it approaches video playback, favouring HTML5 video support but falling back to Flash if that’s unavailable.
For more details see the YouTube Blog

// youtube video

function youtube_embed($atts) {
 'embed' => '',
 'width' => '480',
 'height' => '390',
 ), $atts));

 return "<iframe title=\"YouTube video player\" class=\"youtube-player\" type=\"text/html\" width=\"" . $width . "\" height=\"" . $height . "\" src=\"" . $embed . "\" frameborder=\"0\" allowFullScreen></iframe>";
add_shortcode('youtube', 'youtube_embed');

Using YouTube embed shortcode on your WordPress site

This entry was posted in Hints and Tips and tagged , , . Bookmark the permalink.