Add Silverlight to WordPress 2


Few easy steps to add your Silverlight application to your favorite blogging system (mine is WordPress).

As I presented earlier, you can easily create a Silverlight video player and you can see it working pretty nice. Not to mention that it can play  a lot of formats and it is only 344 kb in size!  Now let’s see how this is possible and how can one do it on his website.

From the start, Silverlight was meant to be as easiest as possible to develop and deploy. Also, the cross browser (running on all major browsers) and cross platform (running on Linux, Mac OSX and Windows) was a requirement. But more than this, not to depend on the server side on .Net framework was also important. So you can deploy and run (only for running you’ll need the Silverlight Runtime installed) your app no matter the OS (Operating System).

This is why we discuss today on adding Silverlight to WordPress and not on How to deploy Silverlight on Linux. From the server’s OS point of view, Silverlight is just another file so you don’t need any plugin nor installs on the server side. It is on the client side where it is downloaded, setup with parameters and processed and here you need to install the Silverlight runtime – a mere of 4 Mb. If you’ve developed prior Adobe Flash application, you’ll feel very natural on the process. So let’s begin our ride to add your Silverlight application to WordPress.

Step 1.

Develop your Silverlight application. You should have a .xap file built in order to go further.

Step 2.

Upload to your WordPress blog your Silverlight application to a folder of your desire and then the Silverlight.js file that you find in your Visual Studio solution, in the web application project (I prefer to the root’s scripts folder). If you don’t find it, you can take it from here, but beware that this might be outdated. Afterwards, create a new file, called silverlight_app.js ( I prefer lowercasing all my server side files so I won’t have problems with case-sensitive OS like Linux). In that file, paste the following script (the default way to handle Silverlight errors) and then upload it also:

function onSilverlightError(sender, args) {
    var appSource = "";
    if (sender != null && sender != 0) {
        appSource = sender.getHost().Source;
    }

    var errorType = args.ErrorType;
    var iErrorCode = args.ErrorCode;

    if (errorType == "ImageError" || errorType == "MediaError") {
        return;
    }

    var errMsg = "Unhandled Error in Silverlight 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);
}

Add references to both files in your WordPress theme’s header file, inside the <head></head> tag (you can edit the header.php).Note that even if the theme’s folder way deep from the root, the actual page processing is done in the root, where core web files are located. This is why we have added scripts with this path:

<script src="scripts/silverlight.js" type="text/javascript"></script>
<script src="scripts/silverlight_app.js" type="text/javascript"></script>

Step 3.

Create a new article in which you put the Silverlight object. Note that some blog editors (like Windows LiveWriter doesn’t like to have inside the article < or > so you’ll have to replace them with their HTML equivalents &lt; and &gt;). Also replace the PathTo with your actual path  where you uploaded your Silverlight application ( can be a relative path or full http path – as long as you point to the application’s directory) and YourSilverlightApplicationName.xap with the actual name of your application :

<form id="form1" style="height:100%">
<div id="silverlightControlHost" style="width:400px; height:300px" >
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
	  <param name="source" value="PathTo/YourSilverlightApplicationName.xap"/>
	  <param name="onError" value="onSilverlightError" />
	  <param name="background" value="white" />
	  <param name="minRuntimeVersion" value="4.0.50401.0" />
	  <param name="autoUpgrade" value="true" />
	  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
	  </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>

Step 4.

Post the article and your hard worked Silverlight application!

That’s all!

Leave a comment

Your email address will not be published. Required fields are marked *