Friday, 17 January 2014

Tempted to Embed a BiblioCommons Carousel on Your Blog?

Would anyone else be interested in learning how to embed a BiblioCommons carousel on your blog? I thought I would amuse myself by writing up a tiny tutorial (while listening to Owl City or Garou and playing Neopets on my other screen) ... Forgive my style throughout: most of the people I write tutorials for are cataloguers or technical services staff!

Step 1. Pick a user list on the library catalogue that you want to use. I'm using my Borrowed in 2014 list through this tutorial.

Step 2. Notice the URL for the list. In the URL, the number that appears before the words in the title of your list is the List ID for the list. Like the ISBN for a book, it uniquely represents this list. In this case, the List ID is 226006717
http://vision.bibliocommons.com/list/show/75445213_rainey/226006717_borrowed_in_2014

Step 3. Next, go to the widgets page for the library catalogue. This page is accessible to anyone, whether they are library staff or patrons, and whether they have a library account or not. (It's a useful resource if you are developing-- or having someone develop-- a web presence for your local library.) You will find this page at: http://vision.bibliocommons.com/info/integration/ 

(There is a similar page on any BiblioCommons catalogue, but by using the vision subdomain, you'll get code customized for our library catalogue. If you go to http://ottawa.bibliocommons.com/info/integration/  you will find similar snippets of code, but they'll work for Ottawa Public Library's catalogue.)

If you scroll down to the section labeled User List Carousel, you'll find this snippet of code:
<iframe src="//vision.bibliocommons.com/list/list_browse/user/LIST_ID" height="315" width="550" frameBorder="0" scrolling="no"></iframe>

Following the instructions there, replace the test LIST_ID with the List ID you found in Step 2.

That gives me the snippet:
<iframe src="//vision.bibliocommons.com/list/list_browse/user/226006717" height="315" width="550" frameBorder="0" scrolling="no"></iframe>

Step 4. To add the carousel to one of your posts, write the introductory text of your post normally with the Compose option selected in Blogger. But when you are ready to add your carousel, switch to the HTML option.

Paste your snippet of HTML at the bottom of your post:

Then, switch back to Compose mode and continue writing up your post with any closing remarks you feel like adding.

If you try this and it works, I'd be interested in knowing. If you try it and it DOESN'T work, I'd be REALLY interested in figuring out why!

7 comments:

  1. Thank you so much Lorriane! I followed your steps and was able to use the HTML script to make a widget so now my carousel on the top of my blog. Thanks again- great blog.

    ReplyDelete
  2. This is awesome, Lorraine! I'm going to try it now!

    ReplyDelete
  3. I just tried it on my blog. It's so neat!

    ReplyDelete
  4. Hi, Justin,
    Yes, there was a recent change to the carousels. BiblioCommons Support is aware of the impact on the widgets and are working on a fix for the issue.
    Thanks!

    ReplyDelete
  5. The fix has been deployed. My carousels are working again.

    ReplyDelete
  6. Thank you so much for posting this!

    ReplyDelete