JavaScript-Enhanced Widgets
JavaScript Setup Code
Paste the following at the bottom of the page or if necessary, after every widget on the page. It’s best for performance if this part is embedded only once.
Snippet:
<script async="async" type="text/javascript">(function(){var e=document.createElement("script"); e.src="https://infosoup.bibliocommons.com/javascripts/sdk.js"; e.async=true;var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()</script>
User Navigation Widget (Top Menu Bar)
You’ve seen this bar on the top of every BiblioCommons catalog page, now you can add it to your own site -- no server-side coding necessary!
Snippet:
<div class="bc-widget bc-my-account-nav"></div>
Login / Logout (Top Menu Bar)
It contains the login / logout links, as well as links to the user's settings page.
If you want to change the color of the links, just add the attribute data-bc-widget-link-color:
Snippet:
<div class="bc-widget bc-login-nav-widget" data-bc-widget-link-color="#00F"></div>
Account Info (from user dashboard)
Perfect for your homepage or as a sidebar on select pages, now you can embed the user dashboard sidebar account summary on your own pages. This widget also doubles as a login form when users aren’t signed in.
Snippet:
<div class="bc-widget bc-account-widget" style="width: 300px;"></div>
Bib Item Widget
Snippet:
<iframe class="bc-widget bc-item-widget" src="//infosoup.bibliocommons.com/widgets/item/S123C456789" width="100%" height="192" frameBorder="0" scrolling="no" allowTransparency></iframe>
Bib Item Widget - Item Not Found
Snippet:
<iframe class="bc-widget bc-item-widget" src="//infosoup.bibliocommons.com/widgets/item/S987C654321" width="100%" height="192" frameBorder="0" scrolling="no" allowTransparency></iframe>
IFRAME-Powered Carousel Widgets
To add a carousel widget to your website you need to simply copy and paste the following lines of code into your webpage.
By using the code below you no longer have to download javascript or CSS to support the carousels and all updates that occur in the catalog will immediately be reflected on your site.
Recently Review Carousel
The following code produces the recently reviewed carousel.
Snippet:
<iframe src="//infosoup.bibliocommons.com/widgets/carousel_rr" height="315" width="550" frameBorder="0" scrolling="no"></iframe>
User List Carousel
To display a user list in a carousel your must know the list id.
To get the list id simply navigate to the desired list in a browser and copy the 2nd number that appears in the URL.
For example the carousel below was generated from the URL,
"http://opl.bibliocommons.com/list/show/1581266_gt/
82684829_visual_arts_for_preschool_guide".
The second number 82684829 is bolded. Simply replace the word LIST_ID with that number in the code snippet provided blow.
Snippet:
<iframe src="//infosoup.bibliocommons.com/list/list_browse/user/LIST_ID" height="315" width="550" frameBorder="0" scrolling="no"></iframe>
Adding a Search Form
Keyword only Search
This is the HTML code you can add to your site to search your BiblioCommons catalog by keyword.
Snippet:
<form action="http://infosoup.bibliocommons.com/search"> <input type="hidden" name="t" value="smart"/> <input type="text" name="q"/> <input type="submit" value="search"/> </form>
Searching different types
This form includes a select box with options for searching on keyword, title, subject, tag, author, lists and users. As new search types become available this page will be updated to reflect that but you will have to update the form manually on your site.
Snippet:
<form action="http://infosoup.bibliocommons.com/search"> <select name="t" id="t"> <option value="smart" title="Keyword">Keyword</option> <option value="title" title="Title">Title</option> <option value="author" title="Author">Author</option> <option value="subject" title="Subject">Subject</option> <option value="tag" title="Tag">Tag</option> <option value="userlist" title="List">List</option> <option value="user" title="User">User</option> </select> <input type="text" name="q"/> <input type="submit" value="search"/> </form>