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:

<fb:login-button></fb:login-button>

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:

Facebook

Facebook

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

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

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

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

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

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.

http://septiadi.com/2011/08/08/facebook-login-button-with-image/


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">
(function($){
    var timeout = 10000;//ten second idle. change this var. 1000 means 1 sec.
    $(document).bind("idle.idleTimer", function(){
		position_popup(150,30);
		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';
    });
    $.idleTimer(timeout);
    $('#timeout').text(timeout/1000);
})(jQuery);

function position_popup(width,height){
height = parseInt(height);
	if(!window.innerWidth){
		if(!document.documentElement.offsetWidth){
			if(!document.body.offsetWidth){
				win_width = 1000;
			}else{
				win_width = document.body.offsetWidth;
			}
		}else{
			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
	}else{
		win_width = window.innerWidth;
	}
	if(!window.innerHeight){
		if(!document.documentElement.offsetHeight){
			if(!document.body.offsetHeight){
				win_height = 1000;
			}else{
				win_height = document.body.offsetHeight;
			}
		}else{
			win_height = document.documentElement.offsetHeight;
		}
		document.getElementById('popup_area').style.top ='100px';
	}else{
		win_height = window.innerHeight;
		inner_top = (win_height - height-25)/2;if(inner_top < 0)inner_top=0;
		document.getElementById('popup_area').style.top = 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;
}
</script>

<style type="text/css">
.inner_popup{
	display: none;
	position:fixed;
	text-align:center;
	z-index:1002;
	padding:10px;
	width: 150px;
	height: 30px;
	border: 2px solid;
	border-color:#CCCCCC;
	background-color: white;
	vertical-align:middle;
}
.outer_popup{
	display: none;
	position:fixed ;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.70;
	filter: alpha(opacity=80);
	text-align:center;
}
</style>

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

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

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.

Refference: http://paulirish.com/2009/jquery-idletimer-plugin/

http://septiadi.com/2011/07/11/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.

http://septiadi.com/2011/06/24/handle-old-open-php-tag/


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:
<?php
//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>';
				fclose($handle2);

				$fp = fopen("$file", 'w');
				fwrite($fp, $contents);
				fclose($fp);
			}
        }
    }
    closedir($handle);
}
?>

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

 http://septiadi.com/2011/06/22/php-auto-replace-multiple-files-content/

Index Post in Google

This post just merely a way to satisfy my curiousity. I wonder how many it takes for google to index my post.

The way to do it is very simple. Just make a simple post, then use the search engine to serach the permalink. In this case, I search “http://mhseptiadi.wordpress.com/2011/06/14/index-post-in-google/” in “https://www.google.com/“, just after i publish this post. I refresh the google serach engine if my post is not being indexed. When finnaly it has been indexed, the result is it has been indexed less than 30 second. I like it. :D

Lets try it with your post.

Related Post:

http://septiadi.com/2011/06/14/index-post-in-google/


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;
	else
	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){
	if($n!=0){
		echo $n.' ';
		$n--;
		Simple_Recursive($n);
	}
}

Simple_Recursive(10);

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.

http://septiadi.com/2011/06/13/recursive-function/


Develop Creative Thinking

Today, creative becomes more popular. However, there are pros and cons about whether it is important to be creative in daily live. In my oppinion, Creative is very important. Problem solving needs kreative thinking, in this case many problems occur in our daily live.

In this article, I ll try to share about how to develop creative thinking. There are 4 guide that will help you alot in developing creative thinking.

Capturing

Idea may come out in your mind without notification, and it could easily forgotten. Therefore, start collecting your idea by preparing little note that easily carried anywhere. When your idea comes, write down it in your note. Dont be lazzy to write it down, because you may forget it. Just keep in mind, simple idea may lead you to another idea.

Surrounding

Briliant idea do not just come out by it self. You have to stimulate your brain to produce briliant idea. How? Always changing environment will help you alot in producing new idea. Changing your environment is not only changing your address. You can changing environment by simple thing such as, changing your paint wall, change route when go to office, make new friend with person that have different background from you, etc.

Challenging

Creativity sometimes comes up when you face problems in your daily live. Problems that comes in home, school, office may help you creativity grow without you notice. In my opinion Playing game will also help your brain works creatively, because many problems will you face in game. However, become addicted to game will also become problems.

Broadening

Broadening means that the diversity of your knowledge. Study new thing in your live that not related to your background/job, will also help you become more creative. In this case, your creative idea will become more broaden.

By developing those four guidelines, you will improve the capacity of your creative mind. Having creative mind may help you solve many problems in your daily live.

Good luck. Hope “Develop Creative Thinking” will help you alot.

Source:http://theperfectbizfinder.com, and other that i forgot.

http://septiadi.com/2011/06/09/develop-creative-thinking/


Follow

Get every new post delivered to your Inbox.