Advertisement
Articles

Using Shortcodes to Speed Up Posting with Popular Services

by

Today, we're going to look at how to use shortcodes in conjunction with a variety of popular services - including sites like YouTube and Flickr by first recapping how to create a shortcode, and then how to convert that third-party code into something that can be repeated and manipulated.

We've covered shortcodes already here at WPTuts+, discussing the advantages of using them and how to actually, well, use them. Shortcodes are effectively shortcuts (as defined by WordPress themselves) that allow an outcome to be achieved repeatedly with the least work possible. In their simplest form, a shortcode includes some code you've hooked into WordPress in another file, sometimes the product of a third-party, such as a YouTube video or a Flickr stream.


Recap: Creating a Basic Shortcode

If you're not familiar to shortcodes, then you should probably stop reading this article and check out one of the other articles we have here at Tuts+ about shortcodes in WordPress.

A shortcode is created by adding a function to your functions.php file, and then linking it up as a shortcode. The example below creates a link to the AppStorm hub.

function link_to_appstorm($atts, $content=null) {
    return '<a href="http://www.appstorm.net">AppStorm</a>';
}
add_shortcode('appstorm', 'link_to_appstorm');

To use it, we use the simplest form of a shortcode with no attributes.

[appstorm]

We can take this idea further by introducing an attribute, in which to specify a specific AppStorm site to link to.

function link_to_appstorm($atts, $content=null) {
    extract(shortcode_atts( array('site' => 'www'), $atts));  
    return '<a href="http://' . $site .  '.appstorm.net">AppStorm</a>';
}
add_shortcode('appstorm', 'link_to_appstorm');

The time, the shortcode is linking to a subdomain of AppStorm. We specify which subdomain by adding the site attribute. If there is no attribute defined in the shortcode, the shortcode defaults it to www which just links back to the main homepage. The usage example below would link to iPad.AppStorm.

[appstorm site="ipad"]

As you can see, shortcodes are pretty self-explanatory. What we want to do, however, is use the same basic principle of a link generated by a shortcode with an attribute to use in conjunction with a third-party service like YouTube or Flickr.


From Embed to Shortcode

Converting a static third-party piece of code to a shortcode is pretty similar to the method used to create a link. Simply, we're going to create a function that returns the code as a shortcode and then throw in a few attributes to customise it.


Step 1. Creating A Non-Variable Shortcode

The first step we should take is to take the regular embed code, and create a simple return function out of it.

function youtube_video($atts, $content=null) {
    return '<iframe width="640" height="360" src="http://www.youtube.com/embed/caYu-Lf9A4Y?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');

Usage

[youtube]

In the same way we created that first, non-variable link in the first example, the piece of code above embeds a YouTube video that will not change at all. And how it does that is pretty self-explanatory too.


Step 2. Introducing Some Attributes

Essentially, the piece of code in the previous step will produce a result identical to if the returned code was pasted into the editor itself. Unless you are going to be regularly embedding the same video over-and-over again, this shortcode is probably useless. Therefore, we want to introduce some attributes to translate into parameters for the iframe.

In order to achieve this, we once again use the extract() function to pull attributes in from the shortcode. In the code below, we do this in a basic form by only creating an attribute to replace the video ID.

function youtube_video($atts, $content=null) {
    extract(shortcode_atts( array('id' => ''), $atts));
    return '<iframe width="640" height="360" src="http://www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');

Usage

[youtube id=""]

And, just like substituting the video ID, we can do the same for the width and height. This is the time you'll want to make sure you're providing default values for, however, in case the user doesn't provide a width or height value.

function youtube_video($atts, $content=null) {
    extract(shortcode_atts( array(
        'id' => '',
        'width' => '640',
        'height' => '360'
    ), $atts));
    return '<iframe width="' . $width . '" height="' . $height .'" src="http://www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');

Usage

[youtube id="" width="" height=""]

Step 2b. Additional Parameters

YouTube does have additional parameters that can be added to the URL, such as autoplay. Obviously, these can be applied to the returned code too, with their own attribute if necessary. Generally, this is self-explanatory and is demonstrated below (added parts are in bold).

function youtube_video($atts, $content=null) {
    extract(shortcode_atts( array(
        'id' => '',
        'width' => '640',
        'height' => '360',
        'autoplay' => '0'
    ), $atts));
    return '<iframe width="' . $width . '" height="' . $height .'" src="http://www.youtube.com/embed/' . $id . '?autoplay=' . $autoplay . '&rel=0" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('youtube', 'youtube_video');

Usage

[youtube id="" width="" height="" autoplay=""]

Step 3. Done!

It really is that simple, and, as you'll see in the following roundup, the same basic method can be used to create shortcodes for other third-party services.


Additional Examples

All these third-party embeds have been created by using the same steps as above. Of course, like in step 2b, additional parameters can be added at will.


Vimeo

A Vimeo video is embedded in pretty much the exact same way as a YouTube video, through an iframe with width and height variables. The only addition is the color variable to customize the player.

function vimeo_video($atts, $content=null) {
    extract(shortcode_atts( array(
        'id' => '',
        'width' => '640',
        'height' => '360',
        'color' => '59a5d1'
    ), $atts));
    return '<iframe src="http://player.vimeo.com/video/' . $id . '?color=' . $color . '" width="' . $width .'" height="' . $height . '" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>';
}
add_shortcode('vimeo', 'vimeo_video');

Usage

[vimeo id="" width="" height="" color=""]

Twitter (Profile)

The Twitter profile widget is a piece of JavaScript, with a ton of different attributes, all substituted for shortcode attributes in the code below. Because there is so many, you may want to remove some and replace them with constant values (such as styling) in the actual JavaScript, or just change the default attributes in the array and forget about using them in the shortcode.

function twitter_widget($atts, $content=null) {
    extract(shortcode_atts( array(
        'username' => '',
        'width' => '300',
        'height' => '200',
        'tweetnum' => '4',
        'shellbgcolor' => 'cccccc',
        'listbgcolor' => 'eeeeee',
        'textcolor' => '333333',
        'linkcolor' => '639ee3',
        'hashtags' => 'true',
        'scrollbar' => 'true',
        'loop' => 'false',
        'stream' => 'false',
        'avatars' => 'false',
        'timestamp' => 'false'
    ), $atts));
    return '<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: "profile",
  rpp: ' . $tweetnum . ',
  interval: 30000,
  width: ' . $width . ',
  height: ' . $height . ',
  theme: {
    shell: {
      background: "#' . $shellbgcolor .'",
      color: "#' . $textcolor . '"
    },
    tweets: {
      background: "#' . $listbgcolor .'",
      color: "#' . $textcolor . '",
      links: "#' . $linkcolor . '"
    }
  },
  features: {
    scrollbar: ' . $scrollbar . ',
    loop: ' . $loop . ',
    live: ' . $stream . ',
    hashtags: ' . $hashtags . ',
    timestamp: ' . $timestamp . ',
    avatars: ' . $avatars . ',
    behavior: "all"
  }
}).render().setUser("' . $username .'").start();
</script>
';
}
add_shortcode('twitter', 'twitter_widget');

Usage

All of these shortcode attributes have defaults, except the username which is required. As to what to actually put in the attribute, they are all self-explanatory up to hashtags in which the rest are just true/false.

[twitter username="" tweetnum="" width="" height="" shellbgcolor="" listbgcolor="" textcolor="" linkcolor="" hashtags="" scrollbar="" loop="" stream="" avatars="" timestamp=""]

Tweet (Button)

The Tweet Button is a popular social sharing button for Twitter.

function tweet_button($atts, $content=null) {
    extract(shortcode_atts( array(
        'username' => '',
        'url' => '',
        'style' => 'none'
    ), $atts));
    return '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' . $url . '" data-count="' . $style .'" data-via="' . $username . '">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>';
}
add_shortcode('tweetbutton', 'tweet_button');

Usage

The tweet button's first two attributes are not really ambiguous. The last one sets the style for the tweet button, either horizontal, vertical or none.

[tweetbutton username="" url="" style=""]

Facebook Like and Send Buttons

Like the Tweet Button, the Like and Send buttons are the social sharing buttons for Facebook. Please note these buttons also need the JavaScript SDK referenced somewhere on the current page.

function facebook_buttons($atts, $content=null) {
    extract(shortcode_atts( array(
        'width' => '450',
        'showfaces' => 'false',
        'colorscheme' => 'light',
        'font' => 'arial'
    ), $atts));
    return '<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like send="true" width="' . $width .'" show_faces="' . $showfaces .'" colorscheme="' . $colorscheme . '" font="' . $font . '"></fb:like>';
}
add_shortcode('like', 'facebook_buttons');

Usage

The different attributes for use are explained on Facebook's associated page, but essentially, the width is written in the same format as before, showfaces is a true/false value of whether to show faces of the "like-ees", colorscheme is either dark or light and font is, well, a font.

Since the XFBML will automatically target the current page, it's not necessary to have any attributes in use, meaning the shortcode can be as simple as the below example.

[like]

Flickr Badge

The Flickr badge is a way of displaying your recent photos from Flickr. Unfortunately, the Flickr widget comes with it's own CSS (although you can easily move this into your stylesheet), and uses tables for layout. Once your finished being highly frustrated over this practice, here's the shortcode.

function flickr_widget($atts, $content=null) {
    extract(shortcode_atts( array(
        'userid' => '',
        'num' => '3',
        'sort' => 'random',
        'size' =>
    ), $atts));
    return '
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=' . $num . '&display=' . $sort . '&size=m&layout=h&source=user&user=' . $userid . '"></script>
</tr>
</table>
</td></tr></table>
';
}
add_shortcode('flickr', 'flickr_widget');

Usage

Flickr's widget has four basic variables, the userid is the user's id (in the format of 12345678@N01), the num is the number of photos shown, the sort is either latest or random and relates to how the photos shown are determined and the size is either s (a small square), t (a thumbnail) or m (medium).

[flickr userid="" num="" sort="" size=""]

Wrap-up

Hopefully i've explained how to create a shortcode in the context of a third-party service. It is fairly simple, we just need to work out how the original code works and swap out static variables for attributes. This saves time, but, perhaps more importantly, means that the code can be modified at a later date whilst maintaining the parameters allowing you to change, say, the width at a later date across all uses of the particular shortcode.

Related Posts
  • Code
    Plugins
    Displaying Information of a WordPress.org Plugin on Your WebsiteWordpressdotorg plugin api border 400
    In the first part of this article, we discussed how to use built-in functions to communicate with WordPress.org and retrieve plugin details. In this tutorial we will put the theory in action to create a simple plugin which will allow us to display details of any plugin hosted on WordPress.org on our WordPress website using shortcodes.Read More…
  • Code
    Plugins
    Creating a Shortcode for Responsive VideoResponsive video shortcode main image 400
    If you're anything like me, you use YouTube to host any video you add to your WordPress site. It saves worrying about browser or device compatibility, it saves space on your servers, and it can be a lot more reliable.Read More…
  • Code
    Plugins
    Create a Shortcode to List Posts With Multiple ParametersPost listing shortcode main image400
    On many of the client sites I build, I find there are times when I need to include a post listing on a page. I'm not talking about archive pages here, but adding a custom listing to an existing static page. For example, I might want to list some posts on the 'About' page, or the site may require an in-depth page for a topic, with a list of posts and custom post types related to that topic. One way to do this is by creating a custom page template to include the current page content plus the results of a second custom query, but if you want more flexibility over how you list posts, or just want to do it a few times, a shortcode will be a simpler solution. In this tutorial, I'll show you how to create a simple shortcode to list all posts of a custom post type, and then I'll expand on that to create a shortcode with various parameters that users can specify to list posts however they want.Read More…
  • Code
    Plugins
    Multiple Shortcodes With a Single Function: 3 Killer ExamplesMultiple shortcodes with a single function 3 killer examples
    The powerful Shortcode API allows us to create "snippets" and include special content (such as PHP functions or complex HTML code) in our posts. It's extremely common to build separate functions for each shortcode, but is it really necessary? In this post, we're going to see how we can utilize more than one shortcode by building a single function.Read More…
  • Code
    Business
    Making the Best of Google AdSense in WordPressGoogleadsensepreview
    Blog monetization is not a "must", but it's a very important source of motivation. Whether you're blogging alone or along with some authors you gathered, earning even a few bucks a month can change your and/or your authors' approach to your blog. Since Google AdSense is one of the easiest and most popular ways for blog monetization, we're going to see how to use it with a WordPress blog with multiple authors. (Although, this tutorial will also work for single bloggers.) We'll be covering how to set up profile fields for authors' AdSense ads and how to display those ads with a function, with a widget, with a shortcode and automatically inside posts.Read More…
  • Code
    Tips
    Quick Tip: Your Own Video ShortcodePreview your own video shortcode
    You probably use a video embedding plugin or you just use the embed codes of video sites. But there's a third, easier way to embed videos in your WordPress site: a simple (but useful) video shortcode.Read More…