Blogging, Business, How To, PRO_TIP, Social Media, Technology, Toolbox, Training, Twitter, Video

Four Ways to Add Vine Videos to Your Blog Post

Add Vine videos to your blog postUpdated Feb. 16, 2013,

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.

Embed vine videos by embedding an entire Twitter tweet1) 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:

 

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.

[example removed]

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.

Save video as1) 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.

This YouTube method gives you a lot of options because YouTube has a lot of options. You also may have invested a lot of time in optimizing the way you optimize YouTube videos. Check the Vine terms of use to make sure you have permission to post the video to your own YouTube channel, especially if you did not create the Vine video.

Embedding vine + Tumblr
Use this fourth method and add Vine videos to your blog using the Vineit bookmarklet.
Vineit button1) 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:

Share Vine videos on Tumblr using Vineit

Hat tip to this Techofy post for the tip on using Vineit.

Last Thoughts
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!

41 Comments on “Four Ways to Add Vine Videos to Your Blog Post

  1. Thanks for these instructions. I use wordpress for my blog. I was able to get the code for the tweet but when I put it in a blog post I just get a link, rather than the actual video. Any suggestions? Thanks!

    1. Great question Meri. There’s a trick. For the video embed to show up, you have to paste the link to the tweet in the “Text” mode (HTML mode). If you post it in the Visual mode, it will only show the link. I add a note to this blog post and created a Vine video tutorial: https://vine.co/v/brI7pTPb3qU. -Jesse

      1. thank you so much. i appreciate it. i followed what you said. i thought it had something to do with that, but still it just shows the link that you can click on to watch the vid. it doesn’t actually show the video in the post. could there be any other reason? thanks so much for trying!

        1. Hi Meri,
          Go back in, get into “Text” view, delete the tweet URL, paste it into a text editor like Notepad. Then make sure there is an entire line free on the post (still in Text mode) and cut and paste the link from the text editor. Make sure the link is on its own line and you don’t have to apply any HTML to it. Also, make sure there isn’t a “;” at the end of the link. Keep it in Text mode and Save/Update your post. It should work. I just posted a tweet to my text wordpress.com site – http://jesseluna.wordpress.com/2013/02/16/valentines-day-message-vine-style/. -Jesse

    1. Hi Brittany,
      If the Vine video has been posted to Twitter or Facebook then click on the link on that tweet or status update and it will take you to a Web page with the Vine video on it. Right mouse click on the video and select Save Video As and you can download it as an MP4 video. Method #3, the YouTube method, requires you to download the video as I just mentioned. -Jesse

    2. Also, if the Vine you are trying to download is yours, then you will actually have that Vine on your iPhone’s camera roll. From there you can email it to yourself, upload to YouTube, or just move it over after you connect to your computer via the USB cable. -Jesse

  2. Hi Jesse,

    I’ve managed to embed my vine video to my tumblr, it works if you watch it on a windows computer but not on anything apple….can i change anything to make it work on everything?

    1. Hi Emma, the YouTube method should work since you will just be embedding a YouTube video. I’ll have to test the tweet embed and VineIt methods on a Tumblr blog on an Apple computer. -Jesse

    1. Cool, Steve! Going with the YouTube method takes a little work but it is the most stable way right now. Plus, most bloggers know how to deal with YouTube embeds. -Jesse

  3. Hello Jess, great tutorial! :-)
    Do you know if its possible to get the direct link of a vine if I didn’t post it on twitter or Facebook when published?
    Thanks a lot!

    1. Hi Roc,
      There is no direct in-system link to a vine without posting it to Twitter or Facebook. However, once you create a Vine video, it will end up on your iPhone camera roll and you can share that video as you would any other one.

      By “in-system” I mean using the publicly available resources of Vine as opposed to hacking your iPhone.

      -Jesse

  4. Thank you so much for this post! It made it super easy for me to add a couple of Vine videos to my post! I’ll be putting it up tomorrow. It’s very neat!

  5. Thanks for the tips. I’ve been tearing my hair out to try and work out how to get my Vine into PowerPoint. Unfortunately it now doesn’t loop :(

    1. Hi Lexii,
      For Firefox, you have to do a little more work to download the video. 1) Right mouse click on the page (not on the video) with the Vine video and select “View Page Source.” 2) in the page source, search for “mp4” and copy the entire link. That should *not* be the link that also has .jpg in it. 3) Then paste that link into another Firefox tab and load the page. You should see the video. 4) Go to the File menu and select “Save Page As” and it will allow you to save the mp4 video. -Jesse

  6. Hey!

    I want the videos uploaded on a specific Vine channel to be displayed on my website automatically.
    How to do that?

    Thanks,
    Addy

    1. I don’t know of any plugins that will do that yet but there are some sites that provide that service. My site Vinormous.com can show custom channels but I have to configure things. I usually use the functionality to track hashtags during large events like the Oscars. -Jesse

      1. Hey!
        Thanks for the reply.

        I checked your website and was really glad to see that videos were getting updated frequently.I will presume that is dynamic, and if so, could you please tell me how can I do that for my website?

        Thanks,
        Addy

  7. Hey,

    I was trying to do the same as ^ but on your website vinormous.com also its not working .
    Have they stopped giving feeds??

    Thanks,
    Rahul

    1. As far as I know, Vine does not support sharing video downloads unless they have been posted to Facebook or Twitter. -Jesse

  8. My Vines work great on my WP blog–audio and visual. I copied my Vine address, selected New Link, and added it to a Category (called Vines). Trouble is, other participants on the blog can see the Vines, but they can’t hear them. Any suggestions?

  9. Hi –
    Was wondering whether there is a way to pull in Vine videos dynamically/automatically i.e. latest video from playlist?
    Have several embeds throughout the website and need to manually update each instance of it after creating new videos.
    Was hoping there might be something out there these days, that can help accomplish this.
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *