« Back to the front page

How to set up “Like it? Tweet it” on popular blogging platforms

If you run one of the three popular blogging platforms found below, it’s even easier to install the Like it? Tweet it! widget. Simply find the right one and follow the instructions found below.

WordPress

Note: This guide only applies to WordPress being installed on your own server, as plugin installation is not possible on a hosted blog on WordPress.com.

1. Install the WordPress plugin WP Like it? Tweet it! which adds an easy admin interface for setting up the widget, by searching for “like it tweet it” in Plugins > Add New within your WordPress admin interface.

Alternatively, you can also download the plugin as a zip file from the official WordPress Plugin Directory: Extract it and upload the extracted folder to the plugins folder inside your wp-contents folder.

2. Once installed, go activate the plugin on the “Plugins” page in your WordPress admin panel.

3. When activated, click “Settings” and on the page that pops up, you can define your settings and link just like described on the Tweet it! site.

If you want to, you can get the plugin to create a link that opens the tweet box at the bottom of every post or page automatically.

4. Optional: If you want to decide what shortlinks are appearing in the tweet box, we suggest you install another WordPress plugin that embeds this in your <head> in a standardized way. Good examples are WP Bit.ly or if you use YOURLS, YOURLS: WordPress to Twitter.

Alternatively, you can also add a shortlink in a specific element at the end of all posts or pages where you want to decide the shortlink, and then change the configuration appropriately.

Tumblr

1. Log in to Tumblr.com, make sure you’ve got the correct tumblelog title displayed on the right if you have more than one. Then click “Customize”.

2. Open the Theme menu at the top of the page. If you don’t see HTML code, click “Use Custom HTML” at the bottom of the menu.

3. Insert the following code inside the <head> section of your HTML. It’s preferable to insert it before any style or color area.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://tweet-it.st.pongsocket.com/tweet-it.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt({ hostedBlog: true });
	})
</script>

This is where you can change the configuration as you like. However, please keep the hostedBlog setting to true.

If you already have another script in your header that includes jQuery, you can remove the jQuery tag in this code snippet. Just remember to then place this after that already existing jQuery script.

4. Now, finally, look for {/block:Posts} in the HTML code. Then insert the below code just above it (and if there’s a </div> just above it, paste it just above that, like in the image).

<span class="tweet-this"><a href="javascript://">Tweet this</a></span>

You should now see “Tweet this” links on every individual post page on your tumblelog.

Blogger

1. Log in to Blogger.com, and click the “Layout” button next to the blog that you want to modify.

2. Click “Edit HTML” at the top.

3. Insert the following code inside the <head> section of your HTML. It’s preferable to insert it before <b:skin>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://tweet-it.st.pongsocket.com/tweet-it.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".tweet-this a").tweetIt({ hostedBlog: true });
	})
</script>

This is where you can change the configuration as you like. However, please keep the hostedBlog setting to true.

If you already have another script in your header that includes jQuery, you can remove the jQuery tag in this code snippet. Just remember to then place this after that already existing jQuery script.

4. Now, finally, look for the </b:section> immediately following a <b:widget id='Blog1'… in the HTML code. Then insert the below code just below that (see image).

<div class="tweet-this"><a href="javascript://">Tweet this</a></div>

You should now see “Tweet this” links on every individual post page on your blog.

If you experience issues using any of these guides, please ask around in the forum.