Blog Plug-in - The Details

So here are the details for user that wants to play with our blog plug-in today.  In the coming days we will launch a simple wizard in Shelfari that makes taking your bookshelf and integrating it into your blog / website a snap, but we wanted to put the code out there for people to play with so we could get some feedback. So here are the details:

Technology Used:
The plug-in is written in Flash 9 so that visitors will have a consistent experience across platforms.  If someone has Flash 8 or lower they will be prompted to upgrade to Flash 9.

Compatibility:
In addition to putting the plug-in into a blog, you can easily put it on any website by integrating the code into your site.  But given that the major blogging platforms have varying level of support for plug-ins we want to highlight our current support for the major platforms:

We currently support the following blogging platforms:

• Typepad
• Blogger
• MySpace
• Xanga

We are working to add support for Wordpress & MSN spaces.  If there another platforms you want us to support, send us a message using the feedback form linked from the bottom of every Shelfari page.

Plug-in Features:
The plug-in gives users a TON of flexibility.  It has the following features:

Customize your shelf - You can customize what books get shown in your plug-in.  You can show off your entire shelf, all the books with a certain tag, your top 10 list, your wish list, or your currently-reading list.

Your Shelf, Your Money! - Lots of bloggers make money by recommending books to their readers.  We want to help you make money, so you can insert your own Amazon Affiliate ID into our plug-in and you will get all the affiliate revenue generated from the purchases.

Custom Sizing - You can easily customize how big the plug-in is, which will change how many books you show at once.  You can also change the book cover size to your liking and show off book titles if you want.

THE CODE:
OK, time for what you really want.  Here are the parameters of the plug-in followed by the code:

Parameters:

• Username
• This parameter is required and the value must exactly match your shelfari user name
• Shelftype
• This parameter can have the following values:
• User - setting Shelftype=User displays that users book shelf.
• List - setting Shelftype=List displays the list specified by the ListType parameter.  Requires that ListType is set.
• Tag - setting Shelftype=tag displays all the books given a certain tag. 
• ListType
• This parameter can have the following values:
• Top - setting ListType=Top will display the users top 10 list
• Reading - setting ListType=Reading will display the users currently reading list
• Wish - setting ListType=Wish will display the users wish list
• ShelfTag
• This parameter should be set to the tag for the books you want displayed
• BookSize
• This parameter can have the following values:
• Large - Shows large book covers
• Small - Shows small book covers
• ShowBookTitles
• This parameter can have the following values:
• Yes - Shows the title over the books
• No - Does not show the title over the books
• AmazonAssociate
• This parameter can be set to any legitimate Amazon Associate ID

Setting Parameters Correctly:
Here are some examples of how to set the above parameters that will be used in plug-in:

• Show the user’s book shelf in the default view (large book graphics).

FlashVars="UserName=Williamson"

• Show the user’s top books list
  FlashVars="UserName=Williamson&ShelfType= List&ListType=Top"

• Show the user's books associated with the tag “Business” with a small book cover

FlashVars="UserName=Williamson&ShelfType= Tag&ShelfTag=Business&BookSize=Small"

• Show the user's books associated with the tag “Business” while setting the Amazon Associate ID to Mark

FlashVars="UserName=Williamson&ShelfType= Tag&ShelfTag=Business&AmazonAssociate=Mark"

General Form Code Sample:
The following is the code that should be used by all users unless you are looking to put this on MySpace (We have a separate snippet for you below):

<object width="460" height="425" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.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"></param><embed width="460" height="425" src="http://sws.shelfari.com/shelf.swf" FlashVars="UserName=Williamson" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" ></embed></object>

Note the portions in RED are the portions you will want to change.  The width & Height obviously help to size the plug-in to your blog / website template.  The parameter list is what you change to control all the parameter settings outlined above.  Make sure you change width, height, and parameter values in BOTH locations.

MySpace Code Sample:
For all those MySpace users we have the following code, which is simpler for reasons described in the FAQ lower down in this post.  So here is the snippet for MySpace users:

<embed width="460" height="425" src="http://sws.shelfari.com/shelf.swf" FlashVars="UserName=Williamson"></embed>

Again, you can customize sizing, and ALL the same parameters.  See the section above if you need a reminder on how to set all the parameters appropriately. 

And finally here are some answers to the questions we expect to see most frequently:

Notes / Tips / FAQ’s:

• Why does my plug-in have scroll bars?  If you encounter scroll bars, try making its width & height a little larger to accommodate it better.
• The plug-in 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 Internet Explorer & FireFox, they must be included twice.  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 plug-ins, 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 plug-ins 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 plug-in requires my user name in plain text! The plug-in does not manipulate data; it 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 plug-in from displaying your data in the near future.

 

Comments

[Ivana Readalot]

I see that Shelfari started a MySpace page? What's that all about? Don't know, but I'll be your friend... if you'll have me.

www.myspace.com/shelfari