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-

444553540000"

codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab #version=9,0,0,0"><param name="movie" value="http://sws.shelfari.com/ shelf .swf"></param><param name="FlashVars" value=" UserName=Williamson&ShelfType=List&ListType=Top "></param><embed width=" 400 " height=" 425 " src=http://sws.shelfari.com/ shelf .swf FlashVars=" UserName=Williamson&ShelfType=List&ListType=Top " type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" ></embed></object>

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

<embed width=" 460 " height=" 425 " src="http://sws.shelfari.com/ 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="http://sws.shelfari.com/swfobject.js"></script><div id="shelfariFlashcontent">This plugin requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash 9</a>.</div><script type="text/javascript"> var shelf = new ShelfariShelf(" shelf .swf", " 460 ", " 425 "); shelf.useExpressInstall("http://sws.shelfari.com/expressinstall.swf") 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.

Definition

Possible Values

Description

 

Required Definitions

<filename>

shelf.swf

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

<filename>

shelfV.swf

Displays books in a single vertical column

<filename>

shelfH.swf

Displays books in a single horizontal column

Height

###

Expects a number, adjusts the widget’s height

Width

###

Expects a number, adjusts the widget’s width.

UserName

shelfariUser

This must match your Shelfari user name exactly.

 

Optional Definitions

ShelfType

User

Displays the user’s bookshelf

 

List

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

 

Tag

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

ListType

IsRead

Identifies the “I’ve Read” list.

 

NowReading

Identifies the “I’m Reading” list

 

Reading

Identifies the “I Plan to Read” list

 

Top

Identifies the “Favorites” or “Top 10” list

 

Wish

Identifies the “Wish” list

 

IsOwned

Identifies the “I Own” list

ShelfTag

yourTagTitle

The Tag for books you wish to display

BookSize

Small

Shows a smaller graphic for book covers

 

Large

Shows a larger graphic for book covers

ShowBookTitles

Yes / No

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

AmazonAssociate

shelfari-20

Your Amazon associate ID

Apha

.25

Alpha transparency value for the background of the widget application

BGColor

RRGGBB

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="http://sws.shelfari.com/ 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="http://sws.shelfari.com/ 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="http://sws.shelfari.com/ 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.