MyAnimeList Blog Widget
MyAnimeList.net (MAL) is a pretty slick specialty social networking service which focuses on anime and manga.
Wikipedia describes it as follows:
The site primarily functions to serve as a place for users to keep track of the anime and manga they’ve watched or read in a highly-organized and stylized list format. In addition, MyAnimeList connects users who share similar tastes, and provides personalized suggestions and a comprehensive source of information on anime and manga.
Here is a simple blog widget for MAL which I developed using Microsoft Silverlight.
It pulls your RSS feed from your MAL profile page, and formats it nicely to let your blog visitors see what anime have you been watching recently. It also loads the anime images from MAL and displays it nicely for each entry.
Installation is pretty straightforward. Just copy the following HTML code into a text widget in your blog. Don’t forget to replace [your MAL user name] with your own MyAnimeList user name!
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="http://armchairtheorist.com/public/projects/myanimelistwidget/MyAnimeListWidget.xap" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<param name="initParams" value="myAnimeListUser=[your MAL user name]" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://armchairtheorist.com/public/projects/myanimelistwidget/InstallSilverlight.png" alt="Install Microsoft Silverlight to see the MyAnimeList widget!" style="border-style: none" />
</a>
</object>
</div>
If you are encountering problems with the above method, an alternative (and possibly simpler) way to deploy the widget for your own blog is to use an iframe:
Remember, your blog visitors will need to have the Silverlight browser plug-in installed in order to see the widget. If Silverlight is not installed, the widget will prompt them to install it.
Here are a few customization options:
- You can control the widget’s height and width by changing the numbers in the style attribute of the main div tag. If you are embedding the widget within a blog post or page itself (like this page), you can also make it float by adding a float: right or float: left to the style.
- Here are the widget parameters which you can configure:
- myAnimeListUser (Mandatory) – This is your MAL user name.
- itemCount (Optional) – This is the number of RSS feed items you want to display in your widget. If you don’t provide a value, the widget will use all the information that your RSS feed provides.
- thumbnailSize (Optional) – This is the width in pixels of the thumbnail images. Defaults to 100 if no value is provided. The blog widget will automatically scale the images while maintaining the correct aspect ratio.
- urlTarget (Optional) – This specifies the url target name used for opening hyperlinks from the widget. Similar to the HTML target attribute, valid values include “_self”, “_parent”, “_top”, and “_blank”. Defaults to “_self” if no value is provided. urlTarget will automatically be set to “_parent” if you are using the iframe method above to embed the blog widget.
If you are using the object method to deploy your widget and you are providing multiple widget parameters, separate them using a comma like this in the value string for the initParams parameter:
If you are using the iframe method to deploy your widget, you will put the multiple widget parameters as separate request parameters in the iframe source URL, like this:
You can download the latest Visual Studio 2008 project files for the MyAnimeList widget here.
To install the Microsoft Silverlight browser plug-in (or to check whether your browser already has Silverlight installed), go here.
Other Silverlight resources:
- Microsoft Silverlight Overview – http://www.microsoft.com/silverlight/
- Silverlight Community – http://silverlight.net/
Is this still working? I see the ‘install silverlight’ message, but I already have silverlight installed. I tried installing silverlight from the widget, but that failed. Using 64bit vista. Also I have it set up in a premade div. Can it work inside another div? Tried it out both ways (inside div and by itself), and neither worked. Thanks for any help.
Hi Cup,
Yes, it should be still working. I suspect your problem may be because of either one of these two cases:
1. You are using the x64 version of IE in Vista. Silverlight (as well as virtually every other browser plugin currently, like Flash, Java, etc.) doesn’t support 64-bit browsers. You should run the 32-bit version of IE and your installed browser plugins should then all work
http://www.microsoft.com/silverlight/resources/install.aspx#sysreq
2. The Silverlight plugin you have installed is version 1.0. You should upgrade to 2.0.
It should be able to work in a pre-made div. All the div does in the sample code above is to set the dimensions of the object.
Let me know your blog address and I can take a look from my end if you need more help.
Thanks for reply (and so fast too >_<). Uploaded a test page (link in my name of course). I have silverlight 2 (according to the config), and I am using chrome, firefox, and ie 32bit. As you can see on the page I am trying to setup up the mal widget, flickr widget, and shelfari widget side by side. Also tried the mal widget alone, but that didn’t work.
Oh, forgot to mention I am a new at css.
Cup:
It should work now. What was missing was a clientaccesspolicy.xml file on my server which allowed cross-domain loading of XAP files. I tested your site and it works too.
Do delete your browser cache though, before you test.
Alright, thanks man. Works perfectly. You just gained a new blog reader *thumbs up* lol. Though I disagree with your view that linux is like a bicycle. *_*
Hehe… Thanks Cup. Glad it works for ya.
I have updated the instructions above to provide an alternative (and possibly simpler) way of deploying the widget, using an iframe.
If the object way doesn’t work for you, the iframe way should work.
I have updated the widget above to add a new parameter, “urlTarget” which allows you to specify which target you want to launch URLs to.
This fixes a bug with the iframe embedding method where when anyone clicks on the widget, it launches the URL in the iframe instead of in the parent page.
I really liked your blog! Bookmarked
keep up the great Work. Valuble Info.
That’s a very neat little widget.
It’s my first time seeing Silverlight being used in a useful way. I don’t know if it’s just my lack of knowledge, but it seems silverlight isn’t doing so well. Not many developers are making any apps with it. This is probably the third usage of silverlight i’ve come across on the net. And it’s the most useful one. Mind you, I’m speaking merely as non-programmer.
Thanks for your comment.
Actually, Silverlight has been seeing quite a fair bit of momentum these past couple years, particularly in the US. And remember – this technology is only about 2.5 yrs old!
If you are from the US, no doubt you would have encountered Silverlight somewhere, since the NBC Olympics, various sporting events, Netflix, Hard Rock cafe, and others have adopted Silverlight for their websites.
Also, check out the cool Microsoft Photosynth site (www.photosynth.net) – that is powered by Silverlight too!
Thanks Jon, the Photosynth website is amazing. The interactivity there is unbelievable. After my previous comment, I went and did a little research and found out that it was indeed me who didn’t know what’s going on. I found quite a lot Silverlight apps that can do some great stuff. Silverlight.net’s showcase section has over 600 apps.
And you guessed right, I’m not in the US. I’m from Australia, and probably the main reason I haven’t come across Silverlight often is because I usually get all my information and news through blogs. I rarely visit any major news network sites. And as far as I know, Silverlight isn’t implemented into blogs so much. But as you said it is a new technology. It will take a while before it’s used more widely.