Category Archives: CODE

Facebook Login Button with Image

Previously I was searching for how to change the Facebook Login Button with an image. Surfing the internet didn’t gimme answer. I also posting in some coding forum, but there is also no good answer. It cost me more than 2 days when facing this problems. However i found the answer by my self. Therefore in this post i want to share it with you. Because i know facing this problems is tiring.

Before we continue with manipulating the facebook login buton with an image, i asume you already knwo about how to make facebook login button. If you dont know about it yet, please check this. After you read this lets start.

First, Found the fb tag. It should be like:


Change it into some thing like:

<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>

In this case, i make the width become 216, because i’ll use an image that have property width=216 and height=72.

The result should be look like:



Second, Make your own button. In this case, we will use three div. First for the image, second for the facebook login button, and the last is for the container of both.

First div:

<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />

Second div:

<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>

The last div will contain both of first div and second div:

<div style="position:relative;width:216px;height:72px;" >

Third, Combine all of the div. Then the final code will look like:

<div style="position:relative;width:216px;height:72px;" >
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;z-index:111;">
<img src="yourimage.jpg" style="cursor:pointer" />
<div style="position:absolute;left:0px;top:0px;width:216px;height:72px;overflow:hidden;z-index:333;opacity:0;filter:alpha(opacity=0);">
<fb:login-button show-faces="true" width="216">----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</fb:login-button>

Make sure the width and the height is correct based on your image width and height. Then, copy the final code into your website.

How it works:

The first div that contain your image will be placed under the second div that contain the facebook button. The second div will be exactly overlayed the first div. Then, we make the second div opacity become 0, so it will be invisible. As a result, when you press your image, you actually press the facebook button.


Energy Saver in Web Page

Have you imagine if your web page can do some kind energy saver like screen saver in your computer desktop? Do you want to make it happen? Then lets do it togather.

First download required file jquery.js and jquery.idle-timer.js.

Second, Copy the bellow script into your head tag in html file.
<script type="text/javascript" src="[url]/jquery.js"></script>
<script type="text/javascript" src="[url]/jquery.idle-timer.js"></script>

<script type="text/javascript">
    var timeout = 10000;//ten second idle. change this var. 1000 means 1 sec.
    $(document).bind("idle.idleTimer", function(){
		document.getElementById('popup_area_bg').style.display = 'block';document.getElementById('popup_area').style.display = 'block';
    $(document).bind("active.idleTimer", function(){
		document.getElementById('popup_area_bg').style.display = 'none';document.getElementById('popup_area').style.display = 'none';

function position_popup(width,height){
height = parseInt(height);
				win_width = 1000;
				win_width = document.body.offsetWidth;
			win_width = document.documentElement.offsetWidth;
		document.getElementById('popup_area').style.position ='absolute';//need only once
		document.getElementById('popup_area_bg').style.display ='none';//need only once
		win_width = window.innerWidth;
				win_height = 1000;
				win_height = document.body.offsetHeight;
			win_height = document.documentElement.offsetHeight;
		document.getElementById('popup_area') ='100px';
		win_height = window.innerHeight;
		inner_top = (win_height - height-25)/2;if(inner_top < 0)inner_top=0;
		document.getElementById('popup_area') = inner_top+'px';
	inner_left = (win_width - width-25)/2;if(inner_left < 0)inner_left=0;
	document.getElementById('popup_area').style.left = inner_left+'px';
	document.getElementById('popup_area').style.width = width;
	document.getElementById('popup_area').style.height = height;

<style type="text/css">
	display: none;
	width: 150px;
	height: 30px;
	border: 2px solid;
	background-color: white;
	display: none;
	position:fixed ;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);

Third, copy bellow script into body tag in your html file.

<div class="outer_popup" id="popup_area_bg">
<div class="inner_popup" id="popup_area">
<div style="float:left; width:100%;" align="center">
	Idle Time

By implementing energy saver in your web page, I hope, your page can save energy even only in a small amount. The more your page visited by other people, the more you help them to save energy.

Thanks to Paul Irish for jQuery idleTimer plugin so that we can make our Energy Saver in Web Page.




Handle Old Open PHP Tag

Continuing my previous post PHP Auto Replace Multiple Files Content, you can esily make the old php open tag <? to be handled by new php.

You have to change your php.ini file. In php.ini file, found a row with “short_open_tag = Off” then change it with “short_open_tag = On“. After that restart your apache server.

PHP Auto Replace Multiple Files Content

Previously my best friend told me about his problems in php. He has a bunch of php file that already outdated.These files use php 4 format. He requested me if there is a way to change the format <? used in those files into <?php that used in current php format. Therefore, I made a php script to do such thing.

This script has feature:

  • List all files in current folder except the script it self
  • Read each file one by one
  • Replace requested string
  • Save it
This is the script:
//if file is too many, there is a possibility that the script exceed the max exection time
$this_file = 'index.php';//this is the script file for exception
if ($handle = opendir('.')) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
            echo "$file\n";

			if($file != $this_file){

				$handle2 = fopen("$file", "rb");
				$contents = '';
				while (!feof($handle2)) {
				  $contents .= fread($handle2, 8192);
				$contents = str_replace("<?", "<?php", $contents);// for replacing <? into <?php
				//for replacing deprecated function, you need regex
				echo htmlspecialchars($contents).'<hr><br>';

				$fp = fopen("$file", 'w');
				fwrite($fp, $contents);

Just copy the script into a folder where resides the files that you want to replace the content.

Recursive Function

Recursion (computer science), a procedure or subroutine, implemented in a programming language, whose implementation references itself” Wikipedia. In this case, Recursive Function is a function that call or reference it self to do some repetitive actions. Different with iteration function that use loop, recursion function dont use loop to do repetitive function. Therefore, Recursive Function may be called several times while the iteration function only called once.

This is simle example of recursive factorial function (example using javascript).

function Factorial_Recursive(n){
	if (n <= 1) return 1;
	return n * Factorial_Recursive(n - 1);//this call itself

In this case, Factorial_Recursive(n) function will call itself and be executed several times if you declare the ‘n’ variable at least 2.

Other more simple example function using php.

function Simple_Recursive($n){
		echo $n.' ';


The above function will give output “10 9 8 7 6 5 4 3 2 1”.

To put it simple, recursive funcition is a function that call it sefl to do repetitive action.

Import MySql From CSV

Continuing from my previous article about Export MySql Into CSV, I will explain about how to Import MySql From CSV. In this case, you will need to load the CSV file by using a php file that placed in the destination server. The php file will read the CSV file and then make a MySql query related to the content of the CSV file.

Here the php file:

$host = 'localhost';//host name, in this case we use localhost
$user = 'root';//user name, in this case we use root
$pass = 'password';//password, in this case we use password
$db = 'member';//declare the database that will be used

$link = mysql_connect($host, $user, $pass) or die("Can not connect." . mysql_error());
mysql_select_db($db) or die("Can not connect.");

$handle = @fopen("csv.csv", "r");
$content = '';
if ($handle) {
    while (($buffer = fgets($handle)) !== false) {
        $content .= $buffer;
$arr1 = explode("\n",$content);
$table = '';
foreach($arr1 as $val){
	preg_match_all('/(?<!\\\)"(.*?)(?<!\\\)"|(?<!\\\)"(.*\n.*?)(?<!\\\)"/i',$val, $matches);
	$q = "INSERT INTO `member` (`member_id`, `name`, `phone`, `address`, `status`) VALUES ('".$matches[1][0]."', '".$matches[1][1]."', '".$matches[1][2]."', '".$matches[1][3]."');";//you can change this based on the table that will you insert.
fclose($handle) or die("can't close file");

You can change the $q based on the table that you want to inser. In this case, the code above will only export-import one table. However, with little bit modification you can make your own code for export-import multiple table. Good luck.

Export MySql Into CSV

After examine the different between XML and CSV file, I found out that when you export a database to XML and CSV files, the CSV file should be smaller than the XML file. Therefore, in this article I will explain about how to Export MySql Into CSV.

This article is a little bit simillar with my previous post about Export MySql Into XML. The different is we will use CSV this time.

$host = 'localhost';//host name, in this case we use localhost
$user = 'root';//user name, in this case we use root
$pass = 'password';//password, in this case we use password
$db = 'member';//declare the database that will be used
$table = 'tos';//table that will be exported
$file = 'export';

$link = mysql_connect($host, $user, $pass) or die("Can not connect." . mysql_error());
mysql_select_db($db) or die("Can not connect.");

$values = mysql_query("SELECT * FROM ".$table."");
while ($rowr = mysql_fetch_array($values)) {
	foreach($rowr as $key => $val){
		if (!preg_match('#^\d+$#', $key, $match)){
			$csv_output .= '"'.$val.'";';
	$csv_output = rtrim($csv_output, ";");
	$csv_output .= "\n";

$filename = $file."-".$db."-".$table."_".date("Y-m-d_H:i:s",time());
header("Content-type: application/");
header("Content-disposition: csv" . date("Y-m-d") . ".csv");
header( "Content-disposition: filename=".$filename.".csv");
echo $csv_output;

When the file is executed, the file will generate an CSV file. I will post how to import database from an CSV file next time. Hope this simple article can help you alot.