WordPress plugin to embed waves

Yesterday I wrote about Wavr plugin to WordPress. This blog was liked to from a number of posts. Offlineblog has a log description on how the plugin functions. Mashable wrote about the applications of the plugin and embedding waves in different media. The last 3 links was exact copies of the Mashable article.

I must admit, I did not do a very good job in research. There is also the plugin wp-wave-shortcodes which does the same. I’m not able to try the plugin on since, they both uses the same codes.

I doubt there is a large difference in the two plugins work at the moment. It is very limited what the Embed API supports at the moment. What will be interesting will be to see how the two plugins will develop with the next release of the Embed API.

I’m sure that I get back to the subject on the WordPress plugins later, where more functions are published. I’m looking forward to include the Waves as comment section or making it work on other ways.

Wavr a Google Wave plugin to wordpress

Yesterday I found the Wavr by Lucas Caro, a plugin which allows the user to add waves as embedded to the waves.

You just insert the code

[wave id="wave-id"]

and then you have the wave embedded in your post. Like showed bellow. The plugin requires the user to have a Wavesandbox account to see the waves, but then they can interact with the page directly. If not they just get an unauthorized page.

[wave id=”wavesandbox.com!w+ywmqSkT9%8″ bgcolor=”#ffffff”]

The plugin still have some more development, but it shows how easy it is to reuse conversation on ie blogs or Wikis.

 

Creating A Simple Inline Gadget To Show External Web Applications

In this post, I will discuss how to create a simple gadget that has the capability to show an external web application inside a wave. The purpose of this blog is to simply show how it is possible to create a gadget that can interact with an external web application. I have a vision that by creating gadgets will help developers create an external web application that interacts with a database storage residing in a server that supports Google Wave Robots’ APIs and whenever the form is updated, it will only need to send request to its server and not inside wave and later on the robot will  send an information to the wave regarding its notifications or create a wave robot/gadget that has the capabilities to add an external web applications dynamically to a wave . Writing this gadget is just as simple as coding a traditional XHTML /HTML page since Google gadgets are created using JavaScript and html.

Creating the gadget

First things first, I have created this gadget using iGoogle Gadget Editor. If you don’t have an account, you can use your Gmail account to sign in here, or if you don’t have any, you can also sign up to the given link and add the Google Gadget Editor in your iGoogle page.

Note: You can also use any text editor and upload the gadget in any available public  host and add it in a wave. Or Host it in any site that has the ability to run Google gadget such as iGoogle.

First step is to construct your XML gadget specifications:

–          Content Section. The <Content> section is where the real work of your gadget happens. It is where you specify the type of gadget, your programming logic, and often the HTML elements that determine the appearance of your gadget.

–          User Preferences. The <UserPrefs> section defines controls that allow users to specify settings for the gadget. For example, a personalized greeting gadget might provide a text field for users to specify their names.

–           Gadget Preferences. The <ModulePrefs> section in the XML file specifies characteristics of the gadget, such as title, author, preferred sizing, and so on.

You can find out more about it here.

This is how it looks after you have declared your gadget specification.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="inline_external_page" height="350" width="1280"/>
<Content type="html">
<![CDATA[

]]></Content>
</Module>

Note: Most of the gadgets written for non-Wave containers can run in Wave. However, these gadgets are not able to take advantage of the live and multi-user environment that is Wave. The main difference between Wave gadgets and non-Wave gadgets is that a Wave gadget lives in a wave and can interact with the wave.

The next step is basically like writing a primitive XHTML/HTML code.  You will need to create a <div> section that will serve as the main container of your external page.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="inline_external_page" height="350" width="1280"/>
<Content type="html">
<![CDATA[
<div id="main"><!--Main container for the iframe-->
<span>Title</span>

</div>
]]></Content>
</Module>

The next step you need to do is to create an <iframe> section that will hold the external web application that you are trying to show on the container.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="inline_external_page" height="350" width="1280"/>
<Content type="html">
<![CDATA[
<div id="main"><!--Main container for the iframe-->
<span>Title</span>
<iframe name="check" id="check" height="100%" src ="https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/pcd!3aportal_content!2fcom.sap.sdn.folder.sdn!2fcom.sap.sdn.folder.application!2fcom.sap.sdn.folder.iviews!2fcom.sap.sdn.folder.crp!2fcom.sap.sdn.app.crp.mypoints?userid=J%2BrvmxDK7BA%3D" width="100%" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe> <!-- this is where contents of the links are displayed -->
</div>
]]></Content>
</Module>

Those are the steps that you need to follow on creating an inline gadget that holds an external web page. The next thing you need to do is to put it inside a wave, considering that you have already uploaded your gadget in a site/host that can hold a Google gadget.

Putting it in a wave:

First step is to login to your wave account here or if you don’t have any account, you can register here.

Once logged in; Create a new wave. Select Debug>Extensions>Add Gadget…


Inside wave

Place the URL of your gadget on the “Enter the URL for a gadget you want to add” text box and click Add by XML.

This is how it looks after you have successfully added your gadget inside the wave.
final

Those are the steps that i have done to create this simple gadget inside wave. Thank you and if there are any questions or suggestions please do feel free to leave a comment.

References:

http://code.google.com/apis/gadgets/docs/basic.html

http://code.google.com/apis/spreadsheets/spreadsheet_gadgets.html

An example where Google Wave is the right tool

I was talking to a friend yesterday. He is a PR person working in a political environment.

One of his tasks was to make a brochure with a description of a large venue. The venue is a collaboration between multiply political organizations in the area.

His first task was to clear his draft with his own organization. This took some time to write and find the right voice and communication. Then he had to clear the content with the other organizations. When one of the organizations got their homepage on the brochure, all the others also wanted to have their homepage on as well.

To make matters worse the brochure had to go through a graphical person, so the result of the revisions was displayed like the will be in the final brochure.

If could use Google Wave for the process. He could a have created a Wave with his proposed content. When the content was cleared in his organization, he could create a new wave with the result. The new wave could then be shared with the other organizations, and they could agree on the text. They could see what each other wanted to correct and comment on these changes.

It will not be possible to use have the graphical layout created in the Wave. But if everybody is sure about the content, then it would only be the graphical layout which needed to be discussed. If wave also was used for this, then it would be easier to agree on the changed that was required.

So if my friend and his organization were able to use Google Wave they could collaborate easier and probably also save some meetings.