widget popular posts

31 March 2010

Posted by gumbung on 11:04 PM

populars post that makes widgets available on the Internet partly explains just copy the code, and that's why the widget is not working properly, or no road at all. I was lucky to get a tutorial from bloggergeeze. after I follow his explanation. widget is running smoothly. but the explanation given somewhat less fit, so gumbung must modify the bit to run smoothly. 

A widget is a stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship (e.g. a webpage, blog, or profile on a social media site). Widgets allow users to turn personal content into dynamic web apps that can be shared on websites where the code can be installed. For example, a "Weather Report Widget" could report today's weather by accessing data from the Weather Channel, it could even be sponsored by the Weather Channel. Should you want to put that widget on your own Facebook profile, you could do this by copying and pasting the embed code into your profile on Facebook.

Embeddable chunks of code have existed since the early development of the World Wide Web. Web developers have long sought and used third party code chunks in their pages. Early web widgets provided functions such as link counters and advertising banners.

Widgets may be looked upon as downloadable applications which look and act like traditional apps but are implemented using web technologies including JavaScript, Flash, HTML and CSS. Widgets use and depend on web APIs exposed either by the browser or by a widget engine such as Akamai, Clearspring, KickApps, MassPublisher, NewsGator, Plusmo, Widgetbox, Widsets, WebWag, FormLoop and many others.

Sites such as MassPublisher, SnackTools, FormLoop and Widgetbox, allow users to easily create widgets from their own content with no coding knowledge necessary.

here the tips for those of you who have visited my blog. enjoy the widget!
1. you must login first at yahoo. then
2. go here yahoo pipes.

3. When you see the pipes, just click clone and it will automatically copy the pipes to your account. Now we just need to further customized it.



4. After you have cloned the pipes, we still need to copy one more pipes next click the "Edit Source" tab.



5. When the pipes appear, then scroll down then find the "Loop" function with [open] Blogger2... then click "open".



6. After you clicked open, another set of pipes will appear and you need to save a copy of it. Save a copy by just clicking the "Save" button at the upper right of the Edit Source screen.



7. Navigate back to main pipes, you may do two things. Click "Back to My Pipes" or just by simply clicking the tab you will see at the upper section. Demoed below, click the image to enlarge.



8. Now let's further customize the pipes, this the default url when the main pipes are not provided by your blog URL.



9. Test your widget if it's working by clicking the "Pipe Output" on the bottom of the source pipes screen.



10. Now just save it by save as copy

11. Then finally run the pipes, the "List" tab should show the most popular posts with the number of comments.

Now we're done on the Yahoo Pipes part, now here is the Blogger Part.

1. Log on to your Blogger account.
2. Go to Layout tab then add a HTML gadget.

3. Then copy this code below, and paste it on the HTML/Javascript gadget.

click here

[SPOILER CONTENT]



<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}

document.write('</ul>');
}
</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=f08ba75679d13feb4cfa0facb8df173b&blogurl=http://yourblogurl.com&numpost=10" type="text/javascript"></script>
<p style="float:right; padding: 0px 5px 0px 0px; font-size: 8px;line-height:6pt"> Widget by <a style="font-size:8px;line-height:6pt" href="http://gumbung.blogspot.com" target="_blank">gumbung</a></p>


4.) Replace http://yourblogurl.com with your blog URL. "numpost=5", this will give 10 post to display you can alter it to number of posts you desire. Then the crucial part is the Yahoo Pipes id where you should replace it by the id you will find at the "Pipe Web Address" we clone back at step 3. Click the image to enlarge.
Replace the red highlighted part of the code with your pipes id.



Now save the gadget and template. View it and the most popular widget should show on your blog. thanks to bloggergeeze and I fix it a litle.