Code Garage

Description

This small silverlight twitter widget can be placed on your blog, with the help of some HTML + CSS and javascript. It shows all your recent tweets, which are changed periodically.

A blog post about development will soon follow on Coffee Cup, in which I’ll show how to overcome cross domain call restrictions by using yahoo pipes as proxy and using LINQ-to-XML (explained in a quite good way on Scott Gu’s blog).

Source Code: Download

Application: Download

License: WTFPL

Click to Preview

Instructions

How to config the widget to show your tweets?

Steps:

1. open index.html, find this line:

<param
                name="initParams"
                value="FeedUrl=http://twitter.com/statuses/user_timeline/22100709.rss,

                User=LON3WOLF"


/>

Set User to your TwitterID.

Save it, now you have a page that will show your tweets in twitter widget

TO EMBED THIS WIDGET IN YOUR Page/Blog

1. paste the silverlight embed code from index.html to your page at appropriate places:

example:

===============Paste this in header================

<style type="text/css">

#silverlightControlHost
{
        height: 100%;
}

</style>

<script type="text/javascript">
        function onSilverlightError(sender, args) {

            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError")
            {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError")
            {
                if (args.lineNumber != 0)
                {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>

=============================================================================== 

============ Paste  this anywhere inside body tag ========================

<div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
            <param name="source" value="Tweet.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />
            <param name="autoUpgrade" value="true" />
             <param
                name="initParams"
                value="FeedUrl=http://twitter.com/statuses/user_timeline/22100709.rss,
                User=LON3WOLF"/>

            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>

=====================================================

set css style for #silverlightControlHost in head, to customize the positioning and layout of widget

Interface:

Post a Comment