7 Steps to Embedding Vine Videos on WordPress and Let Them See the Real You

Note: If you don’t see the twitter wrapper below (video #3), please click on the title of the article to go into the article post where it will show up. Android and chromebook users have reported the first two videos have issues displaying, use instructions for twitter wrapper if you can’t see videos in the article.

Yesterday the new Vine app went viral. I saw this on Chris Brogan’s website.

I downloaded and in 10 seconds I understood how it worked, and 30 seconds later I posted my first Video. Take a look:

Are you dizzy yet? Well, after a few more experiments, I thought about how to build personality and immediacy with the new app, and I decided to share this vine video with you to show you my still lingering holiday decorations.

In six seconds you get a sense of my world, who I am and in a way that doesn’t require lots of video equipment, and could be anywhere.

How I Embedded This Video

Here’s the six steps to embed vine videos on your wordpress website.

1. Download the app, learn the process and create Video.
2. Email link or message link to yourself. Looks like this: http://vine.co/v/b5I6xOehnzK
3. Go to website after clicking on the link. Right click and view page source.
4. Scour code to find link with /card at the end of it. (Looks like this:) <meta property=”twitter:player” content=”https://vine.co/v/b5I6xOehnzK/card”>
5. Copy the content link and apply this code (in wordpress.com) using this source code: <iframe src=”REPLACE CODE HERE” width=”380″ height=”380″ frameborder=”0″>
NOTE: You need to have iframes enabled for WordPress to have this work.
6. Save draft, and preview post.
7. Like it? Publish it. If not, start over.

NOTE: I found not every video will embed. I am not sure if it’s due to server traffic, or if the video code is glitchy. Experiment and see what works for you.

Easy But With A Wrapper

Here’s an easier way to do it, but it has the twitter wrapper.

1. Download the app, learn the process and create Video.
2. Email link or message link to yourself. Looks like this: http://vine.co/v/b5I6xOehnzK
3. Tweet with the vine.co link in the tweet.
4. Go to twitter.com, find the tweet in your time line, and click on the MORE link below the tweet, then embed link.
5. Copy the sourcecode to wordpress and apply to your post.
6. Save draft, and preview post.
7. Like it? Publish it. If not, start over.

Here’s my example with the twitter wrapper of yours truly:

Who’s that kid? #chrismontoya vine.co/v/b5I6xOehnzK

— Christopher Montoya (@ChrisMontoyaNet) January 25, 2013

And Now a Challenge for Vine Users

How can you best showcase your personality? I want to see it.

Want to have your best vines show up on my site in a top three post? You could win a guest post spot to have me write an article around your vine video.

Simply create a vine with the hashtag #chrismontoya or @chrismontoyanet and post the link in the comments section.

I will choose three videos from the comments section to feature in a future post.

Ready for the challenge? Go!