How to Add Facebook Like box in website or Blog

I will show you how to add your facebook like box in your static or dynamic website. The Facebook Like Box show your website popularity on facebook . So don't wait just do it fast .

Step 1 : If you are put in your website . Then open your web page in which you want to show the facebook like box . Go To Head Section and at the end of end section you will copy following code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 Step 2 : If you are using Blog or Google Blogspot. just go to your dashboard -> template and Edit HTML here you can find head tag. and Do step 1.


Step 3 : And at the end of body tag copy this code and change your url :

<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCYhVqNIxhAm-2XnPYNEbS3mX5jto1-7WNy9P4x9aa6S7pdTArWKD6L3Gx8jBsl_oPl242P2gdEm6BVUGPYwtKfscGjjV1rMtaQL3VIkl8xySCwFONBZVM-8nhDPYy2DFFsnjOf8C1qMS/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = 'medium'; // Duration of Animation
            w2b('#fbplikebox').css({right: -250, 'top' : 350 })
            w2b('#fbplikebox').hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b('#fbplikebox').show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
    <div class='fbplbadge'></div>
    <iframe src='http://www.facebook.com/plugins/likebox.php?href=Type_your_fb_page_URL&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>

 And You Get Following Output :

How to use Geolocation API in HTML5

If you want to use Geolocation API in HTML5 , used to get geographical position by the user. 
It can be support by many browser now ,

    

Internet Explorer 9+, Firefox, Opera, Chrome and Safari are support Geolocation

The Example is : 

<!DOCTYPE html>

<html>

<body>

<p> your coordinates is :</p>

<script>

 if (navigator.geolocation)

    {

    navigator.geolocation.getCurrentPosition(showPosition);

    }

  else{x.innerHTML="Geolocation is not supported by this browser.";}

function showPosition(position)

  {

  x.innerHTML="Latitude is : " + position.coords.latitude + 

  "<br>Longitude is: " + position.coords.longitude;

  }

</script>

</body>

</html>

You Will Get Your Latitude and Longitude .

If You want to show your latitude and longitude in Google Map
Then you want to use Google Map API.

You Will Get Compelete Source Code Here .

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {                                                                    navigator.geolocation.getCurrentPosition(showPosition);                                                                   var  Latitude =  position.coords.latitude;                                                                                       var Longitude = position.coords.longitude;                                         
 var mapOptions = {
          center: new google.maps.LatLng(Latitude, Longitude),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

How to upload custom template in Google Blogspot

  We can easily use our own template by following few steps as mentioned below.

     1. Select the Template from left menu and click on button Backup/Restore as shown below.

     

     2. Now if you want to keep safe your previous templates/settings then you may keep back file by     clicking button, or simply click "choose file" as shown below and upload you desired template ".xml" file.

     3. If you are again getting any problem you may ask you query in comments.