Like it? Tweet it!

A tweeting widget for visitors to your blog or website

by Andy Graulund

“Like it? Tweet it!” is a jQuery-powered JavaScript widget that enables visitors to your website or blog to write a tweet about the site directly in a box displayed in the corner of the website, with a link to the site already embedded in the input field.

The widget is a unique opportunity for site owners because it makes it easy for users to share your site with friends while still giving them the opportunity to type out something cool for themselves and thus avoiding auto-tweets.

The tweet box is activated when users click on a link you specify, and Like it? Tweet it! has tons of customization options which you can play with to make the widget totally blend in and become one with your site.

The widget is based on Twitter’s new @anywhere API: signing in is seamless, and once it’s done, users are signed in on all Like it? Tweet it! boxes across the internet.

Looking for a demo? Click to open the tweet box on this very page!

Installation

→ See fast installation guides for: WordPress Tumblr Blogger

One of the best things about installing Tweet it is: You don’t need any API key. You don’t download any files. The only thing you do is add some code to the <head> section in your HTML.

First, make sure you have jQuery installed on your website. If not, go to the jQuery website and install it, then come back here. I’ll be waiting.

When that is settled, you have to insert two different snippets of HTML. First, let’s link up the script with the below code (notice the new script URL):

<script type="text/javascript" src="http://tweet-it.st.pongsocket.com/tweet-it.js"></script>

Then, once it’s been loaded in, we need to configure it and run it. This is the point where you have to specify where the user needs to click to open the tweet box. Simply use jQuery’s built-in “Sizzle” CSS selector to do this. For example, in the below configuration snippet, we’re targeting any link element inside any element with the class tweet-this:

<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt();
	})
</script>

Then, of course, you have to create the link element for the script to bind to it. If you use the above example, something like this would be appropriate:

<p class="tweet-this"><a href="javascript://">Like it? Tweet it!</a></p>

Note: If you want to decide the exact shortlink that is going to be present inside the tweet box when people type, you also have to embed this in your <head> in a standardized way. One example could be:

<link rev="canonical" type="text/html" href="http://bit.ly/whatever" />

If you don’t do this, Like it? Tweet it! will generate a shortlink for you. This means that to prevent creating the same shortlink over and over, we will save the site address and the corresponding shortlink in our database. We won’t use this information for evil, but we thought you should know.

That’s it! It should now be fully functional on your site. If you want to customize it further, read on. If it still doesn’t work, head over to our support forum.

Customization

You can do a lot to customize this script to your liking. In fact, one of the core philosophies of the script is that mass production gets boring. If you see the exact same widget on every blog, it just ends up being noise. Just like we fight auto-tweeting with this widget, we also want to fight this kind of everyone’s-the-same philosophy. That’s why we encourage site admins to customize the heck out of this. And we try to make it as easy as possible.

The way to customize this script is the same way you’d customize a jQuery plugin. You can pass an object literal with various options in it as the main argument to the tweetIt function. For example, instead of the initialization code found in the previous section, one could use the following snippet:

<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt({
			animate: "fade",
			header: "Tweet my stuff!",
			cssFile: "http://example.com/styles.css"
		});
	})
</script>

The above code snippet would make the tweet box fade in when it’s activated (as opposed to sliding), and once activated, it’ll have “Tweet my stuff!” as a header and extra styles found in the linked CSS file.

This is just an example of what you can do to customize the widget. Please refer to the below table to see all configuration options. You can then mix and match as you please.

Key Default value Description
linkEl none If you can’t (or won’t) put a shortlink in a <link /> element in the <head>, you can specify here a jQuery object instead where the shortlink is present as text inside the element matched. Example value: $(".shortlink span")
linkSeperator " — " The seperating character between the text the user types and the embedded shortlink. You can decide if it needs space on just one of the sides of it, or both. If you don’t provide any space around the character, Tweet it! will add spaces on both sides.
typeATweet "Type a tweet here" The placeholder text for where people need to type their tweet.
header "Like it? Tweet it!" The header in the tweet box.
intro (long text; see screenshot) The explanatory text found in the top of the tweet box.
animate "slide" How (and if) the tweet box should animate upon being opened and closed. Acceptable values: "slide", "fade" or false.
cssFile none A CSS file that will be linked inside the tweet box frame or popup. This allows you to add your own styles to the tweet box. You need a full absolute link, e.g. one that starts with http:// or similar. How CSS works within the script »
hostedBlog false If the script is running on a hosted blog with less customization abilities, make this true as it helps implementation a bit by making sure the script is only run on individual post pages and not listing pages like the front page or archive pages.
popup false Whether the tweet box should open in a popup window instead of being an overlay in the corner of the original window.
popupWidth 500 If using a popup, you can specify a different width of the popup window here.
popupHeight 233 If using a popup, you can specify a different height of the popup window here.
There’s a couple of other UI label options. Show all »
tweetButton "Tweet!" Text for the Tweet! button.
closeButton "Close this panel and cancel tweet" Text for the tooltip of the X button.
emptyConfirm "Are you sure you want to send a tweet with just the link?" Text being displayed if people don’t type anything but just click Tweet.
youare "You’re" Text being displayed to the left of your Twitter screen name when logged in.
signoutLink "Sign out?" Text being displayed in the Sign out? link to the right of your Twitter screen name.
tweeted "Tweeted!" Text being displayed when the user has successfully sent off a tweet.
findingLink "Finding link…" Text being displayed momentarily when Like it? Tweet it! is generating a shortlink.
notConnected "To write a tweet about this page, please *log in first* by clicking *“Connect”*" The text being displayed before a Connect to Twitter button when the user hasn’t signed in yet. You can use *asterisks* to indicate bold text.

If you want to customize the style of the widget, there’s two places you can add styles: On your own page and as a cssFile option. Since the widget is in a frame, but the container with shadow is not, there’s some styles being defined within the frame, and some outside the frame. For more information, check out how CSS works within the script.

Who made this?

My name is Andy Graulund, and I’m a guy who lives in Copenhagen, Denmark. My Twitter username is @graulund, and you can follow me on Twitter for updates to this script and other cool stuff.

I have a weblog called Pongsocket and also an empty personal website.

I also recently created Tweet Nest, a browsable, searchable and easily customizable archive for your tweets that you host on your own server.