Srilatha Marru's Blog
Show protected tweets on your WordPress site!

I protect my twitter account to save myself from email spam of requests through twitter. And hence my tweets are private too and not public. I have been looking for wordpress plugins to display the protected tweets and Twitter Stream wordpress plugin came at the right time. It allows to you display the protected tweets on your site.

But please make sure you have installed latest WordPress version(currently its 2.9.2) for this plugin to work.

Some other good features about this plugin are that it caches the tweets in local file system. So the tweet cache is used when the twitter API requests exceeds the limit. The default rate limit for calls to the REST API is 150 requests per hour.

There you go you got the latest protected tweets!

Srilatha Marru's Blog
Useful WordPress Plugins

I have been using wordpress lately for most of the blog websites I am building. The some of useful plugins in building basic theme blogs have been:

1. Page order: This plugin allows you to change page order display on the navigation bar. You can find the plugin at WordPress Page Order

2. Askimet: Askimet plugin is used to block spam comments on your blog post. It is activated by default from wordpress 2.0. If it is not shipped along with your wordpress download then you can download it at WordPress Askimet

3. Multi author comment notifications: When a comment is posted by a user, this plugin is used to send approval notifications to selected authors/users of the blog. Usually, user comment notifications are only sent to author of the post for moderating comments. This plugin facilitates selected users to moderate the comments. This plugin is useful feature when there are multiple moderators for a blog. You can find the plugin at: WordPress Multi author comment notifications

4. Different posts per page: “Different Posts Per Page” plugin will allow you to modify the number of posts shown in home, category, archive or search page. You can even set the order of posts by ascending or descending order. You can find the plugin at: WordPress Different Posts per Page

5. Contact Form:Contact forms plugin is set up to ask questions on the siteWordPress Contact Form

6. Domain Theme:Domain Theme allows you to specify more then one domain name with your WordPress installation and optionally associate a specific theme for each domain. This enables you to present your site under multiple domain names. Ex: http://oliverrogers.com/ and http://www.thefaithofchrist.com/ WordPress Domain Theme

7. Google xml sitemap: This plugin will create a Google sitemaps compliant XML-Sitemap of your WordPress blog. It supports all of the WordPress generated pages as well as custom ones. Everytime you edit or create a post, your sitemap is updated and all major search engines that support the sitemap protocol, like ASK.com, Google, MSN Search and YAHOO, are notified about the update. WordPress Google Sitemap Generator

Srilatha Marru's Blog
Building a photo Gallery with Flickr streams and Jquery

Flickr has enabled us to upload the pictures, tag them and share them with our friends and photography enthusiasts. And there are plenty of plugins and widgets to display the latest Flickr pictures on the websites. Now-a-days we see that many webistes display latest pictures through Flickr widgets. But they have limited options to customize the way you want to display the Flickr Gallery.

With emerging Jquery methods and AJAX techniques it has become easy to obtain the Flickr images and display them as gallery. I have used the Jquery getJson method to get the Flickr images.

Download the latest jquery plugin and cycle plugin. Include these javascript files in the head of html file.

First, set up the HTML as below to display the images and its metadata.

<div id="images">
<div id="caption"></div> <div id="date">Date</div>
<div id="author">Author</div>
<div class="clear"></div>
<ul></ul>
</div>

Inlcude the below css in the head of the html file.

<style>
  #images {
   padding:0;
   margin-bottom:20px;
   position:relative;
   margin-top:10px;
 }
 #images ul li {
   background:#000;
   list-style:none;
   overflow:hidden;
   margin-left:0px;
 }
 #images ul {
   padding-left:0px;
   margin-bottom:10px;
 }
 #images ul li a {
  display:block;
 }
 #images ul li a img {
  border:none;
  margin:0 auto;
  display:block;
  text-align:middle;
 }
 .clear { clear:both;}
 #nav {
  position:absolute;
  z-index:100;
 }
 #nav a {
  background: #ccc;
  text-decoration: none;
  margin: 0 4px 0px 0px;
  padding: 3px 5px 3px 5px;
  font-family:verdana;
  font-size:11px;
  color:white;
}
#nav a.activeSlide {
 background: #FFD940;
}
 #nav a:focus {
 outline: none;
}
#caption {
 font-family:verdana;
 font-size:11px;
 font-weight:bold;
 color:#333;
 height:15px;
}
#date,#author,#text-mid {
 font-family:verdana;
 font-size:10px;
 color:#999;
 float:left;
}
#link  {
 float:right;
 text-transform:uppercase;
 font-size:11px;
}
</style>

Include the below Javascript in the head of the html.

$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=40282736@N08&lang=en-us&format=json&jsoncallback=?",
function(data){
 $.each(data.items, function(i,item){
 var sourceSquare = (item.media.m).replace("_s.jpg", ".jpg");
 $("<img id='img0"+i+"'
    alt='"+item.title+"'
    date='"+item.date_taken+"'
    author='"+item.author+"'
    photoid='"+item.link.split("/")[5]+"'/>")
   .attr("src", sourceSquare)
   .appendTo("#images ul")
   .wrap("<li><a href='" + item.link + "' target='_blank'></a></li>");

if($("#images ul li").size()>9) {
		 return false;
}
});
 $('#images ul').after('<div id="nav">').cycle({
 fx:     'fade',
 speed:  1000,
 timeout: 5000,
 pager:  '#nav',
 before: function() {
  $('#caption').html($(this).find('img').attr('alt'));
  var date=$(this).find('img').attr('date')
  date=date.substr(0,10);
  $('#date').html(date);
  var author=$(this).find('img').attr('author').substring(19);
  author=author.substr(0,author.length-1);
  $('#author').html(author);
}
});
});
});

And here you go, you get the fading photo gallery.

Demo

Date
Author


    AUTHOR

    profileWeb Developer working in advertising agency.

    Recent tweets

    The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.