:
Last week, I explained Blogger’s new API for Gadgets which enables us to draw upon Blogger feeds in order to create useful and interactive gadgets.In this post, I’ll explain how to create a very simple Gadget which draws upon Blogger feeds to create a simple “subscription” gadget which you can install in your Blogger blog. Unlike regular “widget installers”, anyone who installs this gadget in their blog will not need to input their blog’s URL in order to retrieve the blog feeds: instead, the blog feed will be generated automatically by the gadget.
The basic structure of a Blogger gadget
To create a gadget for Blogger, we first need to understand the basic structure we will be working with.Gadgets for Blogger (and Google) are constructed of XML files. Don’t worry if you have no experience with XML – provided you can use a bit of HTML you can easily create a gadget using this tutorial!
This is how a really basic gadget is coded:
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="A Sample Gadget"> // More Module Preferences go here </ModulePrefs> <Content type="html"> <![CDATA[ HTML content goes here ]]> </Content> </Module>We’re going to use this structure to build a simple gadget which wil retrieve the posts feed of the Blogger blog it is installed on to create a “subscription” link.
To achieve this, we need to utilize some “Module Preferences” for the Gadget, and a little bit of JavaScript.
Module Preferences for creating our simple subscription gadget
When we create our gadget, we can add a number of “module preferences” to our gadget which create interactive functions.In the example above, you can see I added a title to the gadget (title=”A Sample Gadget”). We could also add the name and URL of the author, like this:
<ModulePrefs title="A Sample Gadget" author="Amanda Fazani" description="Testing a sample gadget" author_email="foobar@mail.com" height="200">Beneath this section in the example gadget above, you will notice a section where we can add more Module Preferences.
Here we can add some “required features” which enable us to parse and display aspects of the blog feed in which the gadget is installed.
To create our simple subscription gadget, we need to use the google.blog feature. This feature relies on the opensocial-0.7 feature (a current bug in the system, which should be resolved soon) so we need to include this feature too.
Here’s how to include these required features in our sample gadget:
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="A Sample Gadget"> <Require feature="opensocial-0.7"/> <Require feature="google.blog"/> </ModulePrefs> <Content type="html"> <![CDATA[ HTML content goes here ]]> </Content> </Module>The google.blog function enables us to retrieve elements of the blog feed. Using this feature, we can call:
- The main posts feed URL
- The main posts feed as JSON
- The main comments feed URL
- The main comments feed as JSON
- Post and comment feeds for individual post pages, as both the feed URL and JSON
Retrieving the URL of the Blog Post Feed
In order to retrieve the URL of the post feed, we need to tell the google.blog function to retrieve the URL for us, which we can then display in the gadget.Here’s where it gets a little complicated
In order to retrieve the blog feed from google.blog, we need to pass a pair of arguments. This is because google.blog loads the feeds asynchronously, so it doesn’t stop the browser from “hanging” (freezing the page).
The pair of arguments consists of:
- A function to call after the blog is loaded: this will tell the gadget to retrieve the feed URL and what we want to do with this URL
- a call to google.blog and window.name (which prevents the browser from hanging).
<script type="text/javascript">
function getFeedUrl() {
document.write(viewFeeds.getPostsFeedUrl()); // This gets the posts feed and writes it in the gadget
}
var viewFeeds = new google.Blog(getFeedUrl, window.name); // This tells the gadget to load the function (getFeedUrl) after the blog is loaded
</script>The tagviewFeeds.getPostsFeedUrl()is the function we use to collect the URL of the posts feed.
When we add this script to our sample gadget, this should output something like this:
Now that we’ve been able to get the URL of the posts feed and write it in our gadget, we can make this URL into a clickable link using a little more JavaScript, like this:
<script type="text/javascript">
function getFeedUrl() {
document.write("<a href='" + viewFeeds.getPostsFeedUrl() + "'>Subscribe to Posts<\/a>");
}
var viewFeeds = new google.Blog(getFeedUrl, window.name);
</script>With this extra JavaScript, the output of our gadget will look like this:
Here is the complete XML code for our simple subscription widget:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="A Sample Gadget">
<Require feature="opensocial-0.7"/>
<Require feature="google.blog"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
function getFeedUrl() {
document.write("<a href='" + viewFeeds.getPostsFeedUrl() + "'>Subscribe to Posts<\/a>");
}
var viewFeeds = new google.Blog(getFeedUrl, window.name);
</script>
]]>
</Content>
</Module>To test this gadget, copy the code above into a simple text editor (my favourite is Notepad ++) and save the file as sample.xml.You can then upload your XML file to your web host, and note down the URL of your gadget which will enable you to add this gadget to your blog. Alternatively you can download/use the URL for this sample gadget: download sample gadget (XML file).
Adding Blogger Gadgets to your Blog
To add (or test) Blogger gadgets in your blog, go to Layout>Page Elements in your Blogger dashboard. Choose the section where you would like to add your gadget and click on the “Add a gadget” link.On the pop-up page, you need to click the link which says: “Add your own”.
Then paste the URL of your gadget in the space provided:
When you click “Add by URL” you should be presented with a preview of how the gadget will appear in your blog. You can then click “Save” to place the gadget in your Blogger layout, and move the position as with any regular widgets/gadgets that you add.
What else can we do with this gadget?
In the second part of this mini-series, I’ll explain how to utilise “User preferences” to create interactive elements for your gadget. This tutorial will enable you to write a more complex gadget where users can change the “Subscribe to Posts” link to whatever text is preferred, and also to add an optional feed icon to the widget.You may have also noticed that the Gadget uses default styles for the background, text and link color. Blogger’s new API for gadgets enables us to parse the colour scheme of the blog and style our gadgets so they blend with the overall layout. So in part three of this series, I’ll explain how to utilize the “skins” feature to create gadgets which blend with the layout of the blog in which they are produced.
Final thoughts
I hope this tutorial has provided enough information to use the updated API to create gadgets for Blogger which use the google.blog function to retrieve the URL of the posts feed.Please feel free to build upon this basic gadget for your own purposes and let me know what you think by leaving your comments below.
Gửi bài viết này cho bạn bè qua Y!M:
0 nhận xét:
Đăng nhận xét