How to embed Vimeo’s Badge widget

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail

The badge widget of Vimeo shows thumbnails of your video collections on your post or page.  Once embedded on your site, just like the HubNut widget, when you change settings in Vimeo, the changes reflect on your pages immediately.

The Badge widget has been replaced by the Montage widget, therefore this tutorial is obsolete.
View the tutorial How to create a Vimeo widget instead.

Selecting and customizing your widget

Go to www.vimeo.com and log into your account. At the top navigation on the right, select Tools, and then  Make Widgets.

Setting up the Badge widget

To set it up, click Customize this, next to the thumbnail of the Badge widget:

Customize the Badge widget

When you click on that link, a new panel opens on the same page, on the right of the widget thumbnails.
As you can see below, there are a couple of options and below that a preview:

Customize Badge

The first drop down menu, Choose a video stream, gives exactly the same options as with the HubNut widget.  I discuss those here again, one by one.

  • My videos(uploaded only) are all the uploaded videos on your account.  It’s not clear to me what the difference is between the two options of My videos.  Perhaps the second version shows any videos, even those not uploaded by you?
  • My subscriptions are the videos from channels or accounts you subscribed to, comparable with subscriptions on YouTube.
  • My Channels will show all videos in one of your own channels.  If you do not select a channel, the widget will show thumbnails of channels themselves if you have more then one.
  • My albums is a set of videos you selected on Vimeo and placed under one folder (album).  These can be videos from other vimeo members, eventually mixed with your own.
  • My likes are like favorites on YouTube.

In this widget you also get an extra drop down list when you select  My channels or My Albums.
Changes to any of the fields in this section show up real time in the preview below it. In this example, I’m going to select My albums.

Customize the Badge widget

As you can see, a new dropdown list appears with all the albums I currently have.  I’m going to select Artwork I like. In the preview window below it, you get to see the videos from that album.

OK, having done that, we go to the next option: Layout. Here you can chose to show the videos next to each other(Horizontal) or Vertical.  Vertical is interesting to show in a sidebar or side column, while Horizontal is better suited as page content, usually in the middle:

Badge layout

Below that, you have the Number of videos.  As you can see in the sample above, I limited the set to 8 videos, otherwise it would show more videos.

Further, you can set Show video titles to Yes or No. Below you see a sample with titles turned on.  As you can see, it looks a bit unruly, even in the configuration page of Vimeo:

Set Titles to Yes

When I tested the code for this setup, it looked even worse on my site.  The result without the titles appears to be much better.  You can adapt the thumbnail settings with css, but that is quite advanced stuff as you need to know how to work with CSS styles.  I would say, test it out on your site, if it looks fine, keep the titles if you like, otherwise, just leave them off.

Get the code!

Click on the  Get Code button. A dialog box opens, showing a field with selected text (in blue), like this:

Vimeo Badge Code

  1. If the text is not selected for some reason, click in the middle of the field.  That should select the text again.  If not, press CTRL+A (Windows) or Command+A (MacOs) to select all text in the field. When selected, copy it by pressing CTRL+C (Windows) or Command+C (MacOs).
  2. Go to your website or blog and open the page or post where you want the widget to appear.
  3. Set the page/post to html mode, this doesn’t work in visual mode (WYSIWYG).
  4. Set the cursor exactly where you want the widget and paste the code by pressing CTRL+V(Windows) or Command+V(MacOs).  If you are on WordPress, the safest thing to do is to wrap the code between code tags <code></code> after you pasted it, like this:

<code>
<!– START Vimeo Badge … info at http://vimeo.com/widget –>
<style type=”text/css”>
<!–
/* You can modify these CSS styles */
.vimeoBadge { margin: 0; padding: 0; font: normal 11px verdana,sans-serif; }
.vimeoBadge img { border: 0; }
.vimeoBadge .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color:#3A75C4; text-decoration:none; cursor:pointer; }
.vimeoBadge a:hover { color:#00CCFF; }
.vimeoBadge #vimeo_badge_logo { margin-top:10px; width: 57px; height: 16px; }
.vimeoBadge .credit { font: normal 11px verdana,sans-serif; }
.vimeoBadge .clip { padding:0; float:left; margin:0 10px 10px 0; width:100px; line-height:0; }
.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width:100px; }
.vimeoBadge .clear { display: block; clear: both; visibility: hidden; }
–>
</style>
<div class=”vimeoBadge”>
<script type=”text/javascript” src=”http://vimeo.com/rudolfboogerman/badgeo/?stream=album&stream_id=43923&count=8&thumbnail_width=100&show_titles=no”></script>
</div>
<!–END Vimeo Badge–>

</code>

Sometimes, WordPress wipes away part of the code after you saved the post. Putting the code between code tags tells WP to leave the code alone.

And here is the Badge widget, with the code above:

When you click on one of the thumbnails, it brings you directly to the Vimeo network itself, on the the page of the creator of the video.  Since the videos in this group are from an album collections, all videos are from different people.  This way, you can create sets of videos for a certain subject or whatever kind of category you want to create.

See also: How to embed Vimeo’s HubNut widget

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail

12 thoughts on “How to embed Vimeo’s Badge widget

  1. This is very helpful. However, I cannot post that widget into my wordpress using the tags. Is there another way to do it, so that wordpress will accept the vimeo widget code? Thanks!

  2. Hi,
    even if I use the the pugin doesn't work and WordPress wipes away the code after saving.
    why is that? is there any other solution to embed the widget?
    Thanks!

  3. Hi Marco,

    It depends which version of WordPress you are using. If it is an older one, like version 2.0, it is possible that the trick with the tags doesn't work. In that case, I would upgrade to the latest version.

    If you have a more recent version, from 2.5 onwards, you should be able to add the code without problems. Keep in mind to work in the HTML editor, yes? Not in the Visual mode. However, if you are using Firefox 3.0 or higher, weird things can happen to written content in WP. If that is the case, try adding the code with IExplorer or Opera (http://www.opera.com/).

    In any case, the Vimeo badge code cannot be used in combination with the Flash Video plugin because it uses native javascript.
    If you like, you can create a temporary administrator and send the login and password to me so that I can have a look in your WP installation. Let me know if that works and I'll give you an email to send those details.

  4. Hello,
    This is good info for me. BTW I want to change that I you click on one of the thumbnails, it has to redirect to vimeo with “NEW WINDOW” not in the same page.
    In the widget code, I can’t use Target_blank. it doesn’t work. Do you have any idea?

  5. Hi Costrama,

    I’m afraid there is no option to do that because you do not have actual links in the code you can influence.

    But I can see your point, and it would be an interesting feature request.

  6. Could you advice me how I can embed Vimeo badge on my Joomla website? The vimeo code doesn’t seem to work on joomla.

    Thanks

  7. Hi Hocky,

    Yes, Joomla is quite difficult in this respect as it removes most of the code.
    The easy way out would be to work with an iFrame and place the code in an html page or install an extension that lets you place javascript and css inline.

  8. Hi,
    When I add the badge widget to my sharepoint site, it displayes the videos old to new. I need it to display in the new to old order. This started happening about a year ago, wasn’t happening a year ago. Any ideas why?

    Thank you.

Leave a Comment

S3Media Stream 7 banner
Do NOT follow this link or you will be banned from the site!