Blogger news



Free Widgets

Creating own widgets

Diposkan oleh Natalia Fransiska | Label: , , , , |

How do I create new widgets for other people to add to their layouts?

The Layouts feature of Blogger opens up all sorts of new possibilities for people to customize their blogs in interesting ways. And even better, you can design new widgets or modules for others to add to their own blogs.
Here's the general concept: First, design your widget. Then, on your website, create a form that sends its results to Blogger. In that form you include the content of the widget you've created, and maybe some other optional information. When someone clicks the "submit" button on your form, they'll be taken to Blogger where they can add your widget into their blog's layout (like this).
Let's look at a simple example to start with. The following code provides the user with a single button, labeled "Add Blogger Buzz Widget." Clicking that will let them add a widget to their layout that links to the official Blogger Buzz blog.
<form method="POST" action="http://www.blogger.com/add-widget">

        

  <input type="hidden" name="widget.title" 

        value="Blogger Buzz"/>

        

  <input type="hidden" name="widget.content" 

        value="&lt;a href='http://buzz.blogger.com/'&gt;Read the

        Latest Blogger News!&lt;/a&gt;"/>

        

  <input type="hidden" name="widget.template" 

        value="&lt;data:content/&gt;" />

  

  <input type="hidden" name="infoUrl" 

        value="http://buzz.blogger.com"/>

        

  <input type="hidden" name="logoUrl" 

        value="http://www.blogger.com/img/icon_logo32.gif"/>

        

  <input type="submit" name="go" value="Add Blogger Buzz Widget"/>

</form>
You'll notice we used hidden input fields here, because we don't want the user to change any of the information; we want everyone to get the same widget. You could have easily used other kinds of form fields if, for instance, you wanted the user to enter a title for the widget themselves. It's the name attributes of the form fields that are important, rather than the type attributes.
The important parts of the form are the following:
  • form action="http://www.blogger.com/add-widget" - (Required) Your form must submit its information to this URL in order for it to be handled properly by Blogger. We recommend using the POST method to submit, but GET also works, if you don't have too much data in your widget.
  • widget.title - (Optional) The title you specify will display in the user's Page Elements tab when they edit their layout. It will also be shown as part of the default widget template. The title can be up to 100 characters long, and may contain well-formed HTML.
  • widget.content - (Required) This is the actual content of your widget, which will be displayed on the user's blog. It can include almost any well-formed code that you want, except for <html> and <body> tags. Note, however, that you will need to escape the code, as in the example above (e.g. <a> becomes &lt;a&gt;).
  • widget.template - (Optional) This should follow the widget tag guidelines. You can also use any of the globally available data tags. If no template is specified, it uses <data:title/> <data:content/> as a default.
  • infoURL - (Optional) You can use this to specify a page on your site that describes your widget or gives other information about it. It will be used as a "more info" link on the setup page people see when adding your widget.
  • logoURL - (Optional) You can add an image URL here, and the image will be displayed next to the "more info" link. It should be thumbnail sized (i.e. less than 100x100 pixels).
Now that we've got the basic idea, let's take a look at a more interesting example.
<form method="post" action="http://www.blogger.com/add-widget">

  <input type="hidden" name="infoUrl" 

     value="http://flickr.com"/>

     

  <input type="hidden" name="logoUrl" 

     value="http://www.flickr.com/images/flickr_logo_gamma.gif"/>

     

  <input type="hidden" name="widget.title" value="Puppies!"/>

  

  <textarea name="widget.content" style="display:none;">

  &lt;/a&gt;&lt;div id='flickr_badge_wrapper'&gt;

  &lt;script type='text/javascript' 

  src='http://www.flickr.com/badge_code_v2.gne?show_name=1&

  count=3&display=latest&size=t&layout=x&source=all_tag&

  tag=puppy'&gt;&lt;/script&gt;

  &lt;span id='flickr_badge_source_txt'&gt;More 

  &lt;a href='http://www.flickr.com/photos/tags/puppy/'&gt;

  Flickr photos tagged with puppy&lt;/a&gt;&lt;/span&gt;

  &lt;br clear='all' /&gt;&lt;/div&gt;

  </textarea>

  

  <input type="hidden" name="widget.template" 

     value="&lt;data:content/&gt; />



  <input type="submit" name="go" value="Add Puppy Photos"/>

</form>
In this case, we went to Flickr.com to browse photos tagged with "puppy." Then we made a Flickr Badge out of it so we could display a stream of recent photos in the collection on our blog. Ordinarily, we would just take the badge code and put it in an HTML/Javascript widget on our own blog and we'd be done. However, here we decided to help out other people who might want to do the same thing. So we put the badge code into the widget.content section of this form, and added the Flickr logo and link. Now, anyone else can use this form to easily add puppy photos to their blog with the click of a button.
And that's just the tip of the iceberg. From here, you can design anything else you like. Just be creative, have fun, and see what you can come up with!
P.S. If you want a nice little button to use on your form, try one of these: http://www.blogger.com/img/add/add2blogger_sm_w.gif
http://www.blogger.com/img/add/add2blogger_sm_b.gif
http://www.blogger.com/img/add/add2blogger_lg.gif

source : google.com/support/blogger/bin

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)

Translator

Fans box

Followers

Page rank

Google PageRank Checker Powered by MyPagerank.Net