Contents
It is possible to let your visitors write and send tweets from your WordPress site without your visitors leaving your website.
You can do that with a Tweet Box.
A Tweet Box is useful because it can act as a quick contact form and a way for your visitors to send you tips, short questions, or suggestions via Twitter. It encourages your visitors to connect with you on Twitter, and more.
Considering that adding a Tweet Box shouldn’t be that great of a feat, the length of this page may seem too much. Displaying a Tweet Box on your site isn’t difficult. This page is lengthy simply because I wanted to cover all the bases. You’ll get through it like a breeze.
Let’s get started.
Tweet Box on your website
A default Tweet Box without any customization will appear on your website like this:
Example of default Tweet Box without any customization
You don’t actually write the HTML code for the Tweet Box. You simply insert a few lines of JavaScript in your theme and those lines “import” the HTML code from Twitter.com and display the Tweet Box on your website in an iframe — kinda like you insert AdSense code.
Despite that, you can customize almost every aspect of the look and feel of the Tweet Box.
Example of a customized Tweet Box
The above is an example of a customized Tweet Box that could be put anywhere in your WordPress site — at the end of a post, in your sidebar, in the header, or where ever.
The numbered elements above can be customized by modifying the Tweet Box JavaScript code.
- The label that reads “Got tips, suggestions or questions?” by default says “What’s happening?” You can set it to whatever you like
- You can optionally hide the counter
- You can pre-fill Tweet Box with your own text. I put in my Twitter username to encourage visitors to tweet me.
- You can also adjust the height and width of the Tweet Box to position it correctly in your theme.
Notice that the fonts in the custom Tweet Box are smaller than in the default Tweet Box. That’s not because the image is smaller. It is because the font is.
Twitter doesn’t provide a way to customize the visual elements (like the font size) with CSS, but you can still hack-in your own stylesheet to customize the look of the Tweet Box. I’ll show you how shortly.
Inserting the Tweet Box code
Before you can use a Tweet Box on your website, you need to register your website with Twitter here. Simply fill-in your website information and make sure you select “Read & Write” for “Default Access Type.” For “Callback URL”, enter your domain name. Complete the registration and you’re ready to go immediately.
There are two pieces of JavaScript involved in displaying a Tweet Box. The first piece goes in the header.php file of your theme. The second goes where ever you want to display a Tweet Box.
Required header.php code
The first JavaScript code looks like this
<script src="http://platform.twitter.com/anywhere.js?id=[YOUR_KEY]&v=1"></script>Replace [YOUR_KEY] with your API key. To find API key go to this page and click on the name of your application.
Now open header.php of your theme and put the code in an empty line right before </head>. If you’re worried that putting the code in your header.php file will slow your website, don’t be. It’ll be fine.
The header.php code is not only for the Tweet Box, in fact. It is used for all of Twitter’s @Anywhere features of which the Tweet Box is one. The second piece of JavaScript code is directly responsible for displaying the Tweet Box.
Actual Tweet Box code
<div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 100, width: 400, label: "Have a question? Tell me!", defaultContent: "@winkpress " }); }); </script>
Put this code in the spot where you want the Tweet Box to appear.
This is also the block of code that you modify to customize the look and settings of your Tweet Box.
A quick way to put a Tweet Box in your site is to paste this code in a sidebar widget.
Now let’s talk about customizing this Tweet Box.
Customizing the settings and look of a Tweet Box
In the Tweet Box example above, three values were set,
- ‘height’ to 100 pixels,
- ‘width’ to 400 pixels,
- ‘label’ to the text “Have a question? Tell me!”, and
- ‘defaultContent’ to the text “@winkpress “.
There are other possible values that could’ve been set, but they weren’t, so a default value for each one was implicitly given.
You can see all the possible options here.
Customizing the CSS of Tweet Box
Twitter doesn’t provide an apparent way to style the Tweet Box with CSS. But there is a workaround that allows you to embed your own CSS file
(Note: this workaround doesn’t work in Internet Explorer :().
Basically, you specify a URL to your CSS file in the “label” value, like this:
<div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#tbox").tweetBox({ height: 100, width: 275, label: '<link rel="stylesheet" type="text/css" media="all" href="http://winkpress.com/wp-content/themes/winkpress/tweet-box.css" />Got tips, suggestions or questions?', defaultContent: "@winkpress " }); }); </script>
HTML of a default Tweet Box
To give you an idea of what HTML element are available for you to style with CSS, here is the HTML code for a default Tweet Box:
<div id="tweet-box-container"> <div id="tweet-box-header"> <label for="tweet-box" class="doing">What's happening?</label> <span id="counter">140</span> <div id="spinner"></div> </div> <div id="editor"> <textarea id="tweet-box" style="height: 55px; width: 505px;"></textarea> </div> <div id="tweeting-controls"> <span class="btn btn-m btn-disabled"> <button disabled="" id="tweeting-button" type="button">Tweet</button> </span> </div> </div>
Sample CSS
So, if you were put the following line in your tweet-box.css file, you will shrink the size of the “What’s happing?” label and the counter.
#tweet-box-container #counter, #tweet-box-container .doing { font-size: 14px; }
WordPress plugins for Tweet Boxes
There are a couple WordPress plugins that can help you display a Tweet Box, but they are very restrictive in several ways.
WP Tweetbox
At the end of every post, this plugin inserts a Tweet Box prefilled with content like
Tweet Box lets your visitors write and send tweets in your site! – http://winkpress.com/4isQ via @winkpress
There are no customization options. You can’t change the prefilled content, style the appearance of the Tweet Box or anything. Personally, I wouldn’t recommend using this plugin. But you can download it from here if you want >>
Twit Connect
When it comes to Tweet Boxes, I’m afraid this one is even worse than WP Tweetbox. It inserts a Tweet Box right below the comment form. But you have no customization options whatsoever and the Tweet Box is prefilled with an uninspired message like:
“Tweet Box lets your visitors write and send tweets in your site!” (WinkPress) http://winkpress.com/the-rest-of-the-url/
You can download Twit Connect from here, if you want >>
Conclusion
The two WordPress plugins listed above are the only two that can let you display a Tweet Box on your site. Unfortunately, both plugins provide no or very little customization options, which render them useless, in my opinion.
I recommend that you implement a Tweet Box the manual way that I explained earlier in the post.
Hello!
I think I love this, thank you! But I just can’t seem to get it working! Shows up nicely on my site but when I click the “tweet” button, nothing happens! Any thoughts you can share?
hello,
I made this code for some days.
now is that somebody can help me to post the tweet on my own website
Sorry, in the latest tweet the code was not visible, here’s a code snippet:
https://gist.github.com/2023012
Can make this work in Internet Explorer using additional syntax and inline-styles in the label property. Like this:
label: ‘Test’,
Hope it helps.
Have you tried the @Anywhere plugin for WordPress? It seems to do this stuff, plus more. See http://wordpress.org/extend/plugins/anywhere/
Hi, very interesting post, but I am a new in app development for twitter and I have some problems with this code, can you help me?
I have copied the code, and appear this text in the twitter pop-up after login with my user: “Sorry, something went wrong. The client identifier was missing or unknown”.
You know why?
Thanks and sorry for my bad english.
I like to see if I create tweet box without using twitter anywhere plugin.
I liked your blog about integrating Twitter @Anywhere Javascript because it was quite helpful.
However, when I signout of twitter from my webpage that includes the code for @Anywhere, my local computer still seems to be aware about the twitter account. In other words, if I sign in to twitter again using the “Connect to Twitter” button, a small popup screen comes up asking me if I want to connect with my existing twitter account. I want the person to Sign out completely, and any attempts to Connect to Twitter again using my webpage should force the user to enter Twitter LoginID and password again. I pasted some of my JavaScript code below. May I please know how I can make the Twitter signout code within my webpage to force the user signout “completely” ?
<
scripttype=”text/javascript”>twttr.anywhere.config({ callbackURL: “http://www.perlswebapplication.com/perlsTwitterTweetBoxPage.aspx”});//This function Updates HTML elements functionupdate(T){if
document.getElementById(
document.getElementById((T.isConnected()) {‘user’).innerHTML = ‘Logged in as : ‘+ T.currentUser.data(‘screen_name’);’logout’).innerHTML = ‘Sign out of Twitter‘; //Add tweet box T(
height: 100,
width: 400,
defaultContent: “#tbox”).tweetBox({“”});
}
}
twttr.anywhere(
update(T);function(T) {//connect button T(
authComplete: ‘#login’).connectButton({ function(loggedInUser) { // triggered when auth completed successfully update(T);
location.reload(); //reload the page },
signOut: function() { // triggered when user logs out document.getElementById(
document.getElementById(
document.getElementById(
location.reload(); ‘logout’).innerHTML = ”;’tbox’).innerHTML = ”;’user’).innerHTML = ”;// reload the page}
});
});
Perhaps that information is stored in a cookie. If you disable cookies in the browser, do you still have the same problem?
M.K.,
Thank you for responding. That is a good point that you brought up. However, I believe that disabling cookies would be troublesome for the users of my website. Is there any other option?
Thanks,
I am trying to customize the CSS but I am not able to, would you please help. thanks in advance.
Also, is there any way to auto populate the blog post’s link using the blog post ID somehow?
Thanks again!
I am a little confused and I hope you can help.
I used this:
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter(“#custom-tweetbox”).tweetBox({
label: ‘Here’s Why I Found This Post Useful:’,
defaultContent: “@picseshu [fill in your Tweet here and remove brackets] #tiffinbox”,
height: 50,
width: 480,
});
};
I dropped my CSS file here:
http://tiffinbox.org/wp-content/themes/tiffinbox/tweet-box.css
You’ll notice this link mirrors yours. However, it doesn’t work for me … however, sneaky me used your code and it works!
‘Got tips, suggestions or questions?’,
Why?
Thank you!
Thanks for this post. Do you know any site that uses the Tweet Box with custom css? Also, does it not only work in certain versions of IE or all IE versions?
Hi John, I came across some sites that were using custom CSS Tweet Box when I was researching this article — I can’t find them now. Anyway, the custom CSS doesn’t work in IE6, 7, and 8. I’m not sure about 9.