Updated Feb. 23, 2013 – I’m no longer recommending method #2 below as this method asks users to download the MP4 file, which will freak them out.
The hottest social tool on the Web is the new Vine application for the iPhone. Vine was purchased by micro-blogging site Twitter and now Twitter Web and applications are adding support for the tiny 6-second looping videos.
As more and more users start creating Vine videos and sharing them on social sites, content creators and especially bloggers are going to want to find different ways to access and share the videos.
Here are four ways to add Vine videos to your blog post. While these methods were tested on a self-hosted WordPress blog, any blog owner should be able to find at least one method that works on your blog whether it’s a Tumblr blog, WordPress.com, Blogger or anything else.
The first way to add a Vine video to your blog post is by embedding an entire Twitter tweet.
1) From your desktop computer, go to the tweet that contains the Vine video. If you don’t know how to get to a specific tweet, usually clicking on the tweet date/time on a Twitter application will take you to the single tweet.
2) On Twitter Web, click on the “…More” link next to the “Favorite” link.
3) Click on the “Embed Link” button option and you’ll see the embed code.
4) Add that code to your blog post, save it and the entire tweet, including the video will appear on your blog post.
Updated Feb. 16, 2013
HOT TIP: If you are trying to embed a tweet into a WordPress.com blog, simply paste the tweet URL on its own line into the HTML or “Text” tab. If you post it into the “Visual” tab it will only show a link for the Vine video. I just created a Vine video as a quick visual tutorial: https://vine.co/v/brI7pTPb3qU.
See the Vine video below for a 6-second video demo.
Embed a Twitter tweet:
Embed a Vine video on your blog by embedding a whole Twitter tweet. #howto #tech vine.co/v/b1DH1tMlKhn
— Jesse P. Luna (@jesseluna) February 3, 2013
The second method is to get the direct link to the Vine video then add it to your blog in an HTML iFrame.
Update Feb. 23, 2013 – I’m no longer recommending this as an option. In some Web browsers it asks users to download the file. No bueno.
To do this:
1) Navigate to the Vine video on a Twitter Web tweet using your desktop computer
2) Right mouse click and select “Copy video URL”
3) Go to your blog and paste that code into the src tag in your iFrame code on your blog post. You will need to be in “HTML” mode to add that code.
This method of adding videos using and iFrame can be improved by having a video plugin with different options like the ability to mute or the option to turn off looping on initial load. When this page is loaded, this is the only method that will automatically make the video play with the audio on.
The third method is to add Vine videos to your blog as a YouTube video.
1) Go to a Vine video using your desktop computer
2) Right mouse click and select “Save video as” and save it to your computer
3) Go to your YouTube account and upload the saved video as you would any other video
4) Once you upload the video, click on the Share link and get the embed code as you would for any other YouTube video.
5) Paste that code into your blog post’s HTML view, save and that’s it.
This method also works on WordPress.com sites which play nicely with YouTube.
Embedding vine + Tumblr
Use this fourth method and add Vine videos to your blog using the Vineit bookmarklet.
1) Go to Vineit.co
2) Drag the blue Vineit button to your bookmarks section on your Web browser
3) Then when you get to your or someone else’s Vine video, click on the Vineit bookmark and then you can hover your mouse over the video and click on the “Embed” button to copy the code.
4) Paste the code into your blog and you’re good to go. You will also have the option to Share on Tumblr when you mouse over the video!
Share on Tumblr and Embed view:
Hat tip to this Techofy post for the tip on using Vineit.
So there you have it, four ways to add Vine videos to your blog. I really like the YouTube method because I have the most control and familiarity with using YouTube but the embedded Twitter tweet shows the most “social proof” because it contains the rest of the tweet information and shows who tweeted it. The VineIt bookmarklet is probably the best bet for Tumblr bloggers and the embedded iFrame method is best for folks who want to take further steps and create a custom viewing experience.
While you’re out there filming vine videos (I believe people are calling them “vines”), feel free to connect with me. You can find me by searching over “jesseluna”. Happy Vining and happy blogging!