Hey Folks,
Web 2.0 is pretty fancy with sparkling widgets, modules, plugins all around. Undoubtedly most of us are happy WordPress users, but there are some people who still want to use their blogger account and continue to blog there.
They face trouble getting latest widgets, as not many developers contribute in blogger compared to WordPress. So adding to the resource for blogger, I am going to show a simple way to add widgets on your blogspot blog. Or using this example you can make your widgets compatible to be added on blogger with single click.
You can add widget to blogger by both POST and GET methods of HTML. Let us take each one of them separately. In most of the cases when your widget content is not too much then you can use GET method, otherwise you will have to rely on POST method. Let us now analyze what all you need to send to blogger to add a new widget successfully.
URL : http://www.blogger.com/add-widget (can be use for both post and get)
widget.title (optional) : Title of your widget can be mentioned here.
widget.content (required) : The actual content of your widget goes here, should be url escaped if you are using get method.
infoURL (optional) : Your about link can be given here, which will linkback to your widget homepage.
logoURL(optional): A logo of less than 100×100 pixels can be included here.
widget.template (optional): Specified the position where your widget will be added, more information can be found here
Adding Widget via POST method
Here is the code snippet which you can use if you decide to do it via POST method. I have made all the required parameters hidden, however its not mandatory. The ultimate goal is to send the necessary parameters to the url. Out of these only widget.content is mandatory field, which is the body of the widget. In the following example this is Digimantra’s logo.
<form method="post" action="http://www.blogger.com/add-widget"> <input value="Digimantra Widget" type="hidden" name="widget.title" /> <input type="hidden" name="widget.content" value="<img src='http://www.digimantra.com/digimantra_ad_125_125.png' />" /> <input value="http://www.digimantra.com" type="hidden" name="infoURL" /> <input type="hidden" name="logoURL" /> <input value="Add Widget" type="submit" /> </form> |
Adding Widget via GET method
Adding post via GET method seems easy and faster but it can be tricky at times. Since your widget content will be sent in URL it has length limitation. Another limitation is that you cannot send characters like # when you send your content via URL. However if you encode your content before sending it to the blogger, and if it fits in the length then you are good to go. Here is an example to show you how that can be done.
<a href="http://www.blogger.com/add-widget?&widget.title=Digimantra+ Widget&widget.content=%3Cimg%20src%3D%22http%3A%2F%2Fwww.digimantra.com%2Fdigimantra_ad_125_125.png%22%20%2F%3E">Add widget</a> |
If you see carefully the widget.content is the same, but in the GET example its encoded.
Here is how the above widget looks like after embedding. So this is how you can add your own widgets to http://blogger.com
Stay Digified !!
Sachin Khosla
