How to Add Tweet Box to Blogger

8/19 10:51:00 AM Thursday, August 19 , ,

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 == "item"'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link="<data:post.url/>";
twttr.anywhere(function (T) {
T("#bp_tweetBox").tweetBox({
width: 560,
label: "Share the L❤ve  & Retweet",
defaultContent: "RT @bloggerplugins <data:post.title/>"+" "+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 :)

44 comments :

  1. Anup @ Hack TutorsAugust 19 at 4:42 PM

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

  2. AnonymousAugust 19 at 8:26 PM

    thanks

  3. Google Adsense Code ConverterAugust 21 at 11:33 AM

    Thanx Very Match

  4. CrazycoolAugust 23 at 8:27 AM

    Coll one buddy. Really useful one.

  5. Josef VaziriAugust 23 at 3:30 PM

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

  6. AnonymousAugust 25 at 2:34 AM

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

  7. ShaileshAugust 25 at 9:50 AM

    thanks for tweet box

  8. Stefania RotariuAugust 28 at 11:19 AM

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

  9. AK 47August 28 at 1:33 PM

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

  10. SadinAugust 29 at 11:31 AM

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

  11. TrigonalSeptember 1 at 12:25 AM

    thanks bro :D

  12. UnknownSeptember 2 at 8:39 AM

    thanks, i try this. keep post bro

  13. Yodi InsigneSeptember 3 at 1:36 PM

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

  14. AnggaSeptember 6 at 10:56 AM

    not work on mozilla ? why ?

  15. Vivekanandan Manokaran - Software EngineerSeptember 10 at 4:13 PM

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

  16. SamanwayaSeptember 15 at 4:21 PM

    thats beautiful thank u very much

  17. FernandoSeptember 15 at 8:40 PM

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

  18. AprocltdOctober 11 at 4:33 AM

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

  19. DOFOLLOW BLOGSNovember 9 at 10:47 PM

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

  20. UnknownDecember 3 at 2:19 PM

    awesome..
    can the defaultContent work on classic template?

  21. AdminDecember 8 at 10:42 AM

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


    Thanks

  22. Bryan RennickDecember 14 at 7:34 PM

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

  23. TeamKristenSiteDecember 26 at 1:56 PM

    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 >,<

  24. DanielDecember 29 at 6:37 AM

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

  25. LDIIDecember 30 at 12:31 AM

    Cool widget. I like it, thank you.

  26. Janice Temple RobinsonJanuary 26 at 7:33 PM

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

  27. The Teachers WifeFebruary 11 at 12:58 AM

    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??

  28. AnonymousFebruary 20 at 10:21 AM

    its difficult :((((((

  29. AnonymousFebruary 22 at 6:46 AM

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

  30. TJ @ Measuring FlowerMarch 4 at 10:40 PM

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

  31. TJ @ Measuring FlowerMarch 6 at 8:59 AM

    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!

  32. UnknownMarch 7 at 11:43 PM

    @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 : selective-display-of-blogger-widgets-on.html

  33. UnknownMarch 13 at 8:57 PM

    how to shorten links in the box

  34. RevolutionMarch 28 at 7:06 PM

    Nice Post ^.^

  35. Sumeet KumarApril 3 at 2:12 AM

    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?

  36. joey39April 5 at 1:46 PM

    Thanks

  37. Gray CollinsApril 23 at 12:15 AM

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

  38. AnonymousMay 17 at 8:41 PM

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

  39. aget24May 28 at 2:23 AM

    Nice Information....Thanks for sharing

  40. UnknownMay 31 at 9:22 PM

    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

  41. Maulik SonparJune 23 at 3:04 PM

    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 :-

  42. mark angeloAugust 1 at 10:54 PM

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

  43. UnknownJanuary 7 at 9:58 AM

    thnaks

  44. J ElliottApril 25 at 12:59 AM

    hey! this doesn't work anymore because twitter changed the rules. There is no longer a option to click 'read and write'