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!

Twitter is over capacity.

Too many tweets! Please wait a moment and try again.

Screenshot taken today, May 5 2010 @ 7:30 am PDT.

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

Adding a twitter feed to your website is easier than you might think.

All you need is:

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

The HTML (head):

Simply load the jQuery library by placing a link to it in your page’s header.

The HTML (body):

Twitter Feed with jQuery

The div with the id jstweets is the container which will hold our tweets.

The JavaScript:

$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=REPLACE_WITH_YOUR_USERNAME&count=5&callback=?",
 function(data){
  $.each(data, function(i,item){
   ct = item.text;
   ct = ct.replace(/http:\/\/\S+/g,  '$&');
   ct = ct.replace(/\s(@)(\w+)/g,    ' @$2');
   ct = ct.replace(/\s(#)(\w+)/g,    ' #$2');
   $("#jstweets").append('
'+ct +'

');
  });
 });

Twitter’s API provides a multitude of access options, here I am using the user_timeline method for the user specified in screen_name and chose json output format which is already perfectly formatted for the use with jQuery to fetch the tweets.

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

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;
}
#jstweets {
	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;
}

It is for our UK-based client Magellan World Ltd and provides information on Ground Source Heat Pumps:

"Recognising today’s need to provide alternatives to the use of fossil fuels, Magellan Earth in conjunction with Transen Sustainable Energy Systems, have developed a range of Ground Source Heat Pumps (GSHPs) which harness the natural energy beneath your feet.

The ambient temperature from the ground is captured by the GSHP, amplified and used to provide heating and hot water.

GSHPs are an environmental solution that can reduce your carbon footprint by 80% over conventional methods."