A Guide to Creating Book Display Widgets

From WikiThing

Jump to: navigation, search
LogoLTFL small.gif

LibraryThing for Libraries Wiki

Main wiki page | Web page

Book Display Widgets allow you to create virtual book displays on your website. Click a book on the widget and it will link into that item record in your catalog. Create as many different Book Display Widgets as you like, and configure each of them individually.

Watch a video about creating a Book Display Widget:

Looking for inspiration?


Quick Start Guide

There are a few things you should do before you make your first widget. They are:

  • Upload your holdings

If you would like to upload your holdings to be able to use the whole set of data-sources available for Book Display Widgets, information on uploading your holdings data is in steps 1-3 in the instructions for each OPAC. Select your OPAC here.

Of course, if you want to dive right into making widgets and putting them on your website, you can always use three of the data-sources without uploading anything: List of ISBNs, RSS feed, or Webpage.

  • Set your ISBN URL

Setting up your ISBN URL is how your Book Display Widget links from your widget to your catalog. Further instructions are here.

Create a widget

Step 1. Show What Items?

Choose your data source

What kinds of items do you want your widget to show off? Choose from the drop-down list.

  • List of ISBNs. Paste a list of ISBNs to select from.
  • List of ISSNs. Paste a list of ISSNs to select from.
  • List of UPCs. Paste a list of UPCs to select from.
  • Webpage. A URL from which we gather ISBNs.
  • RSS feed. An RSS URL from which we gather ISBNs.
  • LibraryThing.com User. Draws from data you've previously entered into a LibraryThing.com account.
  • Items tagged. Draws from LibraryThing for Libraries' 90+ million tags—tags like "chick lit," "paranormal romance," "American history." "Tagmashes," the intersection of two tags, such as "romance, zombies" are also possible.
  • Series. Items from one or more series, drawn from LibraryThing for Libraries series coverage.
  • Awards. Items from one or more awards, drawn from LibraryThing for Libraries awards coverage.
  • Publication date. Items published within a specified date range.
  • Call numbers. Items within a given call-number range or ranges.
  • Popular. Items popular in your library and libraries like yours.
  • All holdings. Anything in your library's holdings.
  • Genres. Books within the preset genres established by BookPsychic. Requires a BookPsychic subscription.

Note: All but "List of ISBNs," "List of ISSNs," "List of UPCs," "Webpage," "RSS feed" require holdings uploaded to LibraryThing for Libraries.

Data preview

Click "view items" to see which ISBNs we've found. Click "refresh data" if you've changed your data selection and want to refresh the data preview.

If you'd like to exclude specific titles from your widget, just click the red "exclude" button in the view data window.

Using Annotations

In "view items," each item has a text box in the column "Annotations." Add your annotation to the text box and click "Save Annotation" for each item you wish to modify. The annotations box will accept most HTML tags, including <br> <img> and <a href> so you can add multi-line annotations, include images, and link to other content.

Make sure to return to the widget edit page and *save the whole widget* when you are done adding and saving annotations.

Step 2. What should it look like?

Choose your display

The next step is to choose your display. There are four display types (see examples here ):

  • Dynamic Grid
  • Carousel
  • Scrolling
  • 3-D Carousel


Depending on the display type, this section includes settings for cover size, speed at which the widget moves, number of covers to display, and others.

For Carousels and Scrolling, you also have the option to change your widget to a vertical orientation.

You will always have these options:

  • Custom HTML to output. Use this to add text or other HTML around the widget. For example, to add a header before the widget, use:
    <div class="myclass">New books [[WIDGET]]</div>
  • Custom CSS to apply. You can add CSS here or on your containing HTML page. Examples of the kinds of things you might want to use custom CSS for include adding a border around book covers, changing the size, color, font of the title/author text, and so on. For example:
title-text {color: #00707C;}
  • Manually Setting Widget Height and Width.

If the widget auto-resizing doesn't work well for your page, you can manually set a widget's height and width by pixel size (screenshot below). You can modify both height and width, or just one. Please use this option to modify widgets with extra whitespace at the bottom (such as seen in LibGuides). You do not need to put "px" at the end of each height or width; our code does that for you. A note: if you had previously been using the method that involved manually setting the height of a widget in the Global Configuration, you will need to delete that code in order for this current sizing method to work optimally.

Height width manual.png

  • Mobile Responsive Widgets Our widgets are set to automatically resize with the constraints of the page they are loaded on. If you make sure that the setting "Automatically resize widget to space" is set to "on" our widgets should be mobile responsive.

  • Showing Book Details.

If you wish to show more information about a given title, such as publication date or summary, choose "yes" for the option labeled "Show detail about the item on clicking." Book Details is where your Annotations will appear, fi you've added any (see "Using Annotations" above). Not all items will have summaries. Below that, you can change the text for the button to click into your catalog. The default is "View in Library," seen in screenshot, below:

Bdw summaries screenshot.png

Step 3. Preview

Preview shows the widget as you build it.

Note that changes you make will not save unless you click "Save Settings."

Step 4. Name and Save

Name and save the widget.

Step 5. Get HTML

Once a widget is saved, the "Get HTML" box will populate with the code you need to add the widget to your library's webpage.

You can change how a widget works or looks after you put it on an HTML page. Just find the widget by name on your list of Book Display Widgets and edit it.

Adding Your Widget to Your Library's Webpage

Get and paste the code

You can include as many widgets as you like on any given page. There are two elements that you'll need on each page you include a widget on:

1. Add JavaScript.
Your Javascript code is located on each widget configuration page. You only have to copy the Javascript once per page. So, if you have two widgets on the same web page, you only need one Javascript code snippet.

2. Add the HTML for each widget.
Paste the HTML for a widget wherever you want it to appear on your website. The HTML code can be found under "Step 5. Get HTML" on each individual widget's configuration page.


<div class="ltfl_bookdisplay_widget" id="ltfl_widget_XXXXXXXXXX"></div>

Using Easy Sharing to embed images on Social Media

Easy Sharing lets you grab a picture of a widget to put on your Facebook, Twitter, or Pinterest.

1. Mouse over widget to make a camera icon appear in the lower right corner. Click on the camera icon.

2. Select a size for your widget.
The default is 100% of your widget's size. We have included options for the best size ratios to use in posts on Facebook, Twitter, and Pinterest. The Easy Sharing box should grey-out while we generate a newly sized image.

3. Download the image or link to the image.
Click on either the link icon or the download icon to access your image. In general, we have found that downloading is best for Facebook and Twitter (you can then upload a photo into a post or tweet), while linking works best for Pinterest (create a new pin and import image from link).

Embedding Widgets in Blogs

You can embed widgets in blog platforms that allow for third-party Javascript into posts. This includes Tumblr and Blogger. Generally, you would place both the Javascript and HTML generated for each widget into the HTML-view of post-creation. We have found that it helps if both the Javascript and HTML are on the same line.

Wordpress and Book Display Widgets

You cannot embed Book Display Widgets on blogs hosted on Wordpress.com. Here's Why.

You can embed widgets into websites that use the Wordpress.org CMS system, using the Raw HTML plug-in.

If you have Wordpress.com blog, but are hosting it on your own server, as we do here, you should be able to embed widgets.

More Information

View all widgets

You can view a list of all the widgets you've made by clicking on the "Enhancements" tab, and then "Book Display Widgets." Here you can also set individual widgets to testing status, and turn them on and off.

Set your ISBN-based URL

To allow your widget to link into your catalog, make sure you set your ISBN-based URL. If you use other LibraryThing for Libraries widgets, you have already done this. The ISBN-based URL can be found on the "Enhancements" tab, under "Configuration" > "Global configuration."

  • Fill in your ISBN-based URL. This URL will be used to link from the items in the widget to your catalog. Using this template, fill in the sections appropriate to your URL, like your server name. MAGICNUMBER in the string will get replaced with the ISBN to create a link to that item.
  • You need to figure out what URL can have an ISBN added to it to show you the bib record for that item. Put the placeholder MAGICNUMBER where the ISBN will be filled in:
For instructions for your specific OPAC, please visit this page and find your OPAC. ISBN instructions are Step 5. Please let us know if this doesn't work, and we can help you fix the problem.
  • Click "Save settings."

Using the Custom Cover URL option

You can use your own custom cover URL to augment our default cover service. A custom cover URL is a URL based on an ISBN (or UPC or ISSN) which directs to a cover for the item with that ISBN.

The option for using a custom cover URL is located under "Display" in each widget's edit page. Paste your custom cover URL into the text-box provided. An example of a custom cover URL is here:


In that URL, you would replace the ISBN at the end with the word "MAGICNUMBER" so we can use it with your widget. So you would put this into the text box:


We will then check the custom cover URL for image availability and load the images into your widget. This might take a few minutes. When we have found all of the images, you can look to see what items are drawing from which cover service by clicking "View Items" in the Data Preview section.

Testing Book Display Widgets

Each of our enhancements has a "testing" mode to use if you don't have a testing or development server of your own. The control for this feature is on Book Display Widgets is on the list of Book Display Widgets.

After turning a widget to "Test," the enhancements only show up if you manually add &testing=1 to the end of the URL of the page(s) you are putting the pages on.

For Example, if you wanted to put a Book Widget on a specific URL:


Now modified to show testing widgets:


With testing on and &testing=1 in the URL, everything will look and work the way it would if it were live.

If you are using a development server, just make sure your widgets are in the "on" position.

Adding Your Widgets to Facebook

Read the instructions here on how to add a tab on your Facebook page and populate it with Book Display Widgets.

You are using the new servers! | About | Privacy/Terms | Help/FAQs | Blog | Store | APIs | TinyCat | Legacy Libraries | Early Reviewers | Common Knowledge | 116,022,589 books! | Top bar: Always visible