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

Vincent — Thu, 06 Nov 2008 00:00:13 +0000

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.

The “triangle” of each speech bubble is pointing downwards but we want it to point to the left.
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.

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.

/* 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.


		
			Works great for blog comments!
		
		John Smith on 1st January 2007 at 3:55pm
	
 
	
		
			
				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.
			
		
		Rounded Bubble using curvy corners
	
 
	
		
			
				Expands to fit any layout and scales nicely with big and small font sizes.
			
		
		Dark Bubble

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.

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

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

/* 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.

	
		 echo bloginfo('template_directory'); ?>/images/icon-twitter.jpg" alt="" width="73" height="73" />
		 on Vincent's Twitter, FriendFeed, LinkedIn and Facebook.

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.

How to Add Tabber to Your WordPress Theme

Vincent — Fri, 31 Oct 2008 00:00:51 +0000

This post is quite similar to my previous post on how to add MooTabs to WordPress. I recently tested Tabber on my internet marketing blog and I find that it is better than MooTabs because it is compact in file size, easier to install and customize.

The default Tabber look and feel is acceptable. I did not need to make a lot of changes to make it look good on my web site. Compared to MooTabs, Tabber requires a lot less work to customize.

Step 1: Download Tabber

Go to Tabber’s web site and download the latest version of Tabber.

Step 2: Upload Tabber to Your WordPress Theme’s Folder

I like to store my Javascript files in a folder called “js”. For my CSS files, I like to store them in a folder called “css”. Let’s assume my template folder is called “cooltemplate”, you should upload the Tabber files in the following manner:

1. /wp-content/themes/cooltemplate/css – Upload example.css here. Alternatively, copy and paste all the contents of example.css into your theme’s style.css.
2. /wp-content/themes/cooltemplate/js – Upload tabber.js here.

Step 3: Add Tabber References to Your WordPress Theme’s header.php

Add the following code to your theme’s header.php file in between the head tags.

1
2

If you only display Tabber on the blog pages, do this to prevent the loading of the Tabber files on non-blog pages.

1 2	<script type="text/javascript" src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/js/tabber.js">script> <script type="text/javascript">document.write('

Maverick Web Creations » javascript

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

How to Add Tabber to Your WordPress Theme