How to Add Tweet Box to Blogger


image It has been a long time since @Twitter released the @AnyWhere Developer Tool. AnyWhere allows you to seamlessly integrate Twitter into your site using a few lines of JavaScript. You can read more about it at  @AnyWhere Developer Page. Tweet Box is one such @AnyWhere Application, which allows you to add a 140 char Tweet Box onto your blog.

Here is a screen shot of how the Tweet box appear on my Previous Post.

image

Hope that now you got a good idea of how this works, If not scroll down to the bottom of the post and see it in live action :)

How to add the Tweet Box on a Blogger Blog?

1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.

image

Make Sure that you have checked the Read & Write Option when you Register your Application

2.When you complete the signup process, you will get some JavaScript codes, with a unique  API Key

Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.

image

3.Now Login to your Blogger Dashboard and navigate to the Edit HTML Tab under Design and “Expand your Widget Templates

4.Look for

</head>
and paste the copied Twitter JavaScript just above that line and save the template.

5.Now look for

<data:post.body/>
and immediately below that paste the following JavaScript Code and save your template. (Editable parts are shown in red)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Share the L&#10084;ve  &amp; Retweet&quot;,
defaultContent: &quot;RT @bloggerplugins <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link
});
});
</script>
</b:if>

Now you should see the Tweet Box on all of your post pages

Currently, this doesn’t do any URL shortening . You can expect that it my next post. I will  also try to post about the other @AnyWhere features soon :)

Share your opinions and if you have any questions about the tweet button, feel free to ask :)

43 comments: Add Comment
Anup @ Hack Tutors said...

Amazing Aneesh! Thanks for sharing for this wonderful info :)

Anonymous said...

thanks

Google Adsense Code Converter said...

Thanx Very Match

SjAy said...

Coll one buddy. Really useful one.

Josef Vaziri said...

Can you please do a "how-to-add-facebook-comment-box-on-blogger-blogs" tutorial?

Dominick Scarfogliero said...

can you add it to the main page on blogger not just below posts?

shailesh tripathi said...

thanks for tweet box

stef said...

Thanks, I translated my blog and I hope and others.
I do not understand something else,but now is good.
stef

AK 47 said...

thanks for a nice article ! I have used the same on my blog and worked best for me !!!

Sadin said...

great job very helpfull and Dominick i think you can just play around with the code a bit mate

Trigonal said...

thanks bro :D

Angga Pradipta said...

thanks, i try this. keep post bro

Yodz de Veas Insigne said...

another awesome information. I'm looking for this for a long time.
I'll include this on my site.
Thanks a lot!

Angga said...

not work on mozilla ? why ?

Vivekanandan ... Developing Entrepreneur ... said...

really mind blowing one. .... and sure we are expecting for your next article, with URL shortening also ../.

Samanwaya said...

thats beautiful thank u very much

Fernando-Alejandro said...

unfortunately this one didn't work but thanks anyway. will be dropping in again

Aprocltd said...

is there a way to bind a shorten link in? its an awesome script thanks

DOFOLLOW BLOGS said...

good one. visit this website to check the script in action at www.weblinksnetwork.com submit your website and boost your pagerank and traffic for free.

Rizh said...

awesome..
can the defaultContent work on classic template?

freedownloading said...

I tried and follow your instruction and it won't appear please help to review my creative and reply me your recommend.

http://www.creativelayer.blogspot.com

Thanks

Interesting Internet Finds said...

Works great! thanks - now if there was a way to shorten the url's........

TeamKristenBlog said...

Uhh... finding the codes is like finding a needle in a haystack -____- my eyes are like burning after looking at the computer for like 2 hours searching for it >,<

Daniel said...

i couldnt find this code!
i copied it in the search box on Chrome. help please.


history_689@hotmail.com

LDII said...

Cool widget. I like it, thank you.

Skychi said...

Thank you for the directions. I will give it a try.

The Teacher's Wife said...

Before step 2 after I've clicked complete registration- my next page does NOT have an HTML code. :( it has an api key- but no javascript or code of any sort for me to copy- I can't figure out why. I've tried recreating it 4 times and it does the same things every time- any ideas??

Madiha Rabbania ☺ said...

its difficult :((((((

Michelle M. said...

same for me, no HTML code. Just the API key...

TJ @ MeasuringFlower.com said...

One question. How do you get it to appear only on certain Blogger posts? Like as a giveaway entry?

TJ @ MeasuringFlower.com said...

I have a question. Do you know how to add the Tweet Box to specific posts on Blogger? For example, I would like to use it so people can easily tweet as a giveaway entry, with set words in it and a set height/width. Thank you very kindly!

Blogger Plugins said...

@TJ - the code in this post uses some conditional b:if statement to show the tweetbox on post pages only. You can modify this b:if statement to show it on a particular post page only.

Refer : http://www.bloggerplugins.org/2009/06/selective-display-of-blogger-widgets-on.html

X'inc said...

how to shorten links in the box

Revolution said...

Nice Post ^.^

Sumeet Kumar said...

Nice Post, I followed both of your (Add Facebook Share and Add Tweeter count) But i have a little problem, that both are attached with each other... Is there any way to create space b/w them?

joey39 said...

Thanks

@diaryofaledger said...

Is there any way of changing the colour of the "Share the Love' bit? As it appears very dark on my site.

@Rainbow_Blues said...

Hey, is there any way I can just add a tweet box in a HTML/Javascript gadget in my sidebar or footer? Thanks ;)

aget24.de said...

Nice Information....Thanks for sharing

Bláithín said...

Hi there!

I'm having a bit of trouble with this. I got the first piece of code in fine but can't locate the second part [point 5] is it up near the 'head' or further down? Which heading does it come under?

Thanks a million
B

Maulik Sonpar said...

I agree with Bláithín I too have the same problem cant solve the second part of your task dear of adding the second big chunk to my blogs html code !!!! I cant fine :-

http://www.hiya.co.in
http://www.rangolie.blogspot.com

mark angelo said...

my blog is getting gorgeous beacuse of your amazinf tips... two thumbs up for you and your blog! :)

Premium For You All said...

thnaks

Post a Comment