How to embed Vimeo’s Badge widget
By Rudolf Boogerman |
12 comments... Click to Contribute.
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.
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:
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:
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.
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:
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:
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:
- 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).
- Go to your website or blog and open the page or post where you want the widget to appear.
- Set the page/post to html mode, this doesn’t work in visual mode (WYSIWYG).
- 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
Topics: Blog stuff, Video Channels/Networks | Site search | Write comment
This article has 12 comments.
Related Articles:
12 Comments »
If you have any questions or suggestions, you can leave a comment on this article below. Comments are subject to an approval process before they are published. By posting a comment, you agree with the terms of use.
Subscribe to the RSS feed
September 21st, 2009 at 1:40 pm
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!September 21st, 2009 at 1:48 pm
Hi RSK,
Which version of WordPress do you have?
September 28th, 2009 at 6:19 am
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!
September 28th, 2009 at 6:19 pm
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.
March 10th, 2010 at 9:36 pm
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?
March 11th, 2010 at 5:37 am
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.
December 14th, 2010 at 12:07 pm
Great tutorial! It works easily. However, how do I get the video to play on my WordPress blog, without redirecting viewers to Vimeo’s website?
December 15th, 2010 at 10:39 am
Hi Chika,
With the Badge widget, you cannot do that.
But you can embed videos individually.
Here is the tutorial to do that: http://www.miracletutorials.com/howto-embed-vimeo
I hope this is what you are looking for?
August 22nd, 2011 at 4:50 am
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
August 23rd, 2011 at 9:57 am
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.
September 14th, 2011 at 6:54 am
These articles helps me very better than my expectations.
Hare Krishna & Thankyou very much.
January 5th, 2012 at 5:25 pm
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.