Posted by 6bytes at 30, June, 2011

Category: Facebook

Tags: , ,

Putting one like button on a page is very simple and comes down to pasting the code from Facebook like button generator found here.
It gets a bit more complicated when we need to add more than one button on a page along with a dynamically generated content. Best example I can think of is a search results page where every search result has it’s own like button.

Enough talk lets get down to the business

Prepare

Put this somewhere in your page. Official Facebook documentation changes it’s recommendation from time to time, so let’s say just put it before </body> tag.

<div id="fb-root"></div>

Insert your Like buttons code

<fb:like href="http://example.com" send="false" layout="button_count" show_faces="false"></fb:like>

Initialize Like buttons

In your JavaScript code after inserting all the fb:like tags you need to initialize all those buttons. You can do that by running below code

	window.fbAsyncInit = function() {
		FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
	};
	(function() {
		var e = document.createElement('script');
		e.async = true;
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());

Remember to change ‘your app id’ to your actual app id.

Posted by 6bytes at 15, April, 2011

Category: MySQL

Tags: , ,

Sometimes I need to insert some values into the database but only when a certain condition is met. The best example is a newsletter sign up. If someone has already signed up to your newsletter don’t add his email address again. Of course we can run one query to check if this email address already exists and if not run another query to save it in our database.
If for any reason you need to do the whole operation in one query things get a little more complicated.

Two queries

Lets say we want to insert some data only when field `email` does not equal [email protected]
First, select data:

SELECT `id` FROM `table` WHERE `email` = [email protected]';

if this email address already exists in our database we can let our users know about it. If no records were returned we can continue to insert new data:

INSERT INTO `table` (`email`) VALUES ([email protected]');

One query

In a way we combine those two queries above into one:

INSERT INTO `table` (`email`)
    [email protected]' FROM DUAL WHERE NOT EXISTS (
        SELECT `id` FROM `table` WHERE `email` = [email protected]' LIMIT 1
    );

If the subquery doesn’t return any rows the insert will be carried out. In case of subquery finding this given email address condition is not met and data doesn’t get inserted.

Posted by 6bytes at 22, March, 2011

Category: Portfolio

Tags: , , , ,

TK Maxx website rebranding

After

Before

 

Website redesign for TK Maxx. Launched just yesterday.
Venda coding all the way in the back end and HTML, JavaScript and CSS in the front end.
View site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One particularly annoying issue was to make the logo stay on top of the sliding main homepage image. All other browsers were just fine but in IE6 and 7 the logo was hidden behind the image.

 

TK Maxx website rebranding, logo bug

Logo behind image

TK Maxx website rebranding, logo fixed

Logo above image

 

The trick was simple yet not obvious. <div> containing the logo needs not only its z-index set to a higher value than sliding image, but also we have to make sure IE treats it seriously and make our CSS rule important.

#logo { z-index: 1000; }

Above will not work whereas below will work like a charm.

#logo { z-index: 1000 !important; }

Posted by 6bytes at 1, March, 2011

Category: JavaScript

Tags: , , ,


flowplayer is an Open Source (GPL 3) video player for the web. Allows you to easily embed video streams into your web pages.
While it’s easy to integrate and very powerful occasionally it may give you headaches especially with cross-browser compatibilities.

The most basic configuration looks like this:

	<script type="text/javascript" src="/js/flowplayer-3.2.6.min.js"></script>
	<a id="player" href="/path/to/movie/example_movie.flv"></a>
<script>
	flowplayer("player", "/path/to/file/flowplayer-3.2.6.swf");
</script>

So you’ve done everything according to documentation and your flowplayer works fine in Firefox but not in Internet Explorer and/or Google Chrome.

There’s a couple of things that worked for me:

1. Change Flash player and your movie URL’s from relative to absolute.

	<a id='player' href='http://www.example.com/path/to/movie/example_movie.flv'></a>
	flowplayer('player', 'http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf');

2. Make sure that JavaScript and Flash files are the same version. In our case 3.2.6

3. Edit flowplayer’s JavaScript library flowplayer-3.2.6.min.js (even the minified file). Look for 9,0 and change it to 10,0. This ensures that flowplayer requests Flash player 10 installed in your browser (latest version by the time this post was writen).
OR request a Flash version in your flowplayer start script:

	flowplayer('player', {
		src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf',
		version: [10, 0],
		onFail: function()  {
			// Write your own message for devices not supporting Flash
		}
	},
	{
		clip: 'http://www.example.com/path/to/movie/example_movie.flv'
	});

Posted by 6bytes at 24, February, 2011

Category: Self development

Tags: , , ,

That’s right, I’m convinced this is the way forward. That’s how our kids or grandchildren will learn. Amazing! Khan Academy

Posted by 6bytes at 23, February, 2011

Category: Portfolio

Tags: , , , , ,

Just launched. TK Maxx and Red Nose Day campaign applications.

Facebook quiz

Fun quiz to find out your perfect Red Nose Day t-shirt.
View site

Website application

Upload you photo with Flash uploader, resize it and pan it around with JavaScript then save your results with PHP.
View site

Posted by 6bytes at 30, January, 2011

Category: Infographic

Tags: , , , , ,

Sharing in 2010

Very nice infographic by http://jeffwongdesign.blogspot.com/

Posted by 6bytes at 18, December, 2010

Category: Personal

I woke up today, looked out the window and saw a rather not every day view in London 🙂

Winter in London 1
Winter in London 2

Posted by 6bytes at 17, November, 2010

Category: Apache, CentOS

Tags: , , , ,

I’m not going to write about whether I think mod_pagespeed is good or not, is it suitable for your website, why you should use it or not. I’ll focus only on installation.

Since you’re here and still reading I assume you want to speed up your website with Google’s mod_pagespeed. If you’re on a machine where for any reason installing from .rpm or .deb is not possible read on.

Dependencies

First we need to install Chromium ‘depot_tools’, which are used to build multiple open-source projects with dependencies on other open-source projects.

mkdir ~/bin
cd ~/bin
svn co http://src.chromium.org/svn/trunk/tools/depot_tools

You will need to add the depot_tools to your path. i.e. in bash:

export PATH=$PATH:~/bin/depot_tools

Check out mod_pagespeed and dependencies

mkdir ~/mod_pagespeed    # any directory is fine
cd ~/mod_pagespeed
# always check for latest version by going to http://modpagespeed.googlecode.com/svn/tags/ in your browser
# then copy link to /src ie. http://modpagespeed.googlecode.com/svn/tags/X.X.X.X/src
gclient config  http://modpagespeed.googlecode.com/svn/tags/0.9.1.1/src
gclient sync --force     # this will download all source code

Compile mod_pagespeed

cd ~/mod_pagespeed/src
make BUILDTYPE=Release   # BUILDTYPE defaults to 'Debug'

Install mod_pagespeed

First edit centos.sh and change parameters according to your needs. Then run it.

vim install/centos.sh
cd install
./centos.sh
./centos.sh staging
./centos.sh install

Restart Apache

/etc/init.d/httpd restart

Check if Apache loaded mod_pagespeed.

httpd -M # list static and shared modules, mod_pagespeed should be here
httpd -l # list compiled in modules

If above doesn’t work try something like this:

/usr/src/httpd/httpd -M
/usr/src/httpd/httpd -l

If it’s there go to /etc/httpd/pagespeed.conf and configure it. I’ll write a bit more about configuring mod_pagespeed in my next post. If it’s not there make sure mod_pagespeed.so is in Apache module directory and if not copy it there.

locate mod_pagespeed.so
cp /tmp/mod_pagespeed.install/mod_pagespeed.so /usr/local/apache2/modules/

Edit your Apache configuration file and add Include /etc/httpd/pagespeed.conf if it isn’t already there. Next edit /etc/httpd/pagespeed.conf and add

LoadModule pagespeed_module /usr/local/apache2/modules/mod_pagespeed.so

Restart Apache and you should see something like X-Mod-Pagespeed: 0.9.1.1-173 in your website’s response headers.

References:

http://code.google.com/speed/page-speed/docs/using_mod.html
http://code.google.com/p/modpagespeed/wiki/HowToBuild

Posted by 6bytes at 8, November, 2010

Category: PHP

Tags: , ,

A very simple PHP script to get almost live currency exchange rates from Yahoo Finance. I’m saying “almost” as as far as I know Yahoo updates it with some minor delay.

$from = 'GBP';
$to = 'USD';
$url = 'http://finance.yahoo.com/d/quotes.csv?f=l1d1t1&s='.$from.$to.'=X';
$handle = fopen($url, 'r');

if ($handle) {
	$result = fgetcsv($handle);
	fclose($handle);
}

echo '1 '.$from.' is worth '.$result[0].' '.$to.' Based on data on '.$result[1].' '.$result[2];

On the day of writing this post, above script will display:

1 GBP is worth 1.6125 USD Based on data on 11/8/2010 10:26am

Short explanation

I think everything is clear except for the URL and its parameters. Lets have a closer look.
In our example

$url = 'http://finance.yahoo.com/d/quotes.csv?f=l1d1t1&s='.$from.$to.'=X';

translates to

http://finance.yahoo.com/d/quotes.csv?f=l1d1t1&s=GBPUSD=X

Pasting this into your browser returns a csv file with three columns. Current exchange rate, date and time. Where:

  • l1 – exchange rate,
  • d1 – date,
  • t1 – time

If exact time is not what you’re looking for and all you need is just the exchange rate your url could look like this:

http://finance.yahoo.com/d/quotes.csv?f=l1&s=GBPUSD=X

I couldn’t find full list of parameters on yahoo but this site seems to have it all covered.

Yahoo finance not only gives you access to exchange rates but also stock data.