Edit your WordPress theme and insert the following code into your WordPress Post Loop(If you want it to appear on Post pages only, then edit single.php.Otherwise you will have to edit multiple theme files)

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;font=arial" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:40px;"></iframe>

Parameters of the Like Button
1.layout=button_count will provide you with the new like button.If you change it to layout=standard , then you will get the older version of the like button
2. show_faces=false If you set this parameter to true(show_faces=true), then it will show faces of those who like your post
3.There are three different color schemes available . The code has the light color scheme. To use the other two color schemes change colorscheme=light to colorscheme=dark or colorscheme=evil
4.you can also change the font used by changing the font parameter
You can change font=arial to any of

1. font=lucida+grande
2. font=segoe+ui
3. font=tahoma
4. font=trebuchet+ms
5. font=verdana

5.To change the text that appears on the button, you can change action=like to action=recommend

New Facebook Like Button for Blogger

To add the tweet link to your wordpress blog, Edit your Template’s single.php file and add the following code

<a href="http://twitter.com/share?text=<?php echo urlencode(the_title()); ?>&amp;url=<?php echo urlencode(the_permalink()); ?>&amp;via=twitter&amp;related=<?php echo urlencode("coderplus:Wordpress Tips, jQuery and more"); ?>" title="Share on Twitter" rel="nofollow" target="_blank">Tweet This</a>

inside the post loop.

In the code you can edit via=twitter with your  twitter handle.Ex.If your twitter username is martin then you can change it to via=martin you can also edit the related account by editing related=coderplus: WordPress Tips, jQuery and more

If you have any queries, leave a comment and i will help you out

If you are having a wordpress blog, then you can easily add the tweet button to your blog using the WordPress Tweet Button Plugin.

Upload the WP-TweetButton plugin to your blog, Activate it, and configure it from the TweetButton Menu in your WordPress Dashboard.wee
Here is a screenshot of the Configuration page.

= Features =
* Live count of tweets from Twitter
* Allows you to change the source which you retweet, E.g. “RT @yourname” or “via @yourname”
* Allows you to change the syntax of your tweet Eg:<Tweet Text> <short link> via @yourname,RT @yourname <Tweet Text> <short link>
* Allows you to add post categories and tags as hash tags in your tweets
* Allow you to set the type of the Tweet Counter(Vertical,Horizontal or none)
* Allows you to set the language of the button
* Allows you to recommend a second twitter account
* Allows you to add CSS styles
* Automatically adds the tweet button without the need of any template modification
* Allows further customization and Manual code insertion into the template
* Allows you manually to add a text link to tweet your posts
* Allows you to use the categories and tags of the post as hash tags in your tweet
* Use the post author’s twitter profile on his posts using %post_author% and %post_author_bio%
The plugin is capable of automatically inserting the Tweet button on all of your posts. But if you need to have more control over where the tweet button is placed, then choose the “Manually add the Function Call to the Template” option from your Tweet Button Configuration Page. Now edit your template and add the following code wher you want the tweet button to appear.

<?php if(function_exists('the_tweetbutton')) the_tweetbutton();?>

If you dont need the counter, and want to create a Text Link to share the item, then you can use the_tweetlink() function

Eg:The code below will output a simple text link to share your posts

<a href="<?php the_tweetlink();?>" title="Tweet" target="_blank">Tweet This</a>

Download The WP-TweetButton Plugin from the WP Plugin Directory

# wordpress twitter button #wordpress official tweet button #wordpress official twitter button #wordpress tweet button

- This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

jTip JQuery Plugin

- jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.This can be utilized for form Field Tips.

jqTransform

- A  jQuery styling plugin which allows you to skin form elements.

JQuery Geogoer VChecks Plugin

- Lovely Check Boxes.

Ajax Fancy Captcha

- Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.

jQuery Date Picker

jQuery plugin: Password Validation

This plugin extends the jQuery validation plugin, providing two components:
* A function that rates passwords.
* A custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. The text displayed can be localized.

More Plugins would be added soon

Cute Tweeters by Mirjami Manninen for Smashing Magazine

Twitter Birds From Gopal Raju of ProductiveDreams.Com

Another Set of Twitter Birds From Gopal

Free Twitter Birds

Free Twitter Icons – Happy Birds

Tweetbird  Icon from Sneh Roy

Free Twitter Bird Icons By Kailoon

Free Twitter Bird of Biju Subhash

Tweeta Free Twitter Bird Icon Set

Free Twitter Icon

Twitter Bird Icons & Illustration

High Resolution Twitter Bird Icons

Lovely Twitter Icons

A Little Bird Told Me

8 Free Cute & Simple Twitter Bird Vector Graphics

Free to use Twitter icon illustration

Free Rockin’ Twitter Icons for Your Blog

Twitter Icons

Tweeties- A Free Twitter Icon Set

40 Cute Free Twitter Graphics – Badges, Icons & Buttons

Kweet- A Free Twitter Bird Icon from Cheth Studios

Usning the Timthumb thumbnail Generator

Timthumb is a thumbnail Generator script written in PHP and it requires the GD library. You can get the timthumb script from Darren Hoyt at Google Code . First of all lets thank Darren for this magical script.

How Stuff Works?

For a neat look, we would be displaying post thumbnails along with post summarieson your wordpress home page and other archive pages. Goto the DEMO PAGE and see how it looks on WordPress’s default Kubrick Theme.Now lets see how this works.We have two methods for selecting the image used for generating the post thumbnail.

1. Specifying the Image from which the thumbnail should be generated(We have to do it for each post by using a WordPress Custom Field)

2. By automatically using the first image in the post for generating the post thumbnail(thumbnail will be generated automatically from the first image in the post)

Our Plan

Here we will use a combination of the above two methods. If the post has a Custom Image field value then we will use that specified image for generating the thumbnail .If it doesn’t have any image url specified in the custom field, then we will use the first image in the post, and if the post doesn’t have any images and it doesn’t have an image URL in the custom field, then we wont use the post thumbnail.This is a very simple Code. So everyone would be able to figure out how it works. First of all we have to get the timthumb script on your server.Create a folder named thumbnails in your wp-content folder . Upload the timthumb.php script into this folder. Make a subfolder named cache within the wp-content/thumbnails folder and change the permissions of this cache folder to 777.

Before  we start lets get familiar with some WordPress Template tags.

Template Tags

1.<?php the_content();  ?> – This template tag outputs the entire wordpress post.

2.<?php the_excerpt(); ?> – This template tag outputs the post summary.If you haven’t manually added  a post excerpt,then wordpress will automatically generate one for you.So this template tag can be used to display the post summary.

Ok lets do it.

We will start with the WordPress home page. So edit your theme’s index.php file. You would probably see something similar to

<?php the_content();  ?>

. We will have to replace this with

<?php the_excerpt(); ?> .

Now we are half way through. Your wordpress home page will now be displaying post summaries instead of showing the entire post.Now we have to display the thumbnails alongside the post summary.For this you will have to add the thumbnail generation(+display) code just above

<?php the_excerpt(); ?>

Code For Thumbnail Generation + Display

  <?php  $custom_values = get_post_custom_values("thumb_source");
   if (isset($custom_values[0]))  $image_source= $custom_values[0];
  else
  {$id =$post->ID;
  $the_content =$wpdb->get_var("SELECT post_content FROM   $wpdb->posts WHERE ID = $id");
  $pattern = '!<img.*?src="(.*?)"!';
  preg_match_all($pattern, $the_content, $matches);
  $image_source = $matches['1'][0];
  }if (isset($image_source))
  {?>
  <a href="<?php the_permalink();?>"><img class="cute-post-thumbnail" src="http://www.yourblog.com/wp-content/thumbnails/timthumb.php?src=<?php echo $image_source;?>&w=180&h=180&zc=1&q=85"  alt="<?php the_title();?>"></a>
  <?php }?>

Ok what does this Code do?

It tries to fetch the custom image field ,  thumb_source (you can use any custom field name.In this tutorial we will use thumb_source as our custom field name) . If you have added a custom field thumb_source with the image URL, then the code will use that particular  image for thumbnail generation.If it is unable to find the custom field, then it will scan the post to see if it has any images.If it has got any images, then it will use the first image in the post for generating the thumbnail.If the post doesn’t have any image and it doesn’t have a custom field image, then the script wont do anything.In the code you should replace http://www.yourblog.com with your wordpress blog’s URL. You can also alter the highlighted values in the code.

w=180 the width of the generated thumbnail

h=180 the height of the thumbnail

zc=1 this will crop the image.if you set it to 0, it will resize instead.

q=85 this determines the quality of the generated thumbnail. maximum value is 100

Now you should see the thumbnail image and the post summary on the WordPress home page. The thumbnail image is not styled properly.This is our next task.

Styling the The Thumbnail Image

Now we have to edit our theme’s stylesheet file(style.css) and add the following styles there

.cute-post-thumbnail{float:left;width:190px;height:190px;padding:10px;margin-right:10px;margin-bottom:10px;background:#d5d6d7;border: 3px solid #ccc;}

You can surely alter the styles and make it even more beautiful and appealing .

Now we are finished with the wordpress home page.Now repeat the same process for the wordpress archive pages(tag,category search and other archives) by editing archives.php,search.php etc  in a similar manner.

Extra Notes

1.Timthumb can generate thumbnails of internal images only.So if you are using images hosted on some other sites,then timthumb wont be able to generate a thumbnail for you.

2.If you don’t want to use timthumb, you can make thumbnails by your own and then upload it somewhere and add the image URL as custom field.In this case you will have to modify the thumbnail code to

<?php  $custom_values = get_post_custom_values("thumb_source");
if (isset($custom_values[0]))  {$image_source= $custom_values[0];?>
<a href="<?php the_permalink();?>"><img class="cute-post-thumbnail" src="<?php echo $image_source;?>"  alt="<?php the_title();?>"></a>
<?php }?>

Doing it in the WordPress Way

As krembo99 has suggested in the comment,we can make use of the default wordpress functions to grab the thumbnails.To do this First of all goto your Wodpress Admin Panel > Settings > Media and set the thumbnail size to the size that you want.

Now use this Thumbnail generation Code instead

<?php
  $attachments = get_children( array('post_parent'  => get_the_ID(),
                'post_type'      => 'attachment',
                'numberposts'    => 1, // show all -1
                'post_status'    => 'inherit',
                'post_mime_type' => 'image',
                'order'          => 'ASC',
                'orderby'        => 'menu_order ASC'
                ) );

if($attachments)
{foreach ( $attachments as $attachment_id => $attachment ) {?>
    <a href="<?php the_permalink();?>"><?php echo wp_get_attachment_image( $attachment_id,'thumbnail' );?></a>;
<?php }}?>

Now here the image is assigned a class attachment-thumbnail . So we will have to alter the styles to

.attachment-thumbnail{float:left;width:190px;height:190px;padding:10px;margin-right:10px;margin-bottom:10px;background:#d5d6d7;border: 3px solid #ccc;}

This method will use the thumbnail version of the first image in your post.

Doing in on the New Beta Version Of WordPress using WordPress Template Tags

Wordprerss 2.9, which is now in beta comes with some additional template tags.So the code becomes lighter

<?php if ( has_post_image() ) : ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_image('thumbnail'); ?></a>
<?php endif; ?>

If you require help with the following code, post a comment and I will respond to your inquiry .

1. Page Peel Social Icons – Version 2

2. Circular Social Media Icons

3. The Leaves Fall: A Social Icon Set For Bloggers

4. Heart – A Free Social Icon Set

5.Lighter Grey Icons

6. Subtle Grey Social Icons

7. Social Bookmark Iconset 1

8. Social Bookmark Icons Set  2

9. Insight Icons

10. Premium Social Media Icons

11. Socialize Icons

12. WebDev Social Bookmark

13. 60 Social Media Icons

14. Aquaticus.Social

15. Cheers – web 2.0 in a glass

16. Free Social Media Icons & 275 New Premium App Icons

17. Social icons vector set

18. Sky Blue White Pearl Icons

19. Elegancy speaks

20. Tabbed Social Media Icons

21. Social Icons –knobs

22. Web Social Icon Set

23. White Magik

24. Sleek Tab Style Icons

25. 20 Social Bookmarking Icons

26. webtoolkit4.me Icon Pack

27.Social Stamps

28. Set of Social Icons no.3

29. 3D Social Media Icons Ser 1

30. 3D Social Media Icons Set 2

31.Handycons 1

32. Handycons 2

33. Lontar Icons

34. Starry Site Icons

35. Drink Web 2.0

36. SocioLEGO

37.Social Balls

38. Social.me

39. Free Vector Social Bookmark Icons

40. Chococons

41. Free Vector – Social Icons

42. DelliCream and DelliCake

43. 108 Blue and White Pearl Social Bookmarking Icons

44. Location – Free Social Media Icon Set

45. Metal Social Icons

46. Beer Cap Social Icons

47. Christmas Social Bookmark Icons

48.Social Icons by Iconshock

49. Icontexto Inside

50. 3D Glossy Blue Orbs Social Media Icons

51. 108 Free Glossy Orange Orb Social Media Icons

52. (max)Icone Blog Set 1

53. (max)Icone Blog – Set 2

54. (max)Icone Blog – Set 3

55. Social Web Buttons – Set 1

56. Social Web Buttons – Set 2

57. 24 Free Exclusive Vector Icons: Handy

58. Wood Social Networking Icons

59. Social Icons Made of Wood

60. Woodgrain

61. Social Media Bookmark Icon +

62. Social Media Stars Icon Set

63. 34 Circular Social Icons

64. 40 Social Bookmark Icons for Your Blogs

65. Curly Vector Social Icons

66. Social Tube

67. Set of social icons by Tydlinka

68. Polaroid icon set

69. web 2.0 Icons

70. Chrome Icons

71. Social Charms – Pack 1

72. Social Charms – Pack 2

73. Cafe Icon Set

74. 6 New Social Icons

76. Social Media Mini Icon Pack

77. Social Icons in Black

78. Web 2.0rigami

79. Social Media Icons

80. Free Hand Drawn Doodle Icon Set for Bloggers

81. Bevel Dark Social Icons

82. Social Bookmark Sketchy Icons

83. Social Icons hand drawn

84. koidesign social icon pack

85. Social Icon stickers

86. Gorgeous Mini Social Networking Icon set

87. Cute Birdy Icons

88. Black n white- Social Media Icons Version 1.0

89. Elegant Social Media Icons Version 2.0

90. Nurture Social Icon Set

91. Social grunge icons

92. Extreme Grunge Garments Icons

93. Orange Grunge Stickers

94. Glowing Neon Social Media Icons

95. Glowing Pink Neon Social Networking Icons

96. Green Jelly Social Media

97. Blue Jelly Social Media Icons

98. Blue Chrome Rain Icons

99. 3D Glossy Black Button Social Networking Icons

100. Crystal Clear Bubble Social Media Icons

101. Matte Black Social Media

102.  Ultra Glossy Silver Button Social Media Icons

103. IconsETC Black Inlay on Steel Social Media Icons

104. Free Social Media Icons for Designers – A Life in Pixels

This article will continually update as soon as new material is discovered. If you know or have seen a unique set of icons which are not included here , please leave a link here in the comments

1. Easy Slider – Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.

2. Coda-Slider -  Coda-Slider is a jQuery plugin which mimics the slider effect on the promo page for Panic’s Coda software

3. Gallerific – A jQuery plugin for rendering rich, fast-performing photo galleries

4. supersized – A fullscreen background/slideshow jQuery plugin

5. s3Slider – A wonderful slider plugin

6. AnythingSlider – AnythingSlider is an attempt at bringing together the functionality of all of other sliders

7. Galleria – Galleria is a JavaScript image gallery written in jQuery

8. Apple-like Slideshow Gallery – A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

9.Slider Gallery – A showcase slider like on the Apple website

10. jFlow – jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 1.9kb minified!!!.

11. A Slick Slider using Coda slider – A styled Coda Slider

12. Moving Boxes – yet another jQuery Slider

13. slideViewer – slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML.

14. Accessible News Slider  – Accessible News Slider is a JavaScript plugin built for the jQuery library.

15. Featured Content Glider – This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, "glide in" slideshow.

16. wSlide – wSlide will allow you to turn any list into a kind of viewer, both for text and images

17. Featured Content Slider – A featured content slider using the jQuery UI library.

18. jQuery UI  Content Slider – An attractive and functional content slider using the jQuery UI slider widget.

19. jQuery Cycle – The jQuery Cycle Plugin is a lightweight slideshow plugin.

20. Pikachoose – Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

21. Start/Stop Slider – Yet another slider with start and stop controls.

22. CrossSlide – CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself

23. Spacegallery – Another Image Gallery

24. jQuery Image Scroller – An image scroller, making use of jQuery’s excellent animation features

25. jQuery Image Slideshow – A simple image slide show with a semi-transparent caption using jQuery

26. jQuery Smooth Div Scroll – Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right.

27. Gallery View – GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view.

1.Jquery Version Of Light Box – Jquery version of the Original Lightbox plugin by Lokesh Dhakar

2.Facebox – A jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

3.Sexy LightBox – A sexier and lite version of Light Box available in jQuery and Mootools Platforms

4.PiroBox – another lightbox with jQuery

5.Fancy Box – displays images, html content and multi-media in a Mac-style "lightbox"

6.Light window – Renders any type of Media onto a modal box

7.Shadow Box – Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats.

8.prettyPhoto – prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox.

9.Super Box – jQuery Superbox! is a script which allows you display windows with the lightbox effect.

10.CeeBox – An overlay popup script for easily embedding flash video, displaying images, or showing html (either external sites via iframe or content on your own site via AJAX).

11.Thick Box – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

12.Dialog jQuery plugin to display modal dialogs, messages , alerts forms etc.

13.ColorBox – another modal box which can display photos, photo groups, slideshow, ajax, inline, and iframed content

14.Boxy –  Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. I

15.NyroModal – Another Modal Box with animation callbacks and much more..

17.jqModal – jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.

18.SimpleModal – SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development.

19. imgBox – imgBox is a jQuery plugin that implements a smooth zoom effect on images.