Embed Vine in WordPress with Shortcode

  • follow us in feedly
Published May 4, 2013 by Brad Knutson
Embed Vine with WordPress Shortcode

Vine is a great new app from the makers of Twitter. Back in January, Twitter introduced the world to Vine, and it’s really taken off since then. Vine is an app that lets you post short video loops as updates. Much like Twitter, they limit the length of the video. The concept is actually really cool, and many have found it intriguing. Twitter describes Vine as:

…a mobile service that lets you capture and share short looping videos. Like Tweets, the brevity of videos on Vine (6 seconds or less) inspires creativity. Now that you can easily capture motion and sound, we look forward to seeing what you create.

Vine is built for viral content. I often times find myself scrolling through pages and pages of short videos. Some are extremely well put together, and very impressive. Others are gateways into the person on the other end. I feel like I’ve gotten to know people better through Vine.

Marketers have begun to realize the potential in Vine. We’ve been using Twitter for years, and many marketing firms add images and videos to their Tweets. YouTube has always been a great platform for marketing. So why not Vine?

Realizing the true potential of Vine, I’m all in. I recently created my account, and while I haven’t posted many videos, and I’m hooked. I began to think of ways to integrate Vine into other areas of my online life. Twitter already offers the quickest and easiest integration possible – but what about integrating Vine videos into blog posts?

Thankfully, Vine makes embedding videos very easy. Just take the URL of one of your Vines, and add /embed after it. You’ll be brought to a page that allows you to customize your embedded video and copy the embed code. Check out https://vine.co/v/bQX3p7WbpdY/embed to see what I’m talking about.

I looked deeper into the embed does, and realized that there was only a few variables required, and we could completely automate the process with a WordPress shortcode. What I ultimately wanted was a shortcode that took in a Vine URL, a type, and a size.

So I set out to write a shortcode function that did just this. Here it is below.

function vine_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'url' => 'https://vine.co/v/bQX3p7WbpdY',
		'type' => 'simple',
		'size' => '320',
	), $atts ) );
	if ( !( $type == 'simple' || $type == 'postcard' )) {
		$type = 'simple';
	}
	if ( !is_numeric($size) ) {
		$size = 320;
	}
	$embed = '<iframe class="vine-embed" src="'. $url .'/embed/'. $type .'" width="'. $size .'" height="'. $size .'" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>';
	return $embed;
}
add_shortcode( 'vine', 'vine_shortcode' );

That’s pretty much all there is to it. I set the default URL value to one of my own videos in case I ever forgot to set the URL.

I’ve built in a bit of error handling. If the type variable is not set properly, it’s overridden by the function and set to 'simple'. If the size variable is not a number, it’s also overridden and set to 320.

The only variable I didn’t check error handling for was the URL. If the user inputs an improper URL, the resulting iframe will be a 404 error page. One could write a regular expression to check for a proper Vine URL.

Here are a few examples. The first uses all the defaults, and the rest use unique values.

And finally, an example with some bad variables to check the error handling.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Embed Vine in WordPress with Shortcode

  1. Adriana

    Thanks! This was really helpful. I really want to incorporate some Vine videos into my Blog in the future for simple short tutorials.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">