"If you can get along with everyone and everyone loves you, then you don't stand for much. A person who stands his ground for his principles and won't compromise his integrity is not loved by everyone."
- Larry Winget

How to Display Your Twitter Status Message in a Speech Bubble in WordPress

Image representing Twitter as depicted in Crun...

I got my idea from Tim Ferris’ blog…

You see that nice speech bubble effect? It is actually quite a pain in the neck to create with pure CSS and images. It is possible to create it with pure CSS code in Firefox but not in Internet Explorer. I decided to go with Will Mayo’s CSS Speech Bubbles because the code is simpler than other similar speech bubble scripts I found on the internet. I further simplified Will’s code to cut out the unnecessary code and make it even more idiot proof.

Step 1: Download Will’s CSS Speech Bubbles

Download Will’s CSS Speech Bubbles and extract the zip file’s contents to your computer. This script uses the Curvy Corners Javascript by Cameron Cooke and Tim Hutchison. This is a really cool way of creating rounded corners without messing around with images. The image files in Will’s package are for the part where the speech bubbles connect with the text but they have nothing to do with the rounded corners.

If you open “index.html” from Will’s files, you will see the examples above. We have 2 challenges to make it look like Tim’s blog.

  1. The “triangle” of each speech bubble is pointing downwards but we want it to point to the left.
  2. We want to add an image to the left of the speech bubble but the default code won’t align to the right of the image.

Step 2: Download and Install Twitter for WordPress

I tested about 5 Twitter plugins that claimed to display the latest Twitter status messages on your WordPress blog. Some did not work at all, while others did not work like I expected. I settled on Twitter for WordPress because it is easy to install and customize.

Step 3: Tweak Will’s CSS Speech Bubbles

This just won’t work out of the box for our desired layout. Before we do that, let’s take a look at Will’s default code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
	<script type="text/JavaScript">
	  window.onload = function() {
	      settings = {
	          tl: { radius: 10 },
	          tr: { radius: 10 },
	          bl: { radius: 10 },
	          br: { radius: 10 },
	          antiAlias: true,
	          autoPad: true
	      }
	      var myBoxObject = new curvyCorners(settings, "rounded");
	      myBoxObject.applyCornersToAll();
	  }
	</script>

This is what you must have within your head tags. I shall put all that window.onload code into a Javascript file and load it from there.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* Normal Bubble */
div.bubble {
	width: auto;
	font-size: 0.75em;
	margin-bottom: 24px;
}
 
div.bubble blockquote {
	margin: 0px;
	padding: 0px;
	border: 1px solid #c9c2c1;
	background-color: #fff;
}
 
div.bubble blockquote p {
	margin: 10px;
	padding: 0px;
}
 
div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(tip.gif) no-repeat 20px 0;
	font-style: normal;
}
 
/* Rounded Bubble */
div.bubble div.rounded {
	margin-bottom: 10px;
	border: 3px solid #fff;
	background-color: #b7e0ff;
}
div.bubble div.rounded blockquote {
	border: 0;
	background-color: transparent;
}
div.bubble div.rounded blockquote p {
	margin: 0px 10px;
}
div.bubble cite.rounded {
	position: relative;
	margin: 0px;
	padding-left: 15px;
	padding-top: 12px;
	top: 9px;
	background: transparent url(tip-rounded.gif) no-repeat 15px 0;
}
 
/* Pimped Bubble */
div#pimped.bubble {
	font-size: 0.9em;
}
div#pimped.bubble div.rounded {
	color: #fff;
	border: 3px solid #fff;
	background-color: #111;
}
div#pimped.bubble cite.rounded {
	background: transparent url(tip-pimped.gif) no-repeat 15px 0;
}

This is the CSS code you should include into your web page or you own style sheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="bubble">
		<blockquote>
			<p>Works great for blog comments!</p>
		</blockquote>
		<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
	</div>
 
	<div class="bubble">
		<div class="rounded">
			<blockquote>
				<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
			</blockquote>
		</div>
		<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
	</div>
 
	<div id="pimped" class="bubble">
		<div class="rounded">
			<blockquote>
				<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
			</blockquote>
		</div>
		<cite class="rounded"><strong>Dark Bubble</strong></cite>
	</div>

For this tutorial, I shall create a speech bubble that is a cross between the first and second examples. I like the simplicity of the first speech bubble but it does not have any rounded corners. The code above shows 3 different implementations of the speech bubbles. I do not understand why Will uses the blockquote tags because I find them rather redundant. I also disagree with some of the CSS code and I shall show you how I cut it down to the bare essentials.

My code is very different from Will’s default samples. Firstly, I uploaded the file “rounded-corners.js” into the “js” folder of my WordPress theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//LOAD THE CURVY CORNERS FOR THE ROUNDED CLASS
window.onload = function()
{
	settings = 
	{
		tl: { radius: 10 },
		tr: { radius: 10 },
		bl: { radius: 10 },
		br: { radius: 10 },
		antiAlias: true,
		autoPad: true
	}
 
	var myBoxObject = new curvyCorners(settings, "rounded");
	myBoxObject.applyCornersToAll();
}

I also created a file titled “rounded-corners-loader.js” with the code above and uploaded into the same folder as the previous “rounded-corners.js” file. Please note that I have renamed the default file name of “rounded_corners_inc.js” to “rounded-corners.js”.

Here’s what you need to add to the header.php file of your WordPress theme:

1
2
<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/rounded-corners.js"></script>
<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/rounded-corners-loader.js"></script>

Here’s my updated CSS code for the CSS speech bubbles. Add this code to the style.css file of your WordPress theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* TWITTER BUBBLE */
#twitter_bubble
{
	width: auto;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
 
#twitter_bubble #twitter_photo
{
	position: relative;
	width: 89px;
	height: 73px;
	margin: 0px;
	padding: 0px;
	background: url("/wp-content/themes/YOURTHEME/images/bg-twitter-bubble-tip.gif") no-repeat right;
	z-index: 10000;
}
 
#twitter_bubble #twitter_photo img
{
	border: 1px solid #D5D5D5;
}
 
#twitter_bubble div.rounded
{
	width: 170px;
	margin: -63px 0px 0px 88px;
	padding: 10px;
	border: 1px solid #D5D5D5;
	background-color: #FFFFFF;
}
 
#twitter_bubble div.rounded p
{
	margin: 0px;
	padding: 0px;
	font-size: 11px;
}

I created my own graphic to display on the left of the speech bubble. I won’t go through the steps on how I created this because that would be a whole different topic. Please feel free to use your image and update the “YOURTHEME” code in my CSS code to match the image folder of your WordPress theme.

Now we shall display the speech bubble and your avatar in your WordPress sidebar. I am assuming that you already have a picture ready. I created 73 px by 73 px picture of myself. Feel free to create a picture with whatever dimensions you want but you would have to edit some of the CSS code. Alternatively, you may use Gravatar avatars to replace the code below.

I design my sidebars with a fixed width therefore I manually restrict the width of the speech bubble to make it look good within my sidebar.

1
2
3
4
	<div id="twitter_bubble">
		<div id="twitter_photo"><img src="<?php echo bloginfo('template_directory'); ?>/images/icon-twitter.jpg" alt="" width="73" height="73" /></div>
		<div class="rounded"><p> on Vincent's <a href="http://twitter.com/vincentliaw" rel="nofollow">Twitter</a>, <a href="http://friendfeed.com/vincentliaw" rel="nofollow">FriendFeed</a>, <a href="http://www.linkedin.com/in/vincentliaw" rel="nofollow">LinkedIn</a> and <a href="http://www.facebook.com/people/Vincent_Liaw/701298781" rel="nofollow">Facebook</a>.</p></div>
	</div>

Twitter for WordPress has a bunch of options for you to configure. Please refer to the plugin’s site to find out more about how you may customize the Twitter status messages if my preferred settings do not suit your needs. The Twitter messages end with the time of the message like “12 hours ago”. I simply added my own text “on Vincent’s Twitter….” with links to my social networking accounts with the same update. I use Ping.fm to post status messages to my social networking accounts to save me time.

This tutorial seems very long but it really is quite simple. I briefly explained the differences between my code and Will’s code, which took up quite a big chunk of this article. You might have to tweak my code further to make it look good on your web site.

Please check out my internet marketing blog to see it action as I have not added this Twitter speech bubble to this blog at the time of this post. Let me know if you have questions about this tutorial and ideas to improve it further.

Tagged As: , , , , ,

Posted by Vincent on 6 November 2008 12:00 AM in Wordpress Help You can leave a comment, or trackback from your own site. |

Similar Posts

Did You Enjoy This Post?

Subscribe to our blog through our RSS feed or email to receive updates on more posts like this. post on your favourite social networking or media site to let others know about this post. Help us generate more buzz by submitting/voting for this post with the following buttons.

7 Comments On “How to Display Your Twitter Status Message in a Speech Bubble in WordPress”

On 9th January 2009 4:30 PM, dyxNo Gravatar said:

how do i add it in my about.php together with the styling?

On 13th January 2009 12:25 PM, VincentNo Gravatar said:

You need to create a new about page template. Modify the default page template and call it something like “about-page.php” and edit the code at the top of the page to call it something like “About Page”.

When you create a page, select this “About Page” template as your page template.

On 13th January 2009 1:38 PM, dyxNo Gravatar said:

I’ve already got the php ready. I’m using a sidebarless template, and would like to put this feature on the content say, after the About header. I’m not really versed with php, and I’ve only manage to put it before the About header without the bubbles and all :(

On 27th May 2009 3:22 AM, Twitter SearchNo Gravatar said:

thats great that you are talking about the twitter api,a good example of searching with the twitter api is on twiogle.com because you can search on twitter and google at the same time.

On 12th September 2009 1:08 PM, Storm Shadow CostumeNo Gravatar said:

Hey, Im a newbie to twitter so am still learning a lot. I just checked out twiogle.com and it seems to be a easy way to find relevant comments! Thanks for sharing!

On 4th November 2009 5:10 AM, ScriptoManiacNo Gravatar said:

Excellent post..Keep them coming :)
Thanks for sharing.

On 11th November 2009 5:23 PM, nichiveNo Gravatar said:

this is indeed a very useful tweak, thanks for sharing the tips.

9 Trackbacks On “How to Display Your Twitter Status Message in a Speech Bubble in WordPress”

Post a Comment


(Required)


(Required)