Showing posts with label feeds. Show all posts
Showing posts with label feeds. Show all posts

Wednesday, January 2, 2008

Pipe Your Plaxo Pulse Into Blogger

Well, I suppose that you know at least one word from this title: Blogger. Then it is time to get acquainted with Plaxo and Yahoo! Pipes. Again, as in many other Widgets I have created, the Widget might be of little practical use. But it has an educational purpose as well: it shows how to mash up datafeeds from different websites, transform them into JSON, so that you can easily pump the data into your Blogger sidebar. So here we go!

Plaxo
Plaxo is a social network service, that you can use to maintain your personal and business networks. Plaxo has been out there for several years now, but the new idea of Plaxo Pulse has given new dimensions to the use of Plaxo. The Pulse lets you share all kind of information with your network. You can add blogfeeds, links, photo's, messages or polls to your Pulse, and share them with your friends, your family, business relations, or with all of them.

Yahoo! Pipes
With Yahoo! Pipes you can convert any feed from any webpage into something else. You can mash up data from different sources, and create your own feed with it.

Piping your Pulse into Blogger
For this new widget I enabled my Personal Pulse Feed in Plaxo. This means that there is a feed containing all 'events' that took place, for example changes in personal information (phonenumber, address, etc.), or links that I added to my Pulse. This feed is a standard RSS-feed, and that is of little use because the widget needs a JSON-formatted feed (I have explained the JSON-concept in another post).
So that is where Yahoo! Pipes come in handy. I created a simple pipe, that picks up the Plaxo Feed Url. The output of this pipe can be retrieved in JSON-format. And my new widget takes that JSON-output as its input.
Relax, it sounds more complicated than it is.

Setting Up Your Plaxo Feed
Assuming you have a Plaxo account, sign in on Plaxo, and select your Pulse.
Scroll down to the bottom of the page, and click on RSS Feeds. This brings you to the Pulse Stream RSS Feeds page. Here you can see the 5 possible feeds: Everyone, Business Network, Family, Friends, and Me.
Select one of them and click on Enable. The feed will be enabled, and you can copy the Feed Url from the textbox. Copy it to Notepad for now.
This was step 1. Easy, wasn't it?

Creating the Pipe
Assuming you have a Yahoo! account, go to http://pipes.yahoo.com and sign in.
At the top of the page, click on Create a pipe to bring up the Pipe Editor. You will see the empty canvas with the text drag modules here, and several modules to the left side of the canvas. Drag the Fetch Feed-module onto the canvas. Now copy the Plaxo Feed Url from Notepad, and paste it into the url-input box in the Fetch Feed Module. Now connect the Fetch Feed Module to the Pipe Output box. A blue line will appear. Guess what - you have just created your Pipe!
Click on the Pipe Output box to select it. In the Debugger window at the bottom of the screen you will see your Pipe's Output.
Now click the Save-button, and click Back to my pipes.
From this list of pipes, click on your newly created Plaxo Pipe to run it and view its output. At the top-right you will see a small Feed-icon, with the text More options. Click this link to open a small pop-up menu. Right-click on the menu option called Get as JSON and copy the link and save it in Notepad. You will need this JSON-Feed-Url in the next step.
You have now completed step 2.

Installing the Widget
Now it is time to install the widget to your Blog. Go to the Widgets and Downloads Page, and click the Add Plaxo Pulse Widget to my Blog button. This will start the Click-n-Go Installer. In the install-screen, enter the JSON-Feed-Url from your Yahoo Pipe, and set the maximum number of items to display. Click Customize to create the Widget code, and then Add to my Blog to add the Widget to one of your Blogs.

Add some CSS
For your convenience I have added 3 custom CSS classes:
  • .bbplaxobox: a wrapper containing the widget

  • .bbplaxoitem: the item itself

  • .bbwidgetfooter: the widget footer
Add style definitions for these classes to your template's skin.

Your Privacy
As far as I know, sharing the feed only shares the fact that you have added or changed information. The feed will NOT contain the new information. Clicking on a Pulse Item brings the user to the Plaxo Pages. Information is only visible after sign-in, for users who are connected to you.

I hope this has some use, or that it inspires you to delve further into Piping and JSON.

Saturday, August 25, 2007

Feed Gadget for Vista Sidebar

I finally switched to Windows Vista, and so far without any problems.
A thing I particularly like in Vista, is the Sidebar, and the Gadgets you can have there. It is very easy to create a gadget, it is just a tiny webpage, I read on many nerdpages, so I decided to give it a try.
And sure, it is very easy to build your own Vista Sidebar Widget.
In this post I will explain how I built a simple gadget that displays the 5 most recent post from the Beautiful Beta feed.

Now if you want to install the gadget, click this link.
Save the file to your desktop, and check that its extension is .gadget. If the file extension shows up as .zip, change it to .gadget. Doubleclick the downloaded file to install the gadget. From your Vista Sidebar, add the gadget.

If you want to see how it works, follow the next tutorial.

1. Check your local gadget folder
You can find the installed gadget by pressing [windows] + R on your keyboard, to bring up the 'Run'-dialog. In the inputbox enter
%userprofile\AppData\Local\Microsoft\Windows Sidebar\Gadgets and click OK. This will bring you to your folder with local sidebar gadgets (local means: only available to you, not to other users of your PC).
Now you will see your new gadget, it's called BloggerFeed.gadget

2. Examine the gadget structure
Open the BloggerFeed.gadget folder. In it there are 2 files and 3 folders.
The first file, BloggerFeed.html, is the gadget code, in html. Open it in Windows Notepad and examine it. You can see some familiar code here, calling the blogger JSON-feed for BeautifulBeta. If you like, change "beautifulbeta" to the name of your own blog to view your own feed.
The second file, gadget.xml, is called the Gadget Manifest, and contains meta-data about the gadget. This data is displayed in the Gadget Window when you try to add a new gadget to your sidebar.
The CSS-folder contains the stylesheet for the gadget, defining fonttype, fontsize, colrs, and so on. Not much different from your ordenary blog or website, isn't it?
The JS-folder contains the javascript-code for retrieving and parsing the JSON-feed. This code is also used in my Blogger Widget, a hack you have most likely used yourself.
The IMAGES-folder contains the icon (I copied this one from a standard Microsoft gadget).

3. Try it and modify it!
It is as easy as this. Please try it yourself, change the looks, or the blog, or whatever you like, and share your experience!

4. Things to do
This is only a first simple approach. Things I like to add to it in the future:
- Fly-out to display feed contents
- Setup screen to change the blogname and other settings
- Auto-refresh

Enjoy!