New Blog Online: twitter

Showing posts with label twitter. Show all posts

Home » Posts filed under twitter

How To Add Twitter Official Tweet Buttons to Blogger

Few days ago Twitter has introduced their own tweet buttons for web masters.Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3 types of Beautiful Tweet buttons : Vertical count, Horizontal count and No count.Here I am going to describe how to add these Twitter buttons to your blogger blog.

If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.

1.Login to your blogger Dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

<div class='post-header-line-1'/>

4.Now Copy your "Twitter tweet button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button" code just before <data:post.body/> .

Code 1 : Vertical Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:

Code 2 : Horizontal Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:

Code 3 : No Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:

Note :
Remember to replace "TWITTER-USERNAME" with your real Twitter username.

If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.

5.Now save your template.

You can view more info from here:

http://twitter.com/goodies/tweetbutton

Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :

http://dev.twitter.com/pages/tweet_button

How To Display Recent Twitter Tweets Using JQuery

Do you want to show your recent tweets inside your website or blogger blog?Then,this tutorial will helpful for you, to add recent tweets into your website using Jquery.Your recent tweets will load fast using jquery and also you can change number of tweets must display very easily.If you want you can read advanced details about tutorial from here: http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

Twitter is a social networking and microblogging service, owned and operated by Twitter Inc., that enables its users to send and read other user messages called tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page.

Now follow the steps given below to add this recent tweets widget to your website or blog.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

function showTweets(elem, username, number)
{
var html = '<ul>';


var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{

$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";

elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}

$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'btipandtrick', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2mcM4zWtabZVUHQa2o8cpI2w8BYaEi0AkjwZguV9mlJnqjVNalcxR-BUbyBquJkwwwhcjcTd9d1xykKVp0dKUTKoDHsDxndzxryFB4jGXvuG2q5fFe8tSHO6MjJ1gskMl8kMz_UHXz0/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

NOTE :
btipandtrick : Replace this with your twitter username.

5 : Number of tweets must appear.

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/btipandtrick">Follow me on twitter</a></li></ul>
</div>

You are done.

How To Add Twitter Follow me Button to Blogger/Website

This tutorial will explain to you how to add Twitter Follow me Button to your blogger blog or any other web site.This service is provided by Tweetmeme.com.This Follow button is for website and blog publishers that want to encourage their audience to follow them on twitter. This button provides the interface to see the follower count of a particular user and a button which upon pressing opens the follow pop-up providing a number of different views and statistics about the user from additional services such as Twitter Grader, Twitalyzer and Twitter Counter.

If you are a blogger then follow the steps below to add this 'Twitter follow button' to your blogger post.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

<div class='post-header-line-1'/>

4.Now Copy your "Tweetmeme Follow Button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Tweetmeme Follow Button" code just before <data:post.body/> .

Code 1:

<div style='float:right; margin-right:10px;'>

<script type="text/javascript">
tweetmeme_screen_name = 'yourtwitterusername';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

</div>

Result:

Code 2:

<div style='float:right; margin-right:10px;'>

<script type="text/javascript">
tweetmeme_screen_name = 'yourtwitterusername';
tweetmeme_style = 'compact';
</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

</div>

Result:

Code 3:

<div style='float:right; margin-right:10px;'>

<script type="text/javascript">

tweetmeme_screen_name = 'yourtwitterusername';
tweetmeme_style = 'square';
tweetmeme_size = '50';
</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/follow.js"></script>

</div>

Result:

NOTE : Remember to replace yourtwitterusername with your real twitter username.

If you are not a blogger,you can too add this code simply your website.

5.Now save your template and you are done.

How to Add Retweet Button to your Blogger Posts

Since Twitter is getting huge popularity these days, adding a cool Retweet Button to your Blogger blog posts can easily get you some decent amount of traffic and promote your content/products to large people in quick time. If you have tons of followers, then you can easily milk it.. ;)

So, here is how to add a nice Retweet button to your blogspot blog posts:

There are two versions of retweet buttons.. one is the default one (looks like digg button) and the other one is Compact version which can fit in small space..

The Code for the Default version is :


<script type="text/javascript">

tweetmeme_url =   '<data:post.url/>';

</script>

<script   type="text/javascript"   src="http://tweetmeme.com/i/scripts/button.js"> </script>

and for Compact version is :


<script type="text/javascript">

tweetmeme_style = "compact";

</script>

<script   type="text/javascript"   src="http://tweetmeme.com/i/scripts/button.js"></script>

Here is how to add them to your blogger post..

If you want it to the left side of blog post..

Find


<data:post.body/>

And Paste this code BEFORE that line..


<div style="float:left;padding: 6px 10px 6px 0px;">

<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

</div>

If you want it to the Right Side of post..

adding retweet button on the right side of blog post

Find


<data:post.body/>

Add this code BEFORE that line..


<div style="float:right;padding: 6px 0px 6px 6px;">

<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

</div>

Note: In the above two cases, if you want Compact button instead of default style, Just simple replace the default style code with compact one (refer step 1)

Finally SAVE THE CHANGES!

How To Display Number of Twitter Followers as Text

This quick tutorial will explain how to show your number of twitter followers in text.If there are many services as Twitter Remote,to show your number of Twitter followers,their badges will add a ugly appearance to your site.So I think this will help you to show how many twitter followers have for your twitter account without using third-party services.This is very easy to do and only spend few seconds.Now follow the steps given below for this.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
   url: 'http://api.twitter.com/1/users/show.json',
   data: {screen_name: 'YOUR-TWITTER-USERNAME'},
   dataType: 'jsonp',
   success: function(data) {
       $('#followers').html(data.followers_count);
   }
});
});
</script>


I have <span id="followers">&nbsp;</span>  Twitter followers.

NOTE : Replace YOUR-TWITTER-USERNAME with your real twitter username.

You are done.

How To Add Twittley Retweet Counter Buttons to Blogger

Twittley is a social network for users to find and share links on Twitter.Harness the power of social networks and viral marketing with the Twittley button. Millions of users use Twitter as a social network so it only makes sense to get your link out to those users.

When a Twitter user arrives at your site, they'll quickly see the distinctive Twittley button. When they click on the button your link will automatically be posted onto their Twitter status so all of their followers can then see the link. Your link will also appear on the Twittley web site where the community can then retweet and comment. All of this is done without the user leaving your site, Twittley does everything behind the scenes.

In this post I explain how to add a Twittley Retweet Counter Button to your blogger blog.If you like to add this Twittley retweet button to your blog then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

<div class='post-header-line-1'/>

4.Now Copy your "Twittley Retweet" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twittley Retweet" bookmarking buttons code just before <data:post.body/> .

Code 1:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 2:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 3:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 4:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 5:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 6:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 7:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

5.Now save your template and you are done.

How To Add Beautiful Subscribe Section to Blogger

Do you like to add a good looking Subscribe section to your blog?Then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmDneFnhkE01ZZ-CAnmUzcISCnRuUJAWfHe3SZYtKuMqF1jaLzKAtBgtRYWZwTv1LSloBGBllGCxQ5EH-TmeBRnSjL3XIEXv2YXecxUkt1x_1B30twqWiyiEuVKHXjllNPLSPgWBeWOI1/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMAKOQHm4D7wpLL_lwLk5_qRPeIApAClGugp8b8CvaE_PQrwsRJWXzsLvjqV3V6qCkwu5rOfrmKV1QosfvzM1nRyDBB2PjF3HHJwwSx6LWCVBYkyEcLdmIiNmFuj4ZNtBXt7zfuwSkYw_y/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKkD24NYjRFmQU_0S-IbQ856D_qi5Dk-dPqyBBu6-7biYxOf7M982ygi-Epe1YJLDMPgPogpGIv95gZ6hufnzynye_TQZv074JahWXCXYaMjq7DmQTYpPJA1R0figpcMCFfQUhMtZfRGy/) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

NOTE : Host RSS.png , EmailRSS.png , twitter.png yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

NOTE : Replace YOUR-RSS-FEED-URL , YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL , YOUR-TWITTER-URL with your urls.

Look at the example below:

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="http://feeds2.feedburner.com/blogspot/WyNa">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa&loc=en_US">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="http://www.twitter.com/btipandtrick">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

You are done.

Twitter Followers Counters For Blogger/Websites

To show your site visitors to how many people follow you on twitter use the one of below code:

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

1.Big Twitter followers counter button:

twitter follower counters for blogs-websites

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=bird">

2.White Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME"></script>

3.Black Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=black"></script>

4.Show your Twitter followers in Text:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=YOUR-TWITTER-USERNAME"></script>

How To Add Topsy Retweet Counter Buttons For Blogger

This tutorial explains to you how to add Topsy Retweet Counter Buttons in below header of your every blog post.There are 2 sizes of this Topsy Retweet Counter Button.You can add any button you like.Follow the steps below to do it:

Topsy Retweet Counter Buttons For Blogger/Websites

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<div class='post-header-line-1'/>

4.Now copy below code and paste it just after the above line.

For Large Button:

Topsy Big Retweet Counter Buttons For Blogger

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

For Small Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

Important : Replace TWITTER-USERNAME with your Twitter username.

5.Now save your template and you are done.

How To Add Retweet Counter Button to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

<div class='post-header-line-1'/>

4.Now Copy your Retweet Counter Button code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template paste your Retweet Counter Button code just before <data:post.body/> .

CODE 1:

<div style='float:right; margin-left:10px;'>
<script src='http://www.retweet.com/static/retweets.js' type='text/javascript'/>
</div>

Result:

CODE 2:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
</div>

Result:

You are done.

How To Add Twitter Updates to Blogger

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

NOTE : Remember to replace TWITTER-USERNAME with your real twitter username.Look at the example below.

Now you are done.

How To Add Retweet Button in Below Each Post Header

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Now add below code immediately after above code.

It will look like this :

<div class='post-header-line-1'/>

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

5.Now save your template and you are done.

Demo

How To Add Twit This! Icon below your blog post

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

]]></b:skin>

4.Now copy below code and paste it before above code.

.share-twitthis{
background:url(http://tinyurl.com/ay2jsc) 10px top no-repeat;
padding-left:42px;
font-size:11px;
line-height:18px;
}

Look at the picture below.

5.Now again scroll down to where you see this :

6.Copy and paste below right after above line.

7.Now save your template and you are done.

How to add Twitter Followers Counter/Chiklet to your Blog

This post explains how to add a Twitter Follower Counter/chicklet widget to your Blogger and Wordpress blogs.. like the feedburner counter

Similar to Feedburner Counter which counts your RSS Subscribers, Twitter Counter counts your Twitter Followers.

Default button :

Code :


<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=username"></script>

Write your twitter account(username) in place of username

There are total of 4 colors to choose from.. You can find them here.

To add in Blogger :
Sign into Blogger � Layout � Add a gadget � html/javascript
paste the code and save it.

To add in Wordpress :
Sign into Wordpress > Widgets > Text
paste the code and save it.

Related:
Adding Twitter Bird image to your Blog

Collection of Twitter Bird Vector Graphics,Twitter Bird Icons,Logos, Twitter Bird psd eps png files

Looking for Twitter bird logo ? Twitter bird icons ? Twitter bird in vector, eps or psd or png format..? then, here is a treat for you.. Adding a cool Twitter graphic to your website/blog can encourage your site visitors to follow you on twitter.
Here is my collection of excellent Twitter bird vector logos,Twitter icon sets,etc. All these are 100% Free to download.

Cute Twitter Bird Vector Art - by Smashing Magazine