Sei sulla pagina 1di 3

Shelfari Blog Widget

The Shelfari blog widget was designed to be flexible, allowing you integrate the widget into your site the way you want it to. We did this by keeping a number of aspects of the widget user configurable. The Shelfari Widget webpage will allow many people to configure their widget easily. For individuals who need more from their widget, we provide this documentation to identify how you can fully customize your Shelfari widget.

To add the Shelfari blog widget to your existing website, you’ll need to add either the generated HTML or your custom HTML that defines your blog widget into your webpage. Many online website communities allow you to add rich text, but it is important that you add your HTML as plain text, without any additional markup that may be generated automatically. Once you generate the necessary HTML, you can save your webpage and preview the widget to ensure it’s sized and positioned correctly.

Widget HTML

Below we provide some sample HTML that illustrates in red the different definitions that are user editable. You’ll notice that each red variable appears twice, this is to accommodate the different HTML requirements of different browsers.

General Online Community – Examples include Blogger, Blogspot, Typepad, Xanga & many others. Currently LiveJournal and Windows Live Spaces do not support having embedded Flash widgets, but are investigating ways to enable this for the future.

<object width=" 400 " height=" 425 " classid="clsid:d27cdb6e-ae6d-11cf-96b8-


codebase=" #version=9,0,0,0"><param name="movie" value=" shelf .swf"></param><param name="FlashVars" value=" UserName=Williamson&ShelfType=List&ListType=Top "></param><embed width=" 400 " height=" 425 " src= shelf .swf FlashVars=" UserName=Williamson&ShelfType=List&ListType=Top " type="application/x-shockwave-flash" pluginspage="" ></embed></object>

MySpace – MySpace has a specific HTML requirement which we provide for you.

<embed width=" 460 " height=" 425 " src=" shelf .swf" FlashVars=" UserName=Williamson&ShelfType=List&ListType=Top "></embed>

JavaScript – This will provide the best user experience, but requires that your website supports JavaScript which many online communities do not.

<script type="text/javascript" src=""></script><div id="shelfariFlashcontent">This plugin requires <a href="">Adobe Flash 9</a>.</div><script type="text/javascript"> var shelf = new ShelfariShelf(" shelf .swf", " 460 ", " 425 "); shelf.useExpressInstall("") shelf.addVariable(" UserName ", " Williamson "); shelf.addVariable(" ShelfType ", " List "); shelf.addVariable(" ListType ", " Top "); shelf.write("shelfariFlashcontent");</script>

Widget Definitions

The following table describes each definition that Shelfari allows our users to customize. Note that the only first four definitions are required, all others are optional.


Possible Values



Required Definitions



Displays books in a grid format, with as many rows and columns as will fit in the provided with & height



Displays books in a single vertical column



Displays books in a single horizontal column



Expects a number, adjusts the widget’s height



Expects a number, adjusts the widget’s width.



This must match your Shelfari user name exactly.


Optional Definitions



Displays the user’s bookshelf



Displays a specific list the user owns, requires a ListType be specified



Displays books that have a specific tag. Must specify ShelfTag property



Identifies the “I’ve Read” list.



Identifies the “I’m Reading” list



Identifies the “I Plan to Read” list



Identifies the “Favorites” or “Top 10” list



Identifies the “Wish” list



Identifies the “I Own” list



The Tag for books you wish to display



Shows a smaller graphic for book covers



Shows a larger graphic for book covers


Yes / No

In addition to the cover graphics, also display the title of the book



Your Amazon associate ID



Alpha transparency value for the background of the widget application



RGB color value for the background of the widget application

Example Usage of Definitions

These examples use the shorter MySpace template, but only for simplicity. Using the same definitions would result in the same output for any of the templates used.

Shows the user’s book shelf in a grid style, with large book graphics sized 500 pixels x 500 pixels

<embed width=" 500 " height=" 500 " src=" shelf .swf" FlashVars=" UserName=Williamson "></embed>

Show the user’s top books list in a single horizontal row of books.

<embed width=" 500 " height=" 500 " src=" shelf H.swf" FlashVars=" UserName=Williamson&ShelfType=List&ListType=Top "></embed>

Show the books associated with the tag “Culture” with a small book cover in a single vertical column.

<embed width=" 500 " height=" 500 " src=" shelf V.swf" FlashVars=" UserName=Williamson&ShelfType=Tag&ShelfTag=Culture&BookSize=Small "></em bed>

Frequently Asked Questions

The plugin gave an error regarding the PageSize. If this happens, you’ve probably put it into too small of a container. Try making the width / height larger.

Are parameters case sensitive? No, but they must be spelled correctly

Why are the parameters listed twice? Because of the differences between different internet browsers. The good news is that they are identical. It is important if you update the code snippet manually that you update both sets of parameters. This is also true for other flash plugins, such as YouTube & Google Video, they just happen to have fewer parameters for you to configure.

Why does MySpace require a different code snippet? Because they require all flash plugins to follow additional “security” settings. Unfortunately the extra “security” prevents you from interacting with the book in a truly meaningful manner. We are working to improve this however!

What about privacy? The plugin requires my user name in plain text! The plugin does not manipulate data, only presents what is already publicly available in a different form factor. So you don’t need to worry about someone deleting all of your books. We will offer the ability to prevent a plugin from displaying your data in the near future.