Sure, you can have your Facebook fans hunt for a way to contact your business by assuming they will go to your website and hope they find the contact option (if there is one), a phone number (if there is one), you can make them read through the Info tab (did you put a contact email address there?), or hope they will make an educated guess and send an email to support@, webmaster@ or info@.

"Oh, if they really want to get in touch with us, they will find a way." (A true quote from a client)

What happened to convenience? What happened to making it easy for customers, clients and visitors to get in touch with you?

If you had a real brick-and-mortar store, would you board up the front door and instead send your customers on a wild goose chase around the building, to the back alley, up a ramp and still assume they will shop with you?
Yes, we’re open, but we’re not going to tell you how to get to our store.

Just because it’s Facebook doesn’t mean that everything that applies to actual storefronts and *regular* websites suddenly doesn’t matter anymore or that the rules simply don’t apply.

As Facebook becomes more and more of a business tool, businesses slowly realize it is becoming a quasi-necessity to be present on Facebook.
But almost like 15 years ago, when the web first became popular and a website became a must-have — most of them rush in, create a Facebook page because someone told them they had to, and then they don’t care about it anymore.

Sure, Facebook is (still) a new medium (yes, I dare call Facebook a medium here), and there are no real guidelines on how to do it right, there are a couple of things every business should consider when deciding to Go Facebook:

- Branding: Make your Facebook Page look somewhat like your website. At least upload your Company Logo & edit the Info tab. Tell users what they can expect, what business you are in, tell them about the services you provide, your products, etc.
- Interactivity: Facebook has the administrative interface built in. Post updates on your Wall! You do not have to call your web designer to do it. Nobody wants to see a stale Facebook Page (e.g. last update 10 months ago).
- Customization: Default settings are just that. Not changing them is like buying a new house and never furnishing it. Remove unnecessary items from your Page’s navigation, re-order the tabs, add new ones by installing Apps that add value to your Page.

- Must-Haves: As already mentioned above; Facebook Pages do not provide an option to contact the owner or admin directly. Users can only post on your Wall and hope that you are actively monitoring the newsfeed. Give them the opportunity to contact you!
To accomplish this (and to create other Tabs on your Page), you have to use a Facebook App – one like the Contact Form for Facebook by inlineVision.

Their App not only allows you to add a Contact Form to your Facebook Page in 2 simple steps, the Premium Version also allows you to customize and brand the App to your liking — for a one-time-payment of $49 — via a very easy to use Admin Panel (comparable Apps usually come with a subscription fee of around $10/month).

You can upload your Company Logo, customize the colors, add your business address, the phone number, customize the headline and the tagline and specify the recipient of the submitted data. The Premium version also gives you the opportunity to download the submissions in *.csv format so you can import them into your CMS or your mailing list software.

There are no hidden fees and there is no subscription necessary for the service – once your payment has been processed and you have been upgraded, all the Premium Options are immediately available.

$49 is very small price for an App that might prove invaluable for all Facebook Page owners.

Get the Free Version of the Contact Form here.
Upgrade or buy the Premium Version here.

If you ever wanted to insert a (random) thumbnail of another post or a gallery of thumbnails anywhere in your post(s), page(s) or even in your sidebar or footer without the use of a bulky gallery plugin that might not be compatible with your theme or another plugin you installed, thumbnails anywhere is for you.
Download from the Official WordPress Plugin Repository

Quick Overview

Thumbnails anywhere can display post or page thumbnails (Featured Images) OR an image referenced in a post or page via a custom field.

Thumbnails anywhere can be inserted literally anywhere in your content without having to edit the code. And because it uses shortcodes, no PHP code plugin is necessary either.

We packaged it with timthumb (http://code.google.com/p/timthumb/) to give you utmost control over the output.

Prerequisites

WordPress (obvious)
A theme with thumbnail support and shortcode support in sidebar and footer
If your theme does not support thumbnails or if your theme displays the plugin’s source code in the sidebar or the footer, add the following lines of code to your theme’s functions.php file:

For thumbnail support add:

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

For shortcode support in sidebar and footer add:

add_filter('widget_text', 'do_shortcode');

Usage

If you want to use an image referenced via a custom field, simply create a field named full_image_value and enter the RELATIVE URL to your image into the value field e.g. /path/to/you-image-file.jpg.

Absolute URLs can cause issues especially on WordPress installations hosted on hostgator.

Note: If you are using a WordPress MU (Network installation), you must use the custom field option as mod_rewrite will not translate the path to your post thumbnail at that stage.

Thumbnails anywhere works by interpreting WordPress shortcodes and shortcode attributes.

[randomimg] – triggers execution of the plugin
If not other arguments are given, thumbnails anywhere will display 2 thumbnails from randomly selected posts.
Default output size of the images (if no argument are given) is 100×100 px.
PrettyPhoto argument already built-in, requires PrettyPhoto to work properly.

Arguments:
w (in pixels) – the desired width of the image
h (in pixels) – the desired height of the image
cat (ID of the category(ies); e.g. cat=”3″ or cat=”3,5,7″) – one more categories to select thumbnails from
post (ID of the post to extract the image from; e.g. post=”70″) – select image from one particular post
css (e.g. “padding:5px; border:1px solid #efefef”) – add your personal styles to the output
showlink (e.g. showlink=”1″ to show the link) – show the title of the post and create a link to the post underneath the thumbnail image.
num (e.g. num=”5″) – the number of images to display

Examples:
[randomimg post="70" w="250" h="170" showlink="1" css="padding:10px; border:1px solid #efefef"]
Shows 1 image taken from the post with the ID 70, 250×170 pixels with a link to the post and a style of “padding:10px; border:1px solid #efefef” applied.

[randomimg cat="18,20,24" num="6" w="50" h="50" showlink="1"]
Shows 6 images from categories 18,20 and 24, 50×50 pixels and a link to each post the images belong to.

The shortcode can be used anywhere, even in a simple text widget for your sidebar or footer.

Installation

Download the plugin
Extract the files into the thumbnails-anywhere directory
Upload the directory into your WordPress /wp-content/plugins/ directory
Activate the Plugin in your WordPress Plugins menu
Make sure you included the cache folder inside the zip archive in your upload and that the cache folder is writable by the web server.

Configuration

None required

Live Examples

inlineVision is using it to display thumbnails of the various designs.
They also use a slightly modified custom version to create a random gallery of images to display users of their Facebook Apps on their Homepage and their Apps pages.

Please let us know your comments – we appreciate your feedback!

Their newest release of Internet Explorer, IE9, does not render Cufón at all.
Meaning: Everything on your site that you so carefully crafted – probably your menus and headers – simply don’t show up. Not even in ugly Times (New Roman).

Your otherwise beautiful website might look like this:

All menus and H-Tag are missing, which makes the page almost useless.

To check how your site looks in various versions of Internet Explorer, try the netrenderer by GeoTek Datentechnik.

Why I use them: Unlike other sites that offer a similar service, the preview on theirs is almost instantaneous.

When using their service, please don’t forget to add /index.php if you are trying to generate a preview for a WordPress site and are using mod_rewrite to generate Search-Engine-Friendly Permalinks.

E.g. – if your site’s address is http://yoursite.com enter http://yoursite.com/index.php in the box.

How to resolve?

First: Download the new version of cufon-yui.js (current version is 1.09i).

Second: Add the following conditional statement into your site’s header, before all Cufon.replace() calls. When this happens depends on your site’s code, so please check your code.

Third: Make Internet Explorer 9 behave like IE8 by adding this to the header (just before the closing tag should do the trick):

<meta http-equiv="X-UA-Compatible" content="IE=8" />

To be on the safe side I am combining 1) and 2) – simply because I noticed that by only using one IE sometimes still refuses to render Cufón properly.

When done, the result looks like this — all menus and headers are now visible:

Links:
Download cufon-yui.js
netrenderer by Geotek Datentechnik
Official Cufón Site

Quick Overview

It lists all your posts (sorted by date), including post title, link to the individual post, facebook Like, Share, Comment, Total & Click Counts and provides a link to your facebook’s “secret Admin Page” (if available).

Prerequisites

WordPress (obvious)
Facebook’s Like button, facebook’s Share button, either manually or via a plugin.
The following HTML tags in your WordPress theme’s header file:

<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:og="http://opengraphprotocol.org/schema/"
        xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

The following minimum of facebook’s Open Graph tags in your WordPress theme’s header file:

<meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID"/>
<meta property="og:title" content="<?php the_title_attribute( $args ); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php echo get_permalink($post->ID); ?> "/>
<meta property="og:image" content="LINK_TO_AN_IMAGE_ON_YOUR_SERVER" />

By facebook userID we mean your numerical userID, not your screen name.

Make sure you use the correct facebook user ID, because you cannot change it once people started liking your post you can only append it, but you cannot change it.

Don’t forget to Like your own post/page (when logged into facebook as the same user), only then will facebook create the actual facebook page from your post.

You can tell the page is available because next to your Like button you will see a link to the Admin Page (only of you chose “standard” in the button layout).

As soon as this (Admin) Page is available, a link to its Insight location is available via the plugin, right next to the Like and Share counts, from which you get to the actual page (by clicking on the logo).


<sarcasm>Besides the fact that facebook obviously cannot spell “administrator”, this page is a fully functional facebook page. And the people who clicked the Like button are still called Fans </sarcasm off>

Installation

Download the plugin
Extract the files into the fb-socialstats directory
Upload the directory into your WordPress /wp-content/plugins/ directory
Activate the Plugin in your WordPress Plugins menu
Go to FB Social Stats in your Dashboard.

Configuration

We included a style sheet to make the output pretty. It automatically gets loaded when the plugin is called. Feel free to edit it any way you like it.

Known Issues

Occasional long loading times due to facebook API connectivity issues.

Please let us know your comments – we appreciate your feedback!

But eventually we gave in, after doing our research we integrated both buttons into our blog and waited. We waited to see if somebody was actually using the buttons, and what was going to happen when someone did.

While Sharing and Liking are two different concepts, we almost immediately noticed something very odd:

We like this

Of course we clicked our own Like button. Twice. And as expected the number of people who like this increased accordingly to Two people like this.
The Share counter didn’t show any change (expected: as you might know by now you need 3 Share actions for the counter to show). Or so we thought.

We didn’t share this

After the third click on the Like button (by a trusted friend) we found that 3 people like this (as expected), but after a page reload something else had happened as well: the Share counter notified us that our article had been shared 3 times.

Really? Within this short time 3 people had already thought our article was worth sharing 3 times? How come?

Ask the API

We needed to know for sure so we went ahead and queried the facebook API for the URL in question, and this is what we found:

0
3
0
3
0

Does this mean the Share counter is wrong? Does it count the wrong entry (like_count) instead of share_count?

So we shared the article, once by posting it to a facebook user’s profile, and once by sending it as a message and reloaded the page again.

Now the Like counter said: 5 people like this and the Share counter told us the article had been shared 5 times.

We queried the API again and found this:

2
3
0
5
0

To make sure we liked and shared different URLs as well, and after every Like, Unlike and Share action we ran another query to monitor the results.

Temporary conclusion

By now we feel it’s safe to say that the count you see next to the Like button and the count above (or next to) the Share button is the combined count of at least like_count and share_count. At this point we are unable to say if comments add to the displayed count as well (but it might be a fair assumption since total_count is being shown after comment_count).

But there still are 2 different options to express your appreciation for an (external) page: You can *share* it by clicking the *share* button or you can *like* it.

What’s the difference?

To *Like* an article, a page, or any kind of content on the web, all you have to do is click the *Like* button, and your profile will be updated with this information.

Similar to *liking* your friend’s status, link, video or anything else you can post/put on facebook. If there is a *Like* button, that is.

The *Like* button will turn dark blue, your *like* is added to the counter (if displayed), and (most likely) your facebook profile picture will show. Another click on the dark blue *Like* button let’s you "unlike" the item again, your *like* gets subtracted from the counter and your picture gets removed.

The *Share* button is a convenient way to take an article, a video, a picture, or anything else that can be accessed via a URL and post a link to that content on your wall.
It eliminates the steps of copying the URL, opening your facebook page and pasting the URL into the box labeled "What’s on your mind?".

It works in the exact same way as adding a post that contains a link to your wall, you can add a comment to it, select a thumbnail or send it as a message.

The shared URL then looks like any post on your wall that contains a link:

Interesting fact:
The *Share* counter needs a minimum of 3 *shares* until the counter is being displayed. *likes* show up immediately, even if only 1 person *likes* it.

The reason why we decided to display both of them is simple:
You can *like* something but don’t necessarily want to *share* it: maybe because *liking* is quick – click, done.
You can still *share* the article after *liking* it. And vice versa.
Too bad we all cannot *Unlike* the *Like* button.

There is already a variety of Wordpress plugins available for both buttons, and both facebook’s *like* documentation as well as facebook’s *share* wiki have wizards that let you create the button code.

We decided to plug the code into a nice little function and to call it manually, allowing for greater flexibility in choosing when, where and how to display the buttons:

You can see that at the top of the postings we don’t display the *Like* counter or the profile picture; simply because we wanted to keep the button lineup to the right of the article.

At the bottom of the posting however we do show the full *Like* button together with the counter and the profile picture.

Links:

http://developers.facebook.com/docs/reference/plugins/like
http://wiki.developers.facebook.com/index.php/Connect/Using_Facebook_Share
http://wiki.developers.facebook.com/index.php/Facebook_Share
http://www.facebook.com/facebook-widgets/share.php


Antivirus Soft is yet another fake antispyware, similar to Antivirus Live and/or Spyware Protect 2009.

It imitates a system scan and claims to find multiple infections, no matter which shortcut you try to click on or which program you try to start.

Signs of infection:
Usually it starts with balloon notifications in the system tray:

But it quickly gets worse:

And screens similar to this will appear over and over:

Not only is it highly annoying, but do not make the mistake and give in to the scare by *buying their program*: If you do, the makers will also have your personal information and your credit card data!

The removal process only takes about 10 minutes:
Disclaimer: Editing the registry can be dangerous. If you are unsure, contact a professional. We take no responsibility for changes you make that leave your computer in a vegetative state.
Back up your system and your registry before making any changes.

Below are 16 simple steps to remove Antispyware Soft from your computer.

1. Restart your computer in *Safe Mode with Networking* mode (by hitting F8 during the startup process until you are presented with the selection screen). You will internet access later to download/update the removal tools.
If you have access to another computer, you don’t even need to restart. Simply download and copy the 2 files from step 5 and 10 to a USB stick and get the removal process on the infected computer started right away.

2. Open Internet Explorer, click on the Tools menu and select Internet Options:

3. Select the LAN settings:

4. Uncheck Use a proxy server for your LAN:

5. Download Hijack This, but save it as/rename it to iexplore.exe and then save it to your Desktop (alternate download link).

6. Double-Click the iexplore.exe icon to run HijackThis.

7. Click *Do a system scan only* and look for entries like this:

The actual file names might differ, but they all start with O4 and seem to end with sysguard.exe or some other random alpha-combination (badwsftav.exe and bogjsftav.exe in the above example).
The first entry should only be there if you haven’t yet reset the Internet Explorer settings outlined in steps 2-4.

8. Check the box next to these entries and click *Fix checked*.

9. Close HijackThis.

10. Download MalwareBytes Anti-malware (MBAM).

11. Double-click mbam-setup-1.46.exe to install MBAM.
(If you get error messages from the malware that the file is infected or cannot e opened, simply rename mbam-setup-1.46.exe to something else – abcd.exe is perfectly acceptable for our purpose)

12. Make sure that both checkboxes next to *Update Malwarebytes’ Anti-Malware* and *Launch Malwarebytes’ Anti-Malware* are checked, and then click *Finish*.

13. Select *Perform Quick Scan* and click *Scan*, and MBAM will start scanning your computer. Depending on your hardware/configuration this can be a lengthy process. Go get a cup of coffee or go to the store, but don’t interrupt the process.

14. MBAM will list all infections as it finds them; when the scan is finished click *OK* and *Show Results*.

15. Ensure all items are checked and click *Remove Selected*.

16. MBAM will open a log file (in Notepad) and it might require a restart (you should do a reboot anyway since you’re still in Safe Mode).

Done!

This is not a fix for every single browser out there and for every possible scenario, but it’s working in IE > 6, Firefox 3+ and our current versions of Safari (4.0.3) and Opera (10.51).
(If you come up with a variation to make it work in additional browsers, please share your findings!)

First, the situation:

We have a background image and we want to make to container on top it semi-transparent (so the background image is still visible), but inside this nested container we have another item (an image, a div, etc) which we DO NOT WANT to be transparent.

The two images side-by-side show the desired result (left, image in nested container NOT transparent) and the actual result (right, image in nested container is transparent):

The code is as follows (simplified):
HTML:

Lorem Ipsum


<p>In id nulla vitae nisi aliquet blandit in facilisis tellus. Duis et mauris eget enim posuere commodo. Aliquam et leo augue. Sed ut diam lacus.</p>
read more &raquo;

CSS:

.bgdiv {
	font-family:Arial, Helvetica, sans-serif;
	height:400px;
	width:400px;
	background:#ffffff url('[path-to-image]') top left no-repeat;
	padding:15px 0 0 0;
}

#content {
	min-height:340px;
	width:300px;
  	background-color:#ffffff;
	/* for IE 8 - always needs to come first */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  	/* for IE */
  	filter:alpha(opacity=85);
  	/* for FF etc */
  	opacity:0.85;
  	-moz-opacity:0.85
}

.servicebox {
	width:200px;
	margin:20px auto;
	color:#666666;
}

.servicebox h1 {
	font-family: Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
	font-size:16px;
	color:#bf31ad;
	margin:0 0 12px 0;
	width:200px;
	line-height:12px;
	padding:10px 0;
	border-bottom:1px solid #bf31ad;
}

.serviceimg {
	border:1px solid #bfbfbf;
	width:200px;
	overflow:hidden;
	margin:0;
}

.servicebox p {
	font-size:12px;
	margin:0;
	padding: 15px 5px 5px 5px;
	color:#222222;
}

.servicebox div.more {
	text-align:center;
	color:#ffffff;
	height:20px;
	width:100px;
	margin:5px 0 0 100px;
	font-size:11px;
	line-height:18px;
	background:url('[path-to-sprite]') 0 0 no-repeat;
}

.servicebox div.more:hover {
	background:url('[path-to-sprite]') 0 -20px no-repeat;
	color:#2c8819;
}

Lines 12-14 are responsible for the transparency, we used -moz-opacity and opacity for Firefox, Safari, Opera, etc, and a filter for IE.

You can see everything that sits on top of (or inside) the "content" div automatically becomes transparent as well, no matter what you do. As mentioned above, we tried all suggestions we could find – to no avail.

Except for these:
IE 7: To make the images contained in the "servicebox"div opaque, simply add

.servicebox {position:relative;}

to the "servicebox"div. This won’t work in Firefox, etc, but it doesn’t hurt the layout either.

To make it work in Firefox, Opera & Safari, we had to make use of the color model in CSS3:
Instead of setting -moz-opacity and opacity for non-IE browsers, we added

#content {background-color: rgba(255, 255, 255, 0.85);}

to the "content" div, where the last part (0.85) sets the transparency/opacity level for that object only.

Although browsers that don’t understand CSS3 should ignore it and simple move on to the next step, we experienced weird behavior when simply adding to the style sheet.

So we tried conditional statements, but then the code didn’t validate and we had trouble with the explicit non-IE condition {sigh}.

The final result was probably the easiest one (naturally rgba only validates against CSS3, see below):
Detect the browser with PHP (very basic) and display the required declarations (or load a browser-specific stylesheet) based on the browser detection result.

<?
$isIE6 = 0;
$isIE7 = 0;
$isIE8 = 0;
$ie6 = "MSIE 6.0";
$ie7 = "MSIE 7.0";
$ie8 = "MSIE 8.0";

$browser = $_SERVER['HTTP_USER_AGENT'];

if(stristr($browser, $ie6) !== false ) {
	$isIE6 = 1;
	// add any styles for IE 6 here
	// not really necessary
	// $style = "";
	/* to add a browser-specific stylesheet for IE6, simply add this:
	$style = "
";
	*/
} elseif(stristr($browser, $ie7) !== false ) {
	$isIE7 = 1;
	// add any styles for IE 7 here
	$style = "


";
	/* to add a browser-specific stylesheet for IE7, simply add this:
	$style = "
";
	*/
} elseif(stristr($browser, $ie8) !== false ) {
	$isIE8 = 1;
	// add any styles for IE 8 here
	$style = "


";
	// to add a browser-specific stylesheet for IE8, simple add this:
	// $style = "
";

} else {
	$isIE6 = 0; $isIE7 = 0; $isIE8 = 0;
	$style= "


";
	/* to add a browser-specific stylesheet for non IE6/IE7, simply add this:
	$style = "
";
	*/
}
?>

Super-short version (active version on Demo page):

<?
$browser = $_SERVER['HTTP_USER_AGENT'];
$browsers = array("MSIE 6.0","MSIE 7.0","MSIE 8.0");
$styles = array("",".serviceimg2 {position:relative;}",".serviceimg2 {position:relative;}");
$msie= 0;

for($x = 0; $x < count($browsers);$x++) {
	if(stristr($browser, $browsers[$x]) !== false) {
		$sstyle = $styles[$x];
		$msie= 1;
	}
}
if($msie == 0 || !$msie) {
	$sstyle = "#content2 {background-color: rgba(255, 255, 255, 0.85);}";
}
$style = "


";
?>

Insert $style (or its output) via shorthand PHP into your HTML code:

<head>
	[other important things go here]
	<?=$style;?>
</head>

In the last post (Add a Twitter Feed with jQuery) we talked about how to add a twitter feed with jQuery, now it’s time to do the same with PHP. The whole idea was to get the same result by using similar methods provided by the Twitter API – and again it’s easier than you might think.

All you need is:

the twitter username/userID/screenname (preferably your own) of the feed you want to embed
and a few lines of PHP code.

The PHP:

$username = "REPLACE_WITH_YOUR_USERNAME";
    $limit = 5;
    $feed = 'http://twitter.com/statuses/user_timeline.rss?screen_name='.$username.'&count='.$limit;
    $tweets = file_get_contents($feed);
    $tweet = explode("", $tweets);
    $tcount = count($tweet) - 1;

for ($i = 1; $i <= $tcount; $i++) {
    $endtweet = explode("", $tweet[$i]);
    $title = explode("", $title[1]);
	$content[0] = str_replace("–", "—", $content[0]);
	$content[0] = str_replace("—", "—", $content[0]);

	$content[0] = preg_replace("/(http:\/\/|(www\.))(([^\s<]{4,68})[^\s<]*)/", '$1$2$4', $content[0]);
	$content[0] = str_replace("$username: ", "", $content[0]);
	$content[0] = preg_replace("/@(\w+)/", "@\\1", $content[0]);
	$content[0] = preg_replace("/#(\w+)/", "#\\1", $content[0]);

    $mytweets[] = $content[0];
}

while (list(, $v) = each($mytweets)) {
	$tweetout .= "
$v

\n";

The HTML (body):

Twitter Feed with PHP

<?=$tweetout;?>

The div with the id phptweets is the container which will hold our tweets; plus we use some shorthand PHP to output the tweets ($tweetout).

Twitter’s API provides a multitude of access options, again I am using the user_timeline method for the user specified in screen_name but this time I chose rss output (as opposed to json for jQuery) to fetch the tweets.

Using a loop, the script iterates through the amount of tweets specified in limit($limit=5) and for every tweet performs additional tasks (yeah, regular expressions) to transform all links, hashtags and usernames into clickable links and adding them to the array $mytweets.

I separated the creation of the created links (adding new items to the $mytweets array) and the actual output ($tweetout) to make it easier to style the output.

Again – I could have used the search method which outputs clickable links, but Twitter only makes 2 weeks worth of tweets available via the search function (specifying rpp=10 won’t help if he tweets are more than 2 weeks old).

Add some stylesheets and put the div anywhere you want your tweets to get displayed on your page.

a, a:link, a:visited, a:hover {
	text-decoration:underline;
	color:#cacaca;
}
#phptweets {
	width:650px;
	height:250px;
	background:transparent url('tbird.png') top  left no-repeat;
	border:1px solid #555555;
	text-align:left;
}
h1 {
	font-size:48px;
	font-weight:normal;
	font-family: Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
	margin: 0 0 40px 0;
}
.twitter {
	display:table-cell; vertical-align:middle;
	padding:0 0 0 250px;
}

In a Webmaster Central Blog entry (Using site speed in web search ranking) dated Fri, Apr 9 2010, they finally made it official.

So give your pages a little overhaul and get them up to speed!

Following is a selection of tools and options you can use to increase your page’s speed:

Speed Testing:

Download and install Google’s Page Speed tool for Firefox and run it to get an idea of what can be optimized.

After:

Install the Web Developer Add-On for Firefox and check the document size (Web Developer > Information > View Document Size):

After:

Or try Zoompf’s performance tester: http://zoompf.com. It returns a long list of issues including solutions.

Compression:
Chances are all speed testing tools will tell you to enable (gzip) compression if you haven’t already done so.
To check if your site currently has compression enabled, check out GIDNetwork’s web page compression / deflate / gzip test tool: http://www.gidnetwork.com/tools/gzip-test.php

To enable compression, you can either add a couple of directives to your .htaccess file, or add one single line of PHP to your page:

.htaccess:

<Files *.htm>
SetOutputFilter DEFLATE
</Files>

This directive compresses all *.htm files.
To add compression for other file types, simply add more file types to your .htaccess file:

<Files *.css>
SetOutputFilter DEFLATE
</Files>

If you don’t have access to your .htaccess file or if your server doesn’t support mod_deflate, add this line of PHP code to your page(s):

<?
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start("ob_gzhandler");
    else ob_start();
?>

What it does is to check for the presence of "Accept-encoding: gzip" in the request header and returns a gzipped version of the requested file, otherwise it returns the regular (uncompressed) version.
(Note: We don’t have .NET or .ASP or IIS solutions. Please don’t ask.)

Deferred JavaScript Loading/Asynchronous Tracking:
If you are using Google Analytics, there is yet another little trick. Have you noticed the new "Asynchronous Tracking" in your Analytics settings? Google announced it in December 2009 (Google Analytics Launches Asynchronous Tracking), and you can find it under Analytics Settings > Profile Settings > Tracking Code

Replace your existing Google Analytics code with the new code and it won’t delay rendering of the page, meaning you can put it in a higher spot in your page’s code.

Tools (Firefox addons – require Firebug):
YSlow: http://developer.yahoo.com/yslow/
PageSpeed: http://code.google.com/speed/page-speed/
Web Developer Add-on: https://addons.mozilla.org/en-US/firefox/addon/60

Online tools:
Slowshow: http://www.showslow.com/
GIDNetwork: http://www.gidnetwork.com/tools/gzip-test.php
Zoompf: http://zoompf.com/
Webpagetest: http://www.webpagetest.org/test