Welcome to Book Display Widgets Book Display Widgets allow you to create virtual book displays on your website, where covers link to that item’s record in your catalog. Bring your own lists of books, or combine your data with ours and show off award winners, series, and genres. Use our beautiful pre-set styles, or customize to your heart’s content. Create as many widgets as you would like, and configure each individually. This manual contains three sections:

1) A quick introduction to Book Display Widgets 2) Configuring your LibraryThing for Libraries account 3) In-depth widget creation instructions

A Quick Introduction to Book Display Widgets The widget creation process is separated into six different sections: Select Items, Results, Style, Preview, Save, and Embed. Select Items is where you choose which items go into your widget, and Results is where you refine and annotate those items. In Style, you select a display type and can modify from default settings. You can mix and match data sources and display types. Preview is where you can see what your widget will look like, and Save is where you name and save a widget. The Embed section gives you the code required for embedding a dynamic live widget on your website, or a static image to use on social media and newsletters. Select Items Choose which data source you would like to use. Examples of data sources are:

a Webpage, a List of ISBNs, Genre, or Awards. More information about each data source is located in the pop-out help section of the widget creation page. Results Shows at-a-glance information about items in the widget. Also shows any items excluded for lack of cover, and number of annotated items. To check over individual results or write annotations, click on the “See Details” button. Style Choose what you want your widget to look like. The four options are: 3-D Carousel, Dynamic Grid, Carousel, and Scrolling. Every display type can be customized, or you can stick to the attractive default settings. More options are available by clicking the “Advanced Options” button. Preview We show what your widget will look like when embedded on a webpage. Don’t like how something looks on your widget? Change it in the Style section above and see your widget change in this section. Save Remember to save your widget! You can always modify existing widgets after saving by opening them from your list of widgets. Embed This generates the code necessary to embed widgets onto your website or blog. There are two code snippets: Javascript—which allows the widget’s data to go through to your page—and HTML so we know where to put it. Additionally, this section generates a static snapshot of your widget for use in places where regular widgets cannot go, such as Facebook posts, Tweets, Pinterest, or email newsletters.

Multi Widgets and Facebook Integration You can create multi widgets that allow for multiple widgets to be in the same place, switchable in either tabs or a dropdown menu. Make a multi widget by first creating the individual widgets you want in the multi widget, then going to the multi widget section, creating a new multi widget, and selecting the widgets you want in it. You can then name the multi widget, choose a theme, and add your own custom CSS. Adding a multi widget to your web page or blog is done the same way as adding a regular widget. Add widgets to a Page Tab in Facebook through the Facebook Widgets section. Configure the widgets you want to use first, then connect while logged into a Facebook account that has administrative privileges for your library’s Facebook page. Configuring your Facebook widgets consists of selecting widgets to add to the Facebook tab and ordering them via drag and drop,

then customizing the appearance of your Facebook Page Tab with CSS. The main classes and IDs have been provided.

Customizing Your Widget Book Display Widgets have a set of default styles which are engineered to look good out of the box on most websites. However, if you would like to customize each widget, click on “Advanced Options” in the Style section to change additional aspects of the widget’s appearance. You have the option to use outside custom content in your widgets, integrating with other cover services and directing a particular widget to a different catalog or search type than the general one for the account.

Custom Covers Book Display Widgets come with covers, but you can augment this cover service with your own. To incorporate your library’s cover images, copy the URL of any cover in your service and replace the ISBN with “MAGICNUMBER,” e.g. http://www.coverservicehere.com/isbn/MAGICNUMBER. Then place this URL into the Custom Cover URL field in “Advanced Options” under Style.

Custom URL for the widget In most cases, widgets will use the account-wide ISBN URL to link into the catalog. However, in some particular cases, you might prefer to link to a different catalog or use a different search parameter. For example, you may want to link specifically to a classic catalog, or use a search for UPCs or ISSNs. In cases such as these, simply create another ISBN (or ISSN or UPC) search URL for your catalog as you did for the whole account upon setup and paste it into the “Use a custom URL for this widget” box located in “Advanced Options” under Style.

Configuring Your LibraryThing for Libraries Account Before you begin making widgets in earnest, it helps to set up two basic aspects of your new account: making your ISBN URL, and uploading your holdings data to our servers to be indexed.

ISBN URLs To allow your widget to link into your catalog, make sure you set your ISBN-based URL. If you have other LibraryThing for Libraries subscriptions, you have already done this. To set your ISBN-based URL go to the Enhancements tab of your LTFL administration section, then under "Configuration" > "Global configuration."

● Fill in your absolute ISBN-based URL. This URL will be used to link from the items in widgets to your catalog.

● 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, e.g. http://www.yourlibrary.org/search=MAGICNUMBER

● Click "Save settings.”

Uploading Holdings Uploading your holdings allows you to use the whole breadth of data source options available. Data sources that are available without uploaded holdings are: List of ISBNs/ISSNs/UPCs, Webpage, and RSS Feed. All others require a holdings upload. To upload your holdings, go to the Enhancements tab of your LTFL administration section, then "Holdings" > "Upload Holdings." Export your holdings to a variety of MARC formats, or create a formatted .tsv file with the columns in this order: ISBN<tab>Title<tab>Author. Then, upload that file to us, making sure to choose the correct setting for the file you are submitting. For an export of all your records, use “Replace All Records.” To add more records, choose “Add New Records.” You may also set up an FTP upload to our servers if your library has that capability. We will occasionally send you a reminder, but it is up to your library to determine how often you export and upload holdings.

In-depth Instructions In this section, every possible setting is discussed in detail. First for the general widget creation page, then the multi widget configuration and Facebook integration pages.

The Widget Creation Page This is where each individual widget is created and customized, and the code created to embed it on your webpage. Below are stepwise instructions for creating new widgets, as well as an exhaustive list of all available settings.

Step 1. Select Items?

Select a Data Source. What kinds of items do you want your widget to show off? Choose one, then fill out the additional input below.

● List of ISBNs. Paste a comma-separated list of ISBNs. ● List of ISSNs. Paste a comma-separated list of ISSNs. ● List of UPCs. Paste a comma-separated list of UPCs. ● Webpage. A URL from which we gather ISBNs. ● RSS feed. An RSS URL from which we gather ISBNs. ● 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.

● Genre. Pre-determined subject categories. ● Series. Items from one or more series, drawn from ProQuest's series coverage. ● Awards. Items from one or more award’s recipients, drawn from LibraryThing's 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. ● Random. Anything in your library's holdings.

Filter to Holdings. Choose whether you want to limit items in your widget to items found in your holdings or not. If you choose only your holdings, we will only show items in your library. This may mean that if your holdings uploads are not up-to-date, expected items might not appear.

Step 2. Results

At-a-glance information about the items in the widget: Number, Excluded items, and Annotated items. To exclude or annotate items, click on "See Details."

See Details Popup

Annotate items, show items without covers, and exclude items.

● Annotate. Add information to any item with plain text or HTML, including links and gifs. ● Show Without Covers. By default, we only show covers for which we have a match. If you

would like show all covers—including automatically generated generic covers—turn the toggle at the top of this page to on.

● Exclude. All Items are included by default. Click the red exclude button to remove that specific item from the widget. This is useful in data sources like Tags, for example.

● List of ISBNs. We generate a plain text list of all ISBNs found in a widget. Click "Toggle List of ISBNs" to reveal them.

Step 3. Style

Select one of four display types: Dynamic Grid, Carousel, Scrolling, or 3-D Carousel. Each style defaults to an appealing configuration of settings. Some options for customization appear immediately below the style selector. More options are available by clicking the "Advanced Options" button.

Options By Style

● Cover size. All widgets have the option to select cover sizes, from x-small to x-large. ● Dynamic Grid

○ Rows. Number of rows in the grid. ○ Covers per row. How many covers in a given row.

● Carousel ○ Covers per row. How many covers you want to show in every rotation through the

shelf. ○ Type. This widget can be horizontal or vertical, and has a shelf option for horizontal

orientation. ● Scrolling

○ Type. Scrolls available in both horizontal and vertical orientations. ○ Scrolling Speed. How fast you want the scroll to flow across or up the page.

Advanced Options: General

Appearance

● Widget size. Widgets will automatically resize to best fit the surrounding page whenever the page is loaded, which is great for libraries with mobile-responsive sites. Choose “Manual” to set your own height and widths. You’ll also want to do this if there is extra white space at the bottom or to the side of your widget.

● Display Sorting. Select in what order you want items to show in the widget. Sorting randomly will show a different selection of items every time the widget loads. Other options are alphabetical by title or author, or date of publication (recent first).

● Easy Share Icon. Select “On” to let anyone take a screenshot of your widget using the Easy Share button that will appear below the bottom right corner of your widget.

● Custom Cover URL. Augment our existing cover service with your own. URLs should look something like http://www.yourcoverservicehere.com/MAGICNUMBER, where MAGICNUMBER is replaced with the ISBN of the corresponding title.

● Cover Sizing. Select whether covers should have forced width or height, or be cropped squares.

Link to Catalog

● Custom Link URL. Add a different URL than your regular ISBN linking URL if clicking items in this widget should bring users to a different destination. Remember to use the “MAGICNUMBER” configuration. Example: a catalog that requires a different search URL for ISSNs or UPCs rather than ISBNs.

● Opens. Choose how you want covers to link into your catalog, by going directly to that page or launching in a new window.

● Use Popup Box. Choose to show a popup detail box containing cover, title, author, and in many cases summary, as well as a link to check the item’s in the library. Turn this setting off for clicking a cover to go directly to the catalog.

● Item Link Text. If Use Popup Box is set to On, modify the text of the button that links the detail of the item to the catalog.

More Advanced Options

● Custom HTML/CSS to output. Add your own HTML or CSS to the widget to help adapt it to your site. See sample CSS classes and IDs in the purple floating box.

● Internal Notes. These are internal notes about the widget, viewable from the main list of widgets. These notes can only be seen by people with access to your LTFL account.

Advanced Options: By Style Type

Carousel

● Scroll count. How many items to scroll forward when the widget advances through the items.

● Maximum items. How many items to load into the widget at a given time.

● Automatic Scrolling. If "on," the widget will advance forward a few titles at a time without clicking the arrows.

3-D Carousel

● Automatic Scrolling. 3-D carousels can be still, or advance one item at a constant interval. Determine that frequency with the drop down menu, here.

● Number of Covers. Most widgets will work well with auto covers. Adjust up or down in this setting.

Step 4. Preview

This area shows what the widget will look like on the webpage, and changes dynamically as you adjust settings.

Step 5. Save

Remember to Save Changes when you're done.

Step 6. Embed

Seen here are the two pieces of code required to add a widget to your webpage or blog, and also links to static images of the widget, formatted for different social media platforms.

The HTML box is a div containing the widget. Place this bit of code where the widget should actually go on the page. In many cases, this might be a section that accepts outside code in your CMS. You might need to use “Raw HTML” or a similar setting for this step. This must go where you want the widget to be.

The Javascript box contains our snippet of Javascript code that lets us send data to your website or blog. You can place this anywhere on the webpage, but most libraries put it next to the HTML code so it’s all in the same place.

Share Images

Social Media Use this function in webpages or blogs where Javascript isn't allowed. Select which social media platform you wish to use the image on and use the provided link or click the download icon below the text.

Newsletters This HTML will show an image of the most recent version of your widget. Add a URL for the image to link to (like a homepage or reader guide), or leave it blank. Great for newsletters and blogs that don't accept Javascript.

Creating Multi widgets Multi widgets put multiple widgets into one location on a page, conveying large amounts of information in a smaller amount of pixels. Great for homepages, catalog search pages, or anywhere you might want to highlight several displays at once. Creating a multi widget is easy: first, make all the individual widgets which will go into the multi widget. Then, select them, add some flourishes (or don’t), and embed your multi widget the same way you embed a regular one.

Detailed instructions First, make all the widgets you would like to be in your multi widget. Next, go to Enhancements > Configuration > Book Display Widgets, then at the bottom of the page of your list of widgets, click “Add a new multi widget.”

Step 1: Select widgets to include. In this pop-up, click the green “include” button on the far right of your list of widgets to add each widget to the multi widget. Don’t worry about order: you can change that later. If you wish to edit that individual widget, click the “edit” button. Once you have selected all the widgets, click the “close” button at the bottom of the pop-up. Then, give your widgets names to be displayed in the multi widget, in the text boxed provided.

Step 2: Multi Widget settings. Give your multi widget a title which will appear above it (or don’t). This is also where you can set a manual height and width for your multi widget, and choose from either tabs (default) or a dropdown list of widgets within the multi widget. CSS Tip! Our multi widgets come by default with a bright blue background on each tab. If you wish to change this color to something that suits your library’s branding, use this code in the custom CSS box in Step 2 and change the color to your desired color:

ul#title_list li.active a { background-color: #333333 !important; color: white !important; } ul#title_list li a { color: #333333; background-color: white; }

Step 3: Preview Check to make sure your multi-widget looks like you want it to. This is the place where many librarians realize that the most attractive multi widgets are usually all of the same display style and cover size.

Step 4: Save Don’t forget to save your multi widget, the same as you do with regular widgets.

Step 5: Embed As with regular widgets, copy the provided Javascript and HTML code snippets and place on your website or blog. Remember, each Javascript only needs to occur once per page, while the HTML for each widget is placed where you would like the widget to reside.

Creating a Facebook Tab with Book Display Widgets You can add widgets to your library’s Facebook page as a separate “page tab,” accessed similar to Photos or Events. It creates an interactive page of widgets which work as they do on regular webpages. Patrons can click right from your Facebook page into the catalog.

Connecting your account to Facebook In order to use Book Display Widgets in Facebook, first you need to connect your accounts.

1) Log in to a Facebook account that has administrative power over the intended Facebook page.

2) In the same browser, log in to your account for Book Display Widgets. 3) At the bottom of your list of widgets (Enhancements>Book Display Widgets), there is a

table labeled "Facebook Widgets." Click "Configure Facebook Widgets." 4) After the introduction paragraph there is a sentence with a link to connect your

Facebook: "In order to add Book Display Widgets to your Facebook page, click this page to authorize." Click "this page."

5) This will take you a page on Facebook where you select a Facebook page to put your Book Display Widgets on.

6) Select the Facebook page you're looking for, and then click 'Add Page Tab'. 7) You should see a page with a large button allowing you to click back into your account to

configure your Facebook tab.

Configuring your Facebook Tab Our Facebook tab allows you to add as many widgets as you want and insert text and custom elements around them.

1) Navigate to your list of widgets (Enhancements>Book Display Widgets). 2) Scroll down to see the Facebook Widgets area. Click on “Configure Facebook Widgets.” 3) Select which widgets you would like to include in your Facebook tab. Click "Add a

Widget" and select widgets by clicking the "Include" button. Close the window when you're done choosing widgets.

4) You can change the order of the widgets by dragging them into new positions. 5) Give your widgets new titles (or don't!) You can change the title of your widgets that will

show on the Facebook tab. This allows you to still retain the regular titles to use in your account while giving you an opportunity to customize each widget title. You can also add HTML elements in the box below the title for each widget. For example, you can add a few sentences above your widget to describe it.

6) Edit your display settings. Here, you can modify the title of the whole Facebook Tab you're creating. The "Page Description" text box is a place for you to put more information. You can choose to put HTML or just plain-text here.

7) In the second big text box, there is space to put your own custom CSS. We have a box to the right with examples of the common classes in Book Display Widgets. Change the color, underline, put it in the center: your widgets can be modified in many ways.