502 Twitter Widget Tools, Buttons, and Icons for Engaging your Followers

Twitter is continuing to grow at a most overwhelming rate. As more and more people use twitter...be sure to utilize these twitter resources on your blog or website as a tool to to expand and connect with your twitter community.



Widgets and buttons are a great way to grab your readers attention and hence increase your twitter community. Below you will find links to different sites where you can attain the source code for these widgets and icons. Please enjoy thoroughly!

Twitter Widgets

ReTweet Button
A powerful twitter widget which allows your readers to easily share your blog posts. The button also displays a live count of the amount of times the post has been tweeted! ReTweet allows you to choose from two different sizes of buttons.

TweetMeMe Button
This twitter widget is very similar to the ReTweet Button but is stylized with a green interface.

BackType TweetCount Widget
The widget also counts the number times a certain URL has been tweeted. The great thing about this counter is that you can fully customize it. Choose the background color, border color, text color, etc.

Twittley
Yet another twitter button which displays the number count of tweets in real-time.

TwitterCounter
This widget shows off how many people are following you on twitter. Surely, you'll be able to impress a few tweeters.

TwitterRemote
This widget shows which twitter users recently visited your blog or website.


TwitStamp
This badge displays your latest tweet with many different styles to choose from.


Chris' Original Twitter Badge
Chris has created a snazzy looking twitter badge which loads in no time.


TwitGif
Create a twitter badge for your blog which scrolls through your most recent tweets.

Twitt-Twoo
A WordPress Plugin which displays your twitter status.


Twitter Tag
Here is an automatic updating twitter image for your website or blog.


TwitSig Badge
This twitter image updates with your latest tweet by creating a new image every time you update your status. With this in mind, the twitter badge shouldn't take too much time to load on your blog.


Official Twitter Profile Widget
This widget loops through your tweets and has a full range of customization options. The twitter widget allows you to choose the color scheme, dimensions, and whether or not to loop through your old tweets as well.

Add Twitter to MySpace
The MySpace Flash Widget integrates Twitter into your MySpace profile page. This is a great twitter widget for myspace!


Twitter Gadget for Blogger
Simply display your recent updates on twitter as a list with this gadget. Also featuring a "Follow me On Twitter" link at the bottom of the widget.


Go2Web20 Badge
A simple image which floats on the side of your blog and directs readers to your twitter page when clicked on. Choose whether or not to display "Follow Us", "Follow Me", "Follow", or "My Twitter" in the image. Most people choose the Follow Me on twitter widget instead of the follow us on twitter button because it sounds more personal. You may also customize whether or not to display the twitter widget on the left or right side of your webpage.


TweetSnap
TweetSnap creates an image for your twitter account which will always display your latest tweet.


TwitterSticker
Another website which creates an image of your latest tweet. TweetSticker allows you to customize the font color, font size, text padding, and text wrap.


Twitterati Badge
A unique twitter widget which displays your twitter friends. Click on one of your friends and you'll be directed to their actual website.

Twitter Buttons and Icons

225 Buttons from TwitButtons.com
TwitButtons allows you to easily copy and paste their button code into your site.


80 Buttons from TwitterButtons.com
Make sure to click "More Twitter Buttons" at the bottom of their site to see the full collection. This follow us on twitter widget is my favorite!


Cute Twitter Bird by The Design SuperHero
3 Variations of the Twitter Bird with 5 different Resolutions.


Twitter Bird by WeFunction
3 more adorable variations of the twitter bird. 


The Social Bird Icon Set
20 Wonderfully original twitter icons by popular artists for your inspiration. These icons have been released by InspiredMagazaine.


TweetBird Icon
1 icon which comes in 512×512, 256×256, 128×128, 64×64 and 32×32 pixel sizes.


TweetaBird Icon Set
2 more cute icons by LittleBoxOfIdeas. Featuring a twitter bird cheerleaders and a queen twitter bird.


Twitter Icon Promo Pack
53 Twitter Icons by WebTreats for you to grab and use on your site. 


German Twitter Buttons by MTS
10 more twitter buttons for you to enjoy!


Twitter Graphics by Graphic Leftovers
16 twitter graphics in different shapes and forms; such as eggs,lightbulbs,bottle caps, and more.


Twitter Birds by Inaliblast
8 flying twitter bird icons.


Twitter Bird Icon Set by ProductiveDreams
6 High Quality transparent PNG twitter birds.


Free Tweet Tweet Vector Icon Set
1 Twitter bird with 4 differnet poses, created by ProductiveDreams as well.


Randa Clay Twitter Graphics
18 twitter buttons for gaining new followers.


Happy Birds by WebDesignFM
4 Happy go lucky twitter birds that will encourage both your faithful followers and potential followers.


Twitter Buttons by Blog Marketing Web
31 attractive buttons to enhance the twitter experience.

Is that Everything?

If there are any useful twitter resources that I've missed, please feel free to let us know by leaving a comment. Also, don't forget to subscribe because we'll be coming out with the The Best Twitter Apps and Tools in the near future... Stay Tuned!

Contact Admin Widget

Kontactr is a one-click free contact form service. With Kontactr, you can fight against the amount of spam that you receive daily. Protect your email address by using this highly secure contact form. All you need to do is sign up for a free account and your users will be able to email you right from your website.  This blogger widget will definitely be a great addition to your blog!

1. Embedded on a webpage version [check mine out].
2. Sleek Pop up version [check out the button above]

Get this widget

Recent Posts Widget for Blogger with Thumbnails, Summaries, Comments, etc

Display beautifully crafted links to Recent Posts on your blog with this widget. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.

Features and Customization:

1. The Recent Post Titles
2. Display Post Thumbnails
3. Choose which blog posts to display (choose URL).
4. Display Post Summaries
5. Length of Summaries
6. Display Post Date
7. Display Number of Comments on each post
8. Display Read More Link
9. Display separator between posts
10. Number of Posts do Display
11. Determine height

Install the Recent Post Widget on Your Blog:

This widget is very simple to install. Just simply click the button below to choose which blog you would like to implement it on.

Change the Title Tags in Blogger for More Search Engine Traffic

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.
Example Google Search Results:
You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.

How to Change the Titles:

1. Go to Layout>edit HTML in your Blogger dashboard.
2. Search for this tag: <title><data:blog.pageTitle/></title>
3. Replace this tag with the following code:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

4. Save your template and you should see the results in your web browser as depicted in the images below.
5. It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!

How to Change the Favicon in Blogger

Blogger supplies every blog with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.

What is a Favicon?

A favicon is a small 16X16 image located at the top of your browser in the url bar.

How to Change your Favicon

1. First go to Layout >Edit HTML in your Blogger Dashboard.
2. Backup your existing template before making any changes!
3. Place the code below directly below the </head> tag in your template.

<link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' /> <link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='icon'/>

4. Now save your template.
5. Once your template is saved view your blog and make sure to refresh the page and delete your cookies.

Creating your own Favicon

1. Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet.
http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico
2. You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
3. Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!

Related Posts Widget for Blogger / Blogspot

Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Preview of Related Posts Links:

Error Fix:

If your related posts have not been working correctly:

1. Search for this line of code: http://theblogtemplates.com/scripts/Related_posts_hack.js
2. Replace the URL above withhttps://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js

How to Add Related Posts Widget to Your Blog?

1. Go to Layout >Edit HTML in your Blogger Dashboard.
2. Back up your existing Template before making any changes!
3. Make sure to check the "Expand Widget Templates" box.
4. Search for the </head> tag.
5. Add the following code just before the </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXJfEO96uB32_7q2RibfpRNGUsMXc1Z-BH7vDBnZardWjJWSc6O1XZIVvKA1saXRrQlH1mQ08NYcokFN-YKotccEUhyVv6jq0uTcY-YkQ1iQsS9wHTAd2g2GBIEqUHkGXgzWQfbyNO2A/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js' type='text/javascript'/>

6. Now search for <data:post.body/>. In some of the templates this code may look like this
   <div class='post-body>
   or
   <data:post.body/>
7. Add the following code just beneath the code you just searched for.
   

   <b:if cond='data:blog.pageType == "item"'>
   <div id="related-posts">
   <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
   <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
   </script>
   </div></b:if>

8. Now Save your Template and you're done!

Customization

• In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.

max-results=5

10 Facebook Widgets and Tools for Your Website and Blog

Facebook is the largest social networking site with more than 400 million active users and is growing larger every day! Make sure to use these Facebook widgets for your website or blog to connect with your large Facebook audience. You can use these tools to easily share certain profile information, websites, blogs, and businesses with the Facebook community.

Personal Profile Widgets

Like Badge
Display your Facebook pages for all to see.

Profile Badge
Create a Facebook profile badge to share selected profile information on your website. A profile badge will allow your users to easily connect with you and add you as a friend.

Photo Badge
This photo badge allows you to share your Facebook photos on websites and blogs. Choose from a vertical, horizontal, or two-column layout and also choose the number of photos to be displayed.

Basic Widgets for Website or Blog

Like Box
This allows your users to publish their content and activity to Facebook.

Share Button
A powerful facebook widget which allows your visitors to share your content on Facebook! An excellent Facebook widget for blogger.

Page Badge
Lets you share your Facebook page (one that you have created) information on your website.

Twitter Link
Connect your Facebook page with Twitter. Whenever you update your Facebook page, your twitter followers will be updated as well with a tweet. A great Facebook widget for your website!

Developers Widgets for Website or Blog

Like Button
Allows facebook users to share web pages from your website on their profile.

Comments Box
Lets your users comment on your website content with their Facebook account.

Recommendations
Provides your website users with personalized suggestions for pages to visit.

Live Stream
Lets Facebook users to post and share content in real-time.

Activity Feed
Lets users know what their facebook friends are doing on your website through comments and likes.

Login Button
Displays a login button along with profile pictures of facebook friends who have already signed up.

Facepile
Shows profile pictures of people who have liked your facebook page or have signed up for your webpage.

Registration
Another way for users to sign up for your site.