如何创建新窗口小部件以便其他用户添加到其布局中？
Blogger 的布局功能可以使用户以各种引人注目的新颖方式自定义其博客。更妙的是，您可以设计新窗口小部件或模块，以便其他用户将您的博客添加到其自己的博客。
常规原则如下：首先，设计您的窗口小部件。然后，在您的网站上，创建向 Blogger 发送网站结果内容的表单。在此表单中包含已创建的窗口小部件的内容，还可能包含一些其他可选信息。如果某人在您的表单上单击了"提交"按钮，则将转到 Blogger 的特定位置，可在此处将您的窗口小部件添加到其自己的博客布局（如下所示）中。
让我们看一个简单的示例。以下代码为用户提供了标为"添加 Blogger 言论窗口小部件"的单个按钮。单击此按钮可以使用户将一个窗口小部件添加到其链接到正式 Blogger 言论博客的布局中。
<form method="POST" action="http://beta.blogger.com/add-widget"> <input type="hidden" name="widget.title" value="Blogger Buzz"/> <input type="hidden" name="widget.content" value="<a href='http://buzz.blogger.com/'>阅读最新 Blogger 新闻！</a>"/> <input type="hidden" name="widget.template" value="<data:content/>" /> <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="添加 Blogger 言论窗口小部件"/> </form>
您将注意到，我们在此处使用了隐藏的输入字段，因为我们不希望用户更改任何信息，并且希望每个人都获得相同的窗口小部件。您可以轻松地使用其他种类的表单字段（例如，如果您希望用户自己为窗口小部件输入标题）。重要的是表单字段的
name属性，而不是type属性。
表单的重要部分如下：
- form action="http://beta.blogger.com/add-widget" - （必填）表单的信息提交必须到此网址，以便 Blogger 对其进行正确处理。我们建议您使用 POST 方法提交，但如果您的窗口小部件中没有太多数据，也可以使用 GET 方法。
- widget.title -（可选）当用户编辑其布局时，您指定的标题将显示在用户的"页面元素"标签中。它还将显示为默认窗口小部件模板的一部分。标题最长可达 100 字符，并且可以包含格式正确的 HTML。
- widget.content -（必填）这是窗口小部件的实际内容（将显示在用户的博客上）。它可以包含您要的几乎所有格式正确的代码（
<html>和<body>标记除外）。但是请注意，您需要忽略此代码，如以上示例所示（如<a>becomes<a>）。
- widget.template -（可选）应遵循 widget 标记指南。您还可以使用所有的全局可用的数据标记。如果未指定模板，它将默认使用
<data:title/> <data:content/>。
- infoURL -（可选）可用来在您的站点上指定某个页面以描述您的窗口小部件或有关它的其他信息。当添加窗口小部件时，它将用作人们看到的设置页面上的"详细信息"链接。
- logoURL -（可选）可以在此处添加图片链接，该图片将显示在"详细信息"链接旁边。图片大小应如缩略图（即，小于 100x100 像素）。
既然我们有了一个基本概念，下面让我们来看一看更有趣的示例。
<form method="post" action="http://beta.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;"> </a><div id='flickr_badge_wrapper'> <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'></script> <span id='flickr_badge_source_txt'>More <a href='http://www.flickr.com/photos/tags/puppy/'> Flickr photos tagged with puppy</a></span> <br clear='all' /></div> </textarea> <input type="hidden" name="widget.template" value="<data:content/> /> <input type="submit" name="go" value="Add Puppy Photos"/> </form>
在这种情况下，我们转到 Flickr.com 以浏览标记为"小狗"的照片。然后我们制造了一个 Flickr 徽章，这样可以在博客收藏中显示一串最新照片。通常，我们只是提取徽章代码并把它放在自己博客的 HTML/Javascript 窗口小部件中，这样就可以了。但是，我们现在决定帮助可能要做这同一件事的人。因此，我们将该徽章代码放入此表单的
widget.content部分，然后添加 Flickr 徽标和链接。现在，只要单击某个按钮，其他任何人都可以使用此表单轻松将小狗照片添加到他们的博客中。
这只是冰山一角。从现在开始，您可以设计任何您喜欢的其他东西。拿出您的创造力，享受其中的乐趣，看看您可以做出什么！
0 评论:
发表评论