These days we’re working on the new GSL project called „Încearcă”. Trying to stick to the latest web 2.0 trends, we thought the project has to offer a widget for it’s fans. So we said let’s create a javascript widget.

Creating javascripts widgets from scratch is not the best idea when it comes that you have not too much time and most of the features you would like to add are already written or offered through someone’s piece of code. I didn’t want reinventing the wheel, so here’s what we did.

1. Get a twitter account! We already had a twitter account, so it was also a need in updating it somehow.
2. Feed your feed to TwitterFeed. It will update your twitter account when you write something. In our case it updates after adding a new article.
3. Get the latest twitter.js from Google Code.
4. Create your load.js with some code like this, full specifications can be found on Remy Sharp’s blog:
   getTwitters(
    'incearca',{
        id:'your-twitter-id',
        count:1,
        enableLinks: true,
        ignoreReplies:true,
        clearContents:true,
        template:'<p><a href="http://twitter.com/%user_screen_name%">
                  <img src="%user_profile_image_url%" class="alignleft" align="left" />
                  </a></p>
                  <p>%text%</p>
                  <p class="meta">Visit <a href="%user_url%">%user_name%</a> for more.</p>
        '}
);
5. Save your files to your host. Then add the code into your page:
   <style type="text/css">
#incearca ul li {list-style: none}
#incearca ul li p img {float: left margin-right: 3px padding: 1px border: 1px solid #28435F}
</style>
<div id="my-widget">
<script type="text/javascript" src="http://your-website/incarca.js"></script>
<script type="text/javascript" src="http://your-website/incearca.js"></script>
<p><img src="http://your-website/loading.gif" /> <a href="http://your-website/">Widget is loading...</a></p>
</div>
   Tip: a good loading image can be generated using AjaxLoad tool.

That’s it! Our results can be tested on our project widgets page.
Credits to Remy Sharp for great code and inspiration! :)