Web Speaks

Create Album and Upload Photo to Facebook Fan Page using PHP

2012-02-23T02:05:00.000-08:00

In this series of Facebook API tutorials, today we will continue with creating albums on Facebook Fan Page. The main meat of this tutorial is getting the right access token for your fan page. To get the right access token, follow these steps:

Go to https://developers.facebook.com/tools/explorer?method=GET&path=me%2Faccounts
Enter https://graph.facebook.com/me/accounts in the second text box
Click on submit
Json data will be returned
From that select the access token of your Fan page.

Other Facebook Tutorials:
How to upload photos to you Facebook Fan Page
Access Facebook Photo Albums using PHP - v1.0
Upload photos on Facebook using PHP
See it working
Live Demo Download Script

<?php
require_once 'library/facebook.php';
$facebook = new Facebook(array(
 'appId'  => '<app_id>',
 'secret' => '<app_sercret>',
 'fileUpload' => true
));
?>
<html>
<head>
<title>WebSpeaks.in | Create album and upload photos to Facebook Fan Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php
//It can be found at https://developers.facebook.com/tools/access_token/
$access_token = '<you_access_token>';

$params = array('access_token' => $access_token);

//The id of the fanpage
$fanpage = '<your_fan_page_id>';

/*
 * Go to https://developers.facebook.com/tools/explorer?method=GET&path=me%2Faccounts
 * Enter https://graph.facebook.com/me/accounts in the second text box
 * Click on submit
 * Json data will be returned
 * From that select the access token of your Fan page
*/
$page_access_token = '<your_page_access_token>';
$facebook->setAccessToken($page_access_token);

$facebook->setFileUploadSupport(true);

//Create an album
$album_details = array(
        'message'=> 'Test album',
        'name'=> 'Album name'.date('Y-m-d H:i:s') //should be unique each time
);
$album = $facebook->api('/'.$fanpage.'/albums', 'post', $album_details);

//The id of the album
$album_id =$album['id'];

//Replace arvind07 with your Facebook ID
$accounts = $facebook->api('/arvind07/accounts', 'GET', $params);

foreach($accounts['data'] as $account) {
 if( $account['id'] == $fanpage || $account['name'] == $fanpage ){
  $fanpage_token = $account['access_token'];
 }
}

$valid_files = array('image/jpeg', 'image/png', 'image/gif');

if(isset($_FILES) && !empty($_FILES)){
 if( !in_array($_FILES['pic']['type'], $valid_files ) ){
  echo 'Only jpg, png and gif image types are supported!';
 }else{
  #Upload photo here
  $img = realpath($_FILES["pic"]["tmp_name"]);

  $args = array(
   'message' => 'This photo was uploaded via WebSpeaks.in',
   'image' => '@' . $img,
   'aid' => $album_id,
   'no_story' => 0,
   'access_token' => $fanpage_token
  );

  $photo = $facebook->api($album_id . '/photos', 'post', $args);
  if( is_array( $photo ) && !empty( $photo['id'] ) ){
   echo '<p><a target="_blank" href="http://www.facebook.com/photo.php?fbid='.$photo['id'].'">Click here to watch this photo on Facebook.</a></p>';
  }
 }
}

?>
 <!-- Form for uploading the photo -->
 <div class="main">
  <p>Select a photo to upload on Facebook Fan Page</p>
  <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
  <p>Select the image: <input type="file" name="pic" /></p>
  <p><input class="post_but" type="submit" value="Create album and Upload" /></p>
  </form>
 </div>
</body>
</html>

Programmatically Add Grouped Product to Cart in Magento

2012-02-04T09:10:00.000-08:00

Adding simple products to cart through custom PHP code is pretty straight forward. You just need to call the '$cart->addProduct()' function with the product_id and quantity as parameters. But if you want to add grouped products to cart through your code, you will need to perform few additional steps. The process is very easy - create an '$super_group' array of the associated products with the specified quantities. Then you need to pass the array to the 'addProduct()' function. See the actual code below that makes it work:

<?php
//Array for holding the associated products
$super_group = array();

//Id of the grouped product
$parentId = <grouped_product_id>;

//Create an array of associated products
$children = array('<child_id_1>','<child_id_2>','<child_id_3>');

//Quantity of each child product to be addede to cart
$child_qty = 2;

//Add all child products to $super_group with product_id as key and quantity as value
foreach($children as $child){
 if(intval($child)){
   $super_group[$child] = $child_qty;
  }
 }
}

//Add Grouped product to cart
try {
 //Get object of main grouped product
 $product = Mage::getModel('catalog/product')->load($parentId);
 
 //Check product availability
 if (!$product) {
  echo "Error in product!";
  return;
 }

 //Get cart object
 $cart = Mage::getModel('checkout/cart');

 //Create params for grouped product
 $params = array('super_group' => $super_group);

 //Add product to cart with specified parameters and save the cart object
 $cart->addProduct($product, $params)->save();

 Mage::getSingleton('checkout/session')->setCartWasUpdated(true);
  
 echo $this->__('%s was added to your shopping cart.', Mage::helper('core')->htmlEscape($product->getName()));

}
catch (Mage_Core_Exception $e){
 if (Mage::getSingleton('checkout/session')->getUseNotice(true)){
  echo $this->__($e->getMessage());
 }
 else{
  $messages = array_unique(explode("\n", $e->getMessage()));
  foreach ($messages as $message) {
   echo "<br />".$message;
  }
 }
}
catch (Exception $e){
 echo $this->__('Cannot add the item to shopping cart.');
}
?>

Google Maps Part 2: Implementing Driving Directions & Roadmaps

2012-01-30T22:58:00.000-08:00

In this series of Google Maps tutorials we will implement the driving directions and roadmaps on Google maps. If you do not know how to implement Google Maps, read this tutorial. In this tutorials I have covered all the options of Google driving directions like 'Directions Panel', 'Waypoints' and 'Draggable directions'. See the demo here.

Download Script

Simple Demo

Google Map with Directions Panel

Google Map with Waypoints

Google Map with Draggable Directions

Implementing Driving Directions in Google Maps

Following function creates the driving directions on Google maps. This function takes three arguments: starting location, end locations and the driving mode. Driving mode can take any value out of the following options:

DRIVING
WALKING
BICYCLING

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

function calcRoute(start, end, mode) {
 var request = {
  origin:start,
  destination:end,
  travelMode: google.maps.TravelMode[mode]
 };
 directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
   directionsDisplay.setDirections(result);
  }
 });
 /*Set the directions on the map*/
 directionsDisplay.setMap(map);
}

Implementing Directions Panel in Google Maps

To show the directions panel you need to add following line in the end of the above function:

directionsDisplay.setPanel(document.getElementById("directions"));

So our function now looks like:

function calcRoute(start, end, mode) {
 var request = {
  origin:start,
  destination:end,
  travelMode: google.maps.TravelMode[mode]
 };
 directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
   directionsDisplay.setDirections(result);
  }
 }); 
 directionsDisplay.setMap(map);

 /*Show directions panel*/
 directionsDisplay.setPanel(document.getElementById("directions"));
}

Implementing Directions Way Points in Google Maps

If you want to show the way points in the driving directions, just add the waypoint locations in the directionsService onject. See the following function:

function calcRoute(start, end, mode) {
 var request = {
  origin:start,
  destination:end,
  waypoints:[{location: "bhopal"}, {location: "indore"}],/*Show the waypoints*/
  travelMode: google.maps.TravelMode[mode]
 };
 directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
   directionsDisplay.setDirections(result);
  }
 });
 
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById("directions"));
}

Implementing Draggable Directions in Google Maps

To make the directions draggable, we need to set the 'draggable' property of our DirectionsRenderer to true. See how its done:

var rendererOptions = {
 draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Complete Implementation

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript">
  var map;

  /*Options for making draggable direction*/
  var rendererOptions = {
   draggable: true
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  var directionsService = new google.maps.DirectionsService();
  
  jQuery(document).ready(function(){
   function initialize() {
    var delhi = new google.maps.LatLng(28.635308, 77.22496);

    var myOptions = {
     zoom:10,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: delhi
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   }

   /*Function for creating the roadmap*/
   function calcRoute(start, end, mode) {
    var request = {
     origin:start,
     destination:end,
     waypoints:[{location: "bhopal"}, {location: "indore"}],
     travelMode: google.maps.TravelMode[mode]
    };
    directionsService.route(request, function(result, status) {
     if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
     }
    });
    
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));
   }

   initialize();
   calcRoute('New Delhi', 'Mumbai', 'DRIVING');
   
   jQuery('#driveit').click(function(){
    var srcAddr = jQuery('#from').val();
    var destAddr = jQuery('#to').val();
    var mode = jQuery('#mode').val();
    calcRoute(srcAddr, destAddr, mode);
   });
  });
 </script>
</head>
<body>
 <h2>Google Map with Draggable directions</h2>
 <div class="googlemap">
  <div id="map_area">
   <div id="map_canvas"></div>
   <div class="text">
    <br />
    From <input type="text" id="from" value="New Delhi" />
    To <input type="text" id="to" value="Mumbai" />
    Travel Mode 
    <select id="mode">
     <option value="DRIVING">Driving</option>
     <option value="WALKING">Walking </option>
     <option value="BICYCLING">Bicycling  </option>
    </select>
    <input type="button" value="Show Route" id="driveit" />
   </div>
  </div>
  <div id="directions"></div>
 </div>
<?php

?>
</body>
</html>

A bit of CSS

 body{
  font-family:Sans-serif;
  font-size:12px;
 }
 h2{border-bottom: 1px dotted;}
 .googlemap{
  margin: auto;
  padding: 0;
  width: 100%;
 }
 #map_area{
  float:left;
  width:70%;
  height:80%;
 }
 #directions{
  float:right;
  width:30%;
  height:80%;
 }
 #map_canvas{
  margin: auto;
  width: 750px;
  height: 550px;
  border:2px double #ececec;
  padding:10px;
 }
 div.text{
  margin: auto;
  text-align:center;
 }

twito: jQuery Twitter Plugin

2012-01-18T03:12:00.000-08:00

twito is a simple yet configurable jQuery Twitter plugin that displays the latest tweets on your webpages without acquiring any space. twito creates a floating box on the page that can be set to be displayed on any four corners of the webpage. You can configure twito to show the Twitter updates from multiple Twitter accounts. The plugin uses only jQuery and CSS without any server side coding. In this version two types of animations have been provided - fade and bubble. See the live demo here.

Download Plugin

Demo 1 Demo 2 Demo 3 Demo 4

twito Plugin Options

users: [Array] It is the array of Twitter accounts whose tweets need to be displayed. e.g. ['web_speaks','smashingmag']

position: [string] It is the position of the twito div on the page. It can be any four corners of the web page. The possible options are:
 'br' - Bottom Right
 'bl' - Bottom Left
 'tl' - Top Left
 'tr' - Top Right

width: [string] It is the width of the twito div. Default is '300px'.

height: [string] It is the width of the twito div. Default is 'auto'.

margin: [string] It is the margin of the twito div from the browser boundaries. Default is '10px'.

padding: [string] It is the padding of the twito div. Default is '10px'.

animation: [string] The type of animation. Default is 'fade'. Two animations are supported right now - fade, bubble.

speed: [int] It is the speed of the animation. Default is 5000.

showAvatar: [bool] Whether or not to show the user's Twitter profile image. Default is true.

avatarSize: [string] Height and width of the user's profile image. e.g. '36px',

bgColor: [string] Background color of the twito div. Default is '#ffffff'.

twito Plugin Code

(function($){
 $.fn.twito = function(options){

  var defaults = {
   users: ['web_speaks'],
   position: 'br',
   width: '300px',
   height: 'auto',
   margin: '10px',
   padding: '10px',
   animation: 'fade',
   speed: 5000,
   showAvatar: true,
   avatarSize: '36px',
   bgColor : '#ffffff'
  }

  var o = $.extend(defaults, options);
  $('body').append('<div id="twitPane"></div>');

  var $this = $('div#twitPane');
  $this.css({'width' : o.width});

  var buildString = '';
  for(var i=0;i<o.users.length;i++){
   if(i!=0) buildString+='+OR+';
   buildString+='from:'+o.users[i];
  }

  setPosition(o.position);
  function setPosition(pos){
   switch(pos){
    case 'tl':
     $this.css({'top' : o.margin, 'left' : o.margin});
     break;
    case 'tr':
     $this.css({'top' : o.margin, 'right' : o.margin});
     break;
    case 'bl':
     $this.css({'bottom' : o.margin, 'left' : o.margin});
     break;
    case 'br':
    default:
     $this.css({'bottom' : o.margin, 'right' : o.margin});
   }
  }

  $.getJSON("http://search.twitter.com/search.json?q="+buildString+"&rpp=50&callback=?", function(data){
   tweet(data);
  });
  
  function tweet(d){
   switch(o.animation){
    case 'fade':fade(d);break;
    case 'bubble':bubble(d);break;
    default:fade(d);
   }
  }

  function fade(d){
   var c = 0;
   var interval = setInterval(
     function() {
      $this.find('div.tweet').fadeOut('slow');
      var str = createTweetDiv(d.results[c]);
      $this.html(str).hide().fadeIn('slow');
      c++; 
      if( c >= d.results.length) c=0;
     } , o.speed);
  }

  function bubble(d){
   var c = 0;
   var tt = $this.css('top');
   var tl = $this.css('left');
   var tb = $this.css('bottom');
   var tr = $this.css('right');

   var interval = setInterval(
     function() {
      var str = createTweetDiv(d.results[c]);
      $this.html(str).fadeTo('fast', 1);
      switch(o.position){
       case 'bl':
        $this.animate({opacity: 0,bottom: '150px'}, parseInt(o.speed*80/100), function() {
          $this.css({'bottom' : tb, 'left' : tl});
        });
        break;
       case 'tl':
        $this.animate({opacity: 0,top: '150px'}, parseInt(o.speed*80/100), function() {
          $this.css({'top' : tt, 'right' : tl});
        });
        break;
       case 'tr':
        $this.animate({opacity: 0,top: '150px'}, parseInt(o.speed*80/100), function() {
          $this.css({'top' : tt, 'right' : tr});
        });
        break;
       case 'br':
       default:
        $this.animate({opacity: 0,bottom: '150px'}, parseInt(o.speed*80/100), function() {
          $this.css({'bottom' : tb, 'right' : tr});
        });
      }
      c++; 
      if( c >= d.results.length) c=0;
     } , o.speed);

  }

  function createTweetDiv(data){
   var htm = '<div class="tweet" style="background-color:'+o.bgColor+';padding:'+o.padding+';height:'+o.height+'">';
   if(o.showAvatar){
    htm += '<div class="avatar"><a href="http://twitter.com/'+data.from_user+'" target="_blank"><img style="height:'+o.avatarSize+';width:'+o.avatarSize+';" src="'+data.profile_image_url+'" alt="'+data.from_user+'" /></a></div>';
   }
   htm += '<div class="user"><a href="http://twitter.com/'+data.from_user+'" target="_blank">'+data.from_user+'</a></div><br />\
     <div class="time">'+relativeTime(data.created_at)+'</div>\
     <div class="txt">'+formatTwitString(data.text)+'</div>\
     </div>';
   return htm;
  }

  function formatTwitString(str){
   str=' '+str;
   str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
   str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
   str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
   return str;
  }

  function relativeTime(pastTime){ 
   var origStamp = Date.parse(pastTime);
   var curDate = new Date();
   var currentStamp = curDate.getTime();
   
   var difference = parseInt((currentStamp - origStamp)/1000);

   if(difference < 0) return false;

   if(difference <= 5)    return "Just now";
   if(difference <= 20)   return "Seconds ago";
   if(difference <= 60)   return "A minute ago";
   if(difference < 3600)   return parseInt(difference/60)+" minutes ago";
   if(difference <= 1.5*3600)   return "One hour ago";
   if(difference < 23.5*3600)  return Math.round(difference/3600)+" hours ago";
   if(difference < 1.5*24*3600) return "One day ago";
   
   var dateArr = pastTime.split(' ');
   return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
  }
 };
 
})(jQuery);

Note: createTweetDiv, formatTwitString, relativeTime javascript functions in the plugin and the CSS has been borrowed from Tutorialzine in A jQuery Twitter Ticker article.

twito Plugin Usage

<script type="text/javascript">
$(function(){
 $("body").twito();
});
</script>

twito Plugin Usage With Options

<script type="text/javascript">
$(function(){
 $("body").twito({
  users: ['web_speaks','smashingmag','real_CSS_Tricks','jeresig'],
  position: 'tr',
  width: '300px',
  height: '80px',
  margin: '10px',
  animation: 'bubble',
  speed: 3000,
  padding: '10px',
  bgColor: "#000",
  showAvatar: true,
  avatarSize: '24px'
 });
});
</script>

twito Full Page Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>twito : jQuery Twitter Plugin | WebSpeaks.in</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="twito.js"></script>
<script type="text/javascript">
$(function(){
 $("body").twito();
});
</script>
<!--[if lt IE 7]>
<style type="text/css">
div.tweet {
 background:none;
    border:none;
}
</style>
<![endif]-->
<style>
div#main{
 height:2000px;
}
</style>
</head>

<body>
<div id="main">
  <h1>twito : jQuery Twitter Plugin</h1>
  <p>Show tweets from multiple accounts</p>
  <p>Pure jQuery & CSS</p>
  <p>Multiple animations</p>
  <p>Options for easy configuration</p>
</body>
</html>

Implementing Google Maps with jQuery

2012-01-11T23:24:00.000-08:00

Google maps are the most popular service for displaying locations over the web. Today we will learn how to implement Google maps in you web pages. We will create custom markers for pointing the locations on the map. We will also create infoWindows for showing the information text for the locations. See the demo here.

Live demo Download Script

Including Google Maps Javascript

You need to create a Google Maps key for your domain at code.google.com/apis/maps/signup.html. Then include the following JS in your web page:

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true">
</script>

Initializing Google Maps

For initializing Google Maps on your web page, we have created a function called 'initialize()'. Here is the body of the function:

function initialize() {

 //Create a location object with latitude and longitudes
 var delhi = new google.maps.LatLng(28.635308, 77.22496);

 //Create options for the map object
 var myOptions = {
  zoom:10,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: delhi
 }

 //Create our map
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Creating Custom markers on Google Maps

For creating markers with our own icons, we have created a function called 'createMarker()'. This function accept two parameters:
1. map: map object on which marker is to be placed.
2. centerLoc: the location object where marker is to be located Here is the body of the function:

/*Function for creating the custom marker*/
function createMarker(map, centerLoc){
 var image = new google.maps.MarkerImage(
  'http://www.webspeaks.in/favicon.ico',
  new google.maps.Size(40,35),
  new google.maps.Point(0,0),
  new google.maps.Point(0,35)
 );
 marker = new google.maps.Marker({
  position: centerLoc,
  map: map,
  icon: image,
  title:"Click here for more info."
 });
}

Creating Custom infoWindow on Google Maps

For creating infoWindow on Google Maps, we have created a function called 'createInfoWindow()'. This function accept three parameters:
1. map: map object on which marker is to be placed.
2. marker: The marker object on click of which infoWindow needs to be opened
3. customText: The text to be written in infoWindow Here is the body of the function:

/*Function for creating the custom infoWindow*/
function createInfoWindow(map, marker, customText){
 infowindow = new google.maps.InfoWindow({
  content: customText
 });

 /*Open infoWindow on clicking the marker*/
 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
 });
}

Complete implementation of Google Maps

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=ABQIAAAA637Mus9i198xaCP6kyeT0RQx_VuEwDbQw2tT4lOIPXcH-8yh-RShip_gsIHcjuA8B3qb__racWinFg&sensor=true">
    </script>
 <script type="text/javascript">
  //Variable for holding map object
  var map;

  //Variable for holding marker object
  var marker;

  //Variable for infowindow map object
  var infowindow;
  
  jQuery(document).ready(function(){
   /*Map initialization*/
   function initialize() {

    //Create a location object with latitude and longitudes
    var delhi = new google.maps.LatLng(28.635308, 77.22496);

    //Create options for the map object
    var myOptions = {
     zoom:10,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     center: delhi
    }

    //Create our map
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    createMarker(map, delhi);//Call function for creating our marker
    customText = '<div id="infoWindow">Welcome to <b>New Delhi</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, Wordpress, Facebook API, Twitter API, PHP security tips.</div>';
    createInfoWindow(map, marker, customText);//Call function for creating our infowindow
   }

   /*Function for creating the custom marker*/
   function createMarker(map, centerLoc){
    var image = new google.maps.MarkerImage(
     'http://www.webspeaks.in/favicon.ico',
     new google.maps.Size(40,35),
     new google.maps.Point(0,0),
     new google.maps.Point(0,35)
    );
    marker = new google.maps.Marker({
     position: centerLoc,
     map: map,
     icon: image,
     title:"Click here for more info."
    });
   }
   
   /*Function for creating the custom infoWindow*/
   function createInfoWindow(map, marker, customText){
    infowindow = new google.maps.InfoWindow({
     content: customText
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
   }

   jQuery('#mumbai').click(function(){
    var Mumbai = new google.maps.LatLng(19.0759837, 72.8776559);
    map.setCenter(Mumbai);
    createMarker(map, Mumbai);
    customText = '<div id="infoWindow"><b>Welcome to Mumbai</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, Wordpress, Facebook API, Twitter API, PHP security tips.</div>';
    createInfoWindow(map, marker, customText);
   });

   jQuery('#new-york').click(function(){
    var newyork = new google.maps.LatLng(40.77, 73.90);
    map.setCenter(newyork);
    createMarker(map, newyork);
    customText = '<div id="infoWindow"><b>Welcome to New York</b>.<br /><a href="http://webspeaks.in/" target="_blank">Webspeaks.in</a> provides excellent tutorials on Jquery, JavaScript, PHP, CSS, Magento, Wordpress, Facebook API, Twitter API, PHP security tips.</div>';
    createInfoWindow(map, marker, customText);
   });

   initialize();
  });
 </script>
</head>
<body>
 <div class="googlemap">
  <div id="map_canvas"></div>
  <div class="text">
   <a id="mumbai" href="javascript:;">Go to Mumbai</a><br />
   <a id="new-york" href="javascript:;">Go to New York</a><br />
  </div>
 </div>
</body>
</html>

A bit of CSS

body{
 font-family:Sans-serif;
 font-size:12px;
}
.googlemap{
 margin: auto;
 padding: 0;
 width: 960px;
}
#map_canvas{
 margin: auto;
 width: 650px;
 height: 350px;
 border:2px double #ececec;
 padding:10px;
}
#infoWindow {
 color: #3E56E5;
 height: 100px;
 width: 200px;
 overflow:hidden;
}
div.text{
 margin: auto;
 text-align:center;
}
div.text a{
 color: #888888;
 font-weight: bold;
 text-align: center;
 font-size: 18px;
}

Integrating PayPal Payment Gateway with PHP

2011-12-30T11:20:00.000-08:00

If you want to allow users on your website to make payments then PayPal is the best and the simplest option. Today we will see how to integrate PayPal payment gateway with your PHP online store. We will use the IPN(Instant Payment Notification) service of PayPal for processing the payments. PayPal sends responses for all payment actions(make payment, accept payment, refund payment, cancel payment) to the IPN URL set in your PayPal account settings. So lets go step by step and see how the whole process is done.

Live Demo Download Script

Step 1: Create a PayPal Sandbox account at https://developer.paypal.com/.

Step 2: Create two test accounts under this Sandbox account. One account will be for buyer and other for seller. You should select the 'Preconfigured test accounts' for simplicity.

Step 3: Enabling IPN

To enable IPN, go to the 'Test site' of the seller account(see below screenshot).
Now click on the 'Profile' menu link and then click on 'Instant Payment Notification Preferences'(see below screenshot).
Edit the IPN settings, add your IPN URL in the URL textbox and click on Save(see below screenshot).

Step 4: payments table

CREATE TABLE `payments`
(
`payment_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`item_id` int(11),
`invoice_id` int(11),
`amount` float(10,2),
`amount_refunded` float(10,2),
`amount_refunded` float(10,2),
`transaction_id` varchar(125),
`status` varchar(10)
)

Step 5: The Products page

Our product page will contain a separate form for each product. The details in the forms will be product specific.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>WebSpeaks.in | Paypal Integration with PHP</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php
$paypal_url = 'https://www.sandbox.paypal.com/cgi-bin/webscr';
$paypal_id = 'bhardw_1325263769_biz@yahoo.co.in';//This is your seller id

$cancel_url = 'http://demos.frnzzz.com/paypal/store/index.php?action=cancel';
$return_url = 'http://demos.frnzzz.com/paypal/store/';

$products = array();
$products[] = array('id'=>156,'name'=>'Motorola 156 MX-VL','price'=>15, 'special_price'=>7, 'image'=>'laptop.gif'); 
$products[] = array('id'=>157,'name'=>'Iphone Apple','price'=>12, 'special_price'=>10, 'image'=>'p4.gif'); 
$products[] = array('id'=>158,'name'=>'Samsung Webcam','price'=>10, 'special_price'=>5, 'image'=>'p5.gif'); 
?>
<div id="main_container">
 <div id="header">
        
        <div id="logo">
            <a href="index.html"><img src="images/webspeaks.gif" alt="" title="" border="0" width="260" height="140" /></a>
     </div>
        
    </div>
    
   <div id="main_content"> 
    
 <div class="center_content">
  <div class="center_title_bar">Latest Products</div>

  <?php
  foreach($products as $product){
  ?>
   <div class="prod_box">
    <div class="top_prod_box"></div>
    <div class="center_prod_box">            
      <div class="product_title"><a href="#"><?php echo $product['name'] ?></a></div>
      <div class="product_img"><a href="#"><img src="images/<?php echo $product['image'] ?>" alt="" title="" border="0" /></a></div>
      <div class="prod_price"><span class="reduce"><?php echo $product['price'] ?>$</span> <span class="price"><?php echo $product['special_price'] ?>$</span></div>                        
    </div>
    <div class="bottom_prod_box"></div>             
    <div class="prod_details_tab">
     <form id='payment_form' action='<?php echo $paypal_url ?>' method='post' name='payform' />
      <input type='hidden' name='business' value='<?php echo $paypal_id ?>' />
      <input type='hidden' name='cmd' value='_xclick' />
      <input type='hidden' name='amount' value='<?php echo $product['special_price'] ?>' />
      <input type='hidden' name='no_shipping' value='0' />
      <input type='hidden' name='item_name' value='<?php echo $product['name'] ?>' />
      <input type='hidden' name='item_number' value='<?php echo $product['id'] ?>' />
      <input type='hidden' name='invoice' value='WS-<?php echo $product['id'] ?>' />
      <input type='hidden' name='currency_code' value='USD' />
      <input type='hidden' name='cancel_return' value='<?php echo $cancel_url ?>' />
      <input type='hidden' name='return' value='<?php echo $return_url ?>' />
      <input type='image' src='https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_SM.gif' name='submit' style='display:{$display_button}' />
     </form>   
    </div>                     
   </div>
  <?php
  }
  ?>

 </div>
   </div>

</div>
<!-- end of main_container -->
</body>
</html>

Step 6: The payment process page

process_payment.php

<?php
$paypal_response = $_REQUEST;

//Check if it is the response from PayPal
if ( isset( $paypal_response ) ) {

 $tx = $paypal_response['tx'];//Transaction code
 $st = strtolower($paypal_response['payment_status']);//Payment status
 $amount = $paypal_response['mc_gross'];//Amount
 $cc = $paypal_response['mc_currency'];//Currency code
 $item_number = $paypal_response['item_number'];//Item number
 $invoice_id = $paypal_response['invoice'];

 $user_email = 'bhardwajsonheight@gmail.com';

 $site_name = 'WebSpeaks.in Test Store';
 $eol = "\r\n";
 $headers  = 'MIME-Version: 1.0' . $eol;
 $headers .= 'Content-type: text/html; charset=iso-8859-1' . $eol;
 $headers .= 'From:' . $site_name . ' <store@webspeaks.in>'. $eol;
 $headers .= 'Reply-To:' . $site_name . ' <store@webspeaks.in>' . $eol;
 $headers .= 'Return-Path:' . $site_name . ' <store@webspeaks.in>' . $eol;

 $eol = "\r\n<br />";
 $thanks_text = $eol.$eol.'Thanks!'. $eol;

 if($st == 'completed'){//Payment has been completed successfully

  //Update payment in DB
  mysql_query("UPDATE payments SET `status`='complete', `amount`='".$amount."' WHERE `invoice_id`='".$invoice_id." AND `item_id`='".$item_id."')");

  //Send succes email to user
  $email_tpl = 'Hello Buyer,' . $eol;
  $email_tpl .= "We have received your payment of $amount $cc." . $eol;
  $email_tpl .= "Thanks for the purchase." . $eol;
  $email_tpl .= $eol . $thanks_text;

  mail ($user_email, 'Payment Received', $email_tpl, $headers);

 }elseif($st == 'pending'){//Payment is pending for approval

  //Enter payment in DB
  mysql_query("INSERT INTO payments (`item_id`, `invoice_id`, `amount`, `transaction_id`, `status`) VALUES ('".$item_number."', '".$invoice_id."', '".$amount."',  '".$tx."', 'pending')");

  $email_tpl = 'Hello Buyer,' . $eol;
  $email_tpl .= "Your payment of $amount $cc is pending for approval. We will process it soon." . $eol;
  $email_tpl .= $eol . $thanks_text;

  mail ($user_email, 'Payment Pending', $email_tpl, $headers);

 }elseif($st == 'refunded'){//Payment is refunded after approval

  //Update payment in DB
  mysql_query("UPDATE payments SET `status`='refunded', `amount_refunded`='".$amount."' WHERE `invoice_id`='".$invoice_id." AND `item_id`='".$item_id."')");

  $email_tpl = 'Hello Buyer,' . $eol;
  $email_tpl .= "Your payment of $amount $cc has been refunded." . $eol;
  $email_tpl .= $eol . $thanks_text;

  mail ($user_email, 'Payment Pending', $email_tpl, $headers);

 }elseif($st == 'reversed'){//Payment is refunded before approval or it has been cancelled

  $reason = strtolower($paypal_response['reason_code']);//Reason for payment reversal

  if($reason == 'refund'){//Payment is refunded before approval
   //Update payment in DB
   mysql_query("UPDATE payments SET `status`='refunded', `amount_refunded`='".$amount."' WHERE `invoice_id`='".$invoice_id." AND `item_id`='".$item_id."')");

   $email_tpl = 'Hello Buyer,' . $eol;
   $email_tpl .= "Your payment of $amount $cc has been refunded." . $eol;
   $email_tpl .= $eol . $thanks_text;

   mail ($user_email, 'Payment Refunded', $email_tpl, $headers);

  }elseif($reason == 'other'){//Payment has been cancelled
   //Update payment in DB
   mysql_query("UPDATE payments SET `status`='cancelled' WHERE `invoice_id`='".$invoice_id." AND `item_id`='".$item_id."')");

   $email_tpl = 'Hello Buyer,' . $eol;
   $email_tpl .= "Your payment of $amount $cc has been refunded." . $eol;
   $email_tpl .= $eol . $thanks_text;

   mail ($user_email, 'Payment Cancelled', $email_tpl, $headers);

  }

 }
}

Upload photos to Facebook Fan Page using PHP

2011-12-17T09:22:00.000-08:00

After writing the article on Uploading photos to Facebook albums, I though it would be a good idea to tell my readers how to upload photos to your Facebook fan page. Uploading photos to the fan page is a bit different from uploading photos to your album. Here we need the access token of your Fan page. If you know the id of your Fan page, it can be found on runtime though. So here is the script to upload the pics.

Live Demo

PHP Code:

<html>
<head>
<title>WebSpeaks.in | Upload images to Facebook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<?php
require_once 'library/facebook.php';
$facebook = new Facebook(array(
 'appId'  => $app_id,,
 'secret' => $app_secret,
 'fileUpload' => true
));


//It can be found at https://developers.facebook.com/tools/access_token/
$access_token = '<Your access token>';

$params = array('access_token' => $access_token);

//The id of the fanpage
$fanpage = '330299184793';

//The id of the album
$album_id ='10150418901414794';

//Replace arvind07 with your Facebook ID
$accounts = $facebook->api('/arvind07/accounts', 'GET', $params);

foreach($accounts['data'] as $account) {
 if( $account['id'] == $fanpage || $account['name'] == $fanpage ){
  $fanpage_token = $account['access_token'];
 }
}


$valid_files = array('image/jpeg', 'image/png', 'image/gif');

if(isset($_FILES) && !empty($_FILES)){
 if( !in_array($_FILES['pic']['type'], $valid_files ) ){
  echo 'Only jpg, png and gif image types are supported!';
 }else{
  #Upload photo here
  $img = realpath($_FILES["pic"]["tmp_name"]);

  $args = array(
   'message' => 'This photo was uploaded via WebSpeaks.in',
   'image' => '@' . $img,
   'aid' => $album_id,
   'no_story' => 1,
   'access_token' => $fanpage_token
  );

  $photo = $facebook->api($album_id . '/photos', 'post', $args);
  if( is_array( $photo ) && !empty( $photo['id'] ) ){
   echo '<p><a target="_blank" href="http://www.facebook.com/photo.php?fbid='.$photo['id'].'">Click here to watch this photo on Facebook.</a></p>';
  }
 }
}

?>
 <!-- Form for uploading the photo -->
 <div class="main">
  <p>Select a photo to upload on Facebook Fan Page</p>
  <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
  <p>Select the image: <input type="file" name="pic" /></p>
  <p><input class="post_but" type="submit" value="Upload to my album" /></p>
  </form>
 </div>
</body>
</html>

A bit of CSS:

html{
 font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
.main{
 width:400px;
 margin:auto;
 border:2px solid #0066CC;
 color:#3B5998;
 padding:20px;
 font-size: 11px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 1px 1px 0 #d5d5d5;
 background: none repeat scroll 0 0 #F2F2F2;
}
.text{
 color: #777777;
 border: 1px solid #BDC7D8;
 font-size: 11px;
 height: 15px;
}
.post_but {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
}
a{
 color:#3B5998;
}

Magento Live Customer Chat Extension released

2011-12-14T09:22:00.000-08:00

Magento Customer Chat extension allows the customers on your store to communicate with each other in real time. The logged in customers on your store can see other logged in customers and chat with each other. The chat boxes are opened in Gmail style and new chat notifications are also shown over the browser window title bar.

Extension Price: $49.00

Here are the features available in the extension:

See all online users
Chat with any online user
New chat notification
Option to configure the chat timing and the chatbox colors

Here are the screenshots to see how the extension works:

Live chatboxes

Chat configurations

Purchase this extension:
&lt;p&gt;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;Loading...&amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;gt;&lt;/p&gt;

Create custom plugin with button in CKEditor

2011-12-08T09:16:00.001-08:00

Recently I needed to customize the famous CKEditor for one of my projects. The requirement was to add custom text in the source code with the help of a new button added in the CKEditor. Then I searched the net and found some good tutorials. Here I am presenting a collaborative outcome of all the research in term of a simple plugin for adding current time to the source on click of a the button. Here is the working demo...

Live Demo Download Script

Creating new Plugin

In the ckeditor/plugins directory create a new directory with the name of your plugin. We are creating 'ckeditor/plugins/showtime'.
In this directory add 'plugin.js' file which is the main file for our plugin.

Here is the code for our showtime plugin:

CKEDITOR.plugins.add('showtime',   //name of our plugin
{    
    requires: ['dialog'], //requires a dialog window
    init:function(a) {
  var b="showtime";
  var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
  c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
  c.canUndo=true;

  //add new button to the editor
  a.ui.addButton("showtime",
  {
   label:'Show current time',
   command:b,
   icon:this.path+"showtime.png"
  });
  CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
 }
});

Create the dialog box For creating the dialog box, follow these steps: Inside 'ckeditor/plugins/showtime' directory add new directory named 'dialogs'. In this directory create a new javascript file with any name. We are naming it as 'ab.js'.

CKEDITOR.dialog.add("showtime",function(e){

 var date=new Date();
 var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');

 var h=date.getHours();
 var nh=h;
 var m=date.getMinutes();
 var s=date.getSeconds();
 var a;
 if(h>12){a="PM"; nh=h-12;}
 if(h<=12){a="AM"; nh=h;}
 
 //Create different time formats
 var t1 = months[parseInt(date.getMonth())]+' '+date.getDate()+" @ " + nh +  ":" + m + " " + a;
 var t2 = date.getFullYear()+'-'+parseInt(date.getMonth()+1) +'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
 var t3 = date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();

 return {
  title:'Show Time',
  resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
  minWidth:300,
  minHeight:100,
  onShow:function(){ 
  },
  onLoad:function(){ 
    dialog = this; 
    this.setupContent();
  },
  onOk:function(){
  },
  contents:[
  {  id:"info",
    name:'info',
    label:'Tab',
    elements:[

     {
      id : 'format',
      type : 'select',
      label : 'Format',
      accessKey : 'T',
      items :
      [
       [ t1 ],
       [ t2 ],
       [ t3 ]
      ]
     },
     {  
      type:'html',
      html:'<span style="">'+'Select the date format'+'</span>'
     }
    ]
  }
  ],
  buttons:[{
   type:'button',
   id:'okBtn',
   label: 'Set',
   onClick: function(){
      addCode(); //function for adding time to the source
   }
  }, CKEDITOR.dialog.cancelButton],
};

 //function for adding time to the source
 function addCode(){

  //get the value of 'format' field in the 'info' tab of the dialog box
  var t = dialog.getValueOf('info', 'format');
  if(t.length == 0){
   alert('Please select date format.')
   return false;
  }

  var myEditor = CKEDITOR.instances.editor1;

  //insert the time into the HTML source code
  myEditor.insertHtml(t);

  return false;

 };

});

Adding the new button in our CKEditor For adding the new plugin button in the CKEditor, we need to modify the 'config.js' in the root directory of CKEditor. Our 'config.js' looks like:

CKEDITOR.editorConfig = function( config )
{
 config.uiColor = '#AADC6E';

 //Add new button to the editor
 config.toolbar = 'Full';
 config.toolbar_Full =
 [
  { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Source'] },

  { name: 'bibliography', items : [ 'showtime' ] }
 ];
};

Calling our custom plugin in CKEditor: To add our custom plugin in CKEditor, we need to declare this while adding the CKEditor in our HTML page. See the following code:

<form action="sample_posteddata.php" method="post">
  <textarea cols="80" id="editor1" name="editor1" rows="10">Create new plugin with custom button. </textarea>
  <script type="text/javascript">
  //<![CDATA[

   CKEDITOR.replace( 'editor1',
    {
     fullPage : true,
     extraPlugins : 'showtime' //add our plugin to CKEditor
    });

  //]]>
  </script>
</form>

Facebook Album Script: version 2.0

2011-10-28T11:47:00.000-07:00

After the first version of Facebook Album Script, I am here with its second and extended version. This album script allows you to embed user's Facebook albums in your site in an easy and elegant manner. Here are the prime features of the script:
1. All albums listing
2. Show photos in fancy popup (no separate page to view photos)
3. Next-Previous Pagination
4. AJAX enabled
5. Show comments for each photo
6. Show likes for user comments
7. Fast performance for smooth user experience

Don't wait. Try it here.

Live Demo Download Script

Step by step code explained:
1. Create config file for basic Facebook configuration.

<?php
error_reporting(E_ERROR);
ini_set('display_errors', '1');
ini_set('max_execution_time','100');

require_once 'library/facebook.php';
try{
 $app_id = "your_app_id";
 $app_secret = "your_app_secret";
 $facebook = new Facebook(array(
   'appId' => $app_id,
   'secret' => $app_secret,
   'cookie' => true
 ));
 if(is_null($facebook->getUser()))
 {
  header("Location:{$facebook->getLoginUrl(array('req_perms' => 'user_status,publish_stream,user_photos,user_likes,user_location,offline_access,user_photo_video_tags'))}");
  exit;
 }
 $me = $facebook->api('/me');

}catch(Exception $e){
 echo $e->getMessage();
 echo '<p>Please try clearing your browser cookies or <a href="http://demos.frnzzz.com/fbAlbum/fbAlbum_v2.0/index.php.php">click here</a>.</p>';
 die;
}
?>

2. Main markup file

<?php
require_once 'config.php';
?>

<html>
 <head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript" src="comments.js"></script>
  <title>WebSpeaks.in | Access facebook Albums on your site using PHP</title>
  
  <script type="text/javascript">
  jQuery(document).ready(function(){

  });
  </script>
 </head>
 <body>

 <div id="main">

<?php

 echo '<p class="hd">My Albums</p>';


try {
 $albums = $facebook->api('/me/albums');

 if(!empty($albums['data'])) {
  foreach($albums['data'] as $album) {
  
   $cover = "https://graph.facebook.com/{$album['id']}/picture?type=album&access_token={$facebook->getAccessToken()}";

   echo '<div class="alb_cover" id="',$album['id'],'" title="',$album['name'],'">';
   
    echo '<a href="javascript:;"><div class="cover_photo"><img src="',$cover,'" /></div></a>';

    echo '<a href="javascript:;">'.'<div class="alb_title">',$album['name'],'</div></a>';
   
   echo '</div>';

  }
 }
} catch (FacebookApiException $e) {
 error_log($e);
 var_dump($e);
}


?>
 </div>

  <div id="backgroundPopup"></div>
  <div id="popupContact">
   
   <table align="center">
    <tr id="popup_head">
     <td colspan="3"><a id="popupContactClose">Close</a></td>
    </tr>
    <tr>
     <td><div id="prev" class="nextPrev"><a href="javascript:void(0)">«</a></div></td>
    
     <td><div id="picHolder"></div></td>
    
     <td><div id="next" class="nextPrev"><a href="javascript:void(0)">»</a></div></td>
    </tr>
    
    <tr>
     <td colspan="3" class="commentsTd">
      <div id="commentsHolder">
       <table align="center" class="new_comment_table">
       </table>  
      </div>
     </td>
    </tr>
   </table>
   
  </div>
  
 </body>

</html>

3. jQuery file that performs some magic

jQuery(document).ready(function()
{
 
 var loaded = [];
 var albums = [];
 var album_id;
 var cur_pic = 0;
 var alb_name = '';

 jQuery('div.alb_cover a').click(function(){

  album_id = jQuery(this).parent().attr('id');
  var cover_photo = jQuery(this).parent().find('div.cover_photo');
  var cover = cover_photo.html();
  var cover_height = cover_photo.css('height');
  var cover_width = cover_photo.css('width');
  alb_name = jQuery(this).parent().attr('title');

  if ( !loaded[album_id] ) {
  
   albums[album_id] = [];

   jQuery.ajax({
      'url':'ajax.php',
      'dataType': 'json',
      'data':'album_id=' + album_id,
      'type':'POST',
      'async':false,
      'beforeSend': function(){
     cover_photo.html('<img src="http://static.ak.connect.facebook.com/images/loaders/indicator_white_large.gif" />');
     cover_photo.css({"height": cover_height,"width": cover_width});
      },
      'success':function(data){

      loaded[album_id] = true;

      albums[album_id] = data;
      
      cover_photo.html(cover);
      
      loadNextImage(album_id, 0);

    }
   });

  }
  
  centerPopup();
  loadPopup();
 });
 
 function loadNextImage(album_id, step){

  jQuery('div.alb_count').empty();
  
  var next_pic = 0;

  if(step == 0){
  
   next_pic = 0;
   
  }else if(step == 'next'){
  
   next_pic = parseInt(cur_pic, 10)+1;

   if(next_pic >= albums[album_id].length){
    next_pic = 0;
   }
   
  }else{
  
   next_pic = parseInt(cur_pic, 10)-1;

   if(next_pic < 0){
    next_pic = albums[album_id].length - 1;
   }
  
  }

  cur_pic = next_pic;

  jQuery('#picHolder').html('<img src="'+albums[album_id][next_pic]['source']+'" />');

  loadComments(album_id);

 }
 
 function loadComments(album_id){

  var comment_table = jQuery('#commentsHolder').find('table.new_comment_table');

  comment_table.empty();
  
  var ntr = '<div class="alb_count">Album:' + alb_name + ' ' + parseInt(cur_pic+1) +' of '+albums[album_id].length+'</div>';
 
  if(albums[album_id][cur_pic]['name'] != ''){

   ntr = albums[album_id][cur_pic]['name'] + ntr;
  }

  comment_table.append('<tr><td class="pic_name">' + ntr + '</td></tr>');
  
  var comments = albums[album_id][cur_pic]['comments'];

  if ( comments.length > 0 ){
  
   for (var x in comments){

    var from_id = comments[x]['from']['id'];
    var from_name = comments[x]['from']['name'];
    var msg = comments[x]['message'];
    var time = comments[x]['created_time'].substring(0,10) + ' ' + comments[x]['created_time'].substring(11,19);
    var likes = parseInt(comments[x]['likes'], 10);
    
    if(likes > 0){
     if(likes > 1){
      var person = 'persons';
     }else{
      var person = 'person';
     }
     var likeHtm = '<img src="facebook_like_icon.png" />' + '<div class="count">' + likes + ' ' + person +'</div>';
    }else{
     var likeHtm = '';
    }

    var ctr = '<tr class="new_comment_row">';
    ctr += '<td class="new_comment_text"><a class="prof_name" target="_blank" href="http://facebook.com/profile.php?id='+from_id+'">'+from_name+':</a> <span class="msg">'+msg+'</span><br><div class="comment_time">'+time+'</div><div class="comment_likes">'+likeHtm+'</div>';
    ctr += '</td></tr>';

    comment_table.append(ctr);

   }

  }
  
 }

 jQuery("#next").click(function(){

  loadNextImage(album_id, 'next');

 });

 jQuery("#prev").click(function(){

  loadNextImage(album_id, 'prev');

 });
 
 

 jQuery("#popupContactClose, .c_btn").click(function()
 {
  disablePopup();
 });
 
 jQuery(document).keypress(function(e){
  if(e.keyCode==27)//Disable popup on pressing `ESC`
  {
   disablePopup();
  }
 });


 function loadPopup(){
  jQuery("#backgroundPopup").css({"opacity": "0.7"});
  jQuery("#backgroundPopup").fadeIn("fast");
  jQuery("#popupContact").fadeIn("slow");
 }
 function disablePopup(){
  jQuery("#backgroundPopup").fadeOut("slow");
  jQuery("#popupContact").fadeOut("slow");
 }
 function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = jQuery("#popupContact").height();
  var popupWidth = jQuery("#popupContact").width();
  jQuery("#popupContact").css({"left": windowWidth/2-popupWidth/2});
  jQuery("#popupContact").css({"position": "absolute",/*"top": windowHeight/2-popupHeight/2,*/"left": windowWidth/2-popupWidth/2});
  jQuery("#backgroundPopup").css({"height": windowHeight});
 }
 
 function ifExists(str){
  if(str=='undefined' || typeof(str)=='undefined' || str==''){
   return false;
  }else{
   return true;
  }
 }

});

4. AJAX file

<?php
if( !isset($_REQUEST['album_id']) )
 die("No direct access allowed!");

ini_set('max_execution_time','100');

$album_id = $_REQUEST['album_id'];

require_once '../library/facebook.php';

try{
 $app_id = "your_app_id";
 $app_secret = "your_app_secret";
 $facebook = new Facebook(array(
   'appId' => $app_id,
   'secret' => $app_secret,
   'cookie' => true
 ));
 if(is_null($facebook->getUser()))
 {
  // header("Location:{$facebook->getLoginUrl(array('req_perms' => 'user_status,publish_stream,user_photos,user_likes,user_location,user_photo_video_tags'))}");
  // exit;
 }
 $me = $facebook->api('/me');

}catch(Exception $e){
 echo $e->getMessage();
 die;
}


if($me){
 try {
  $params['fields'] = 'name,source,comments';
  $params = http_build_query($params, null, '&');
  $photos = $facebook->api("/$album_id/photos?$params");

  $i = 0;
  $album = array();
  foreach( $photos['data'] as $photo ){

   $album[$i] = array();
   
   $album[$i]['photo_id'] = $photo['id'];
   
   if(isset($photo['name'])){
    $album[$i]['name'] = $photo['name'];
   }else{
    $album[$i]['name'] = '';
   }
    
   $album[$i]['source'] = $photo['source'];
   
   if(isset($photo['from'])){
    $album[$i]['from'] = $photo['from'];
   }else{
    $album[$i]['from'] = '';
   }
    
   $album[$i]['created_time'] = $photo['created_time'];
   
   if(isset($photo['comments'])){
    $album[$i]['comments'] = $photo['comments']['data'];
   }else{
    $album[$i]['comments'] = '';
   }

   if(isset($photo['likes'])){
    $album[$i]['likes'] = $photo['likes'];
   }else{
    $album[$i]['likes'] = '';
   }

   $i++;
  }
  echo json_encode($album);

 } catch (FacebookApiException $e) {
  echo '<pre>';print_r($e);echo '</pre>';
  $user = null;
 }
} else {
 echo 'User not found';
}
?>

5. CSS file for styling the application

body{font-family: "lucida grande",tahoma,verdana,arial,sans-serif;color:#3B5998;font-size:11px;}
a{
 text-decoration:none;
}
div.alb_cover{
    float: left;
 margin:20px;
 padding:5px;
}
div.cover_photo{
 min-width:80px;
 min-height:100px;
 padding:7px;
 text-align:center;
    border: 1px solid #ECECEC;
}
div.cover_photo:hover{
 border:1px solid #3B5998;
}
div.alb_title{
 padding: 3px 0 0 0;
 color:#3B5998!important;
}

#popupContact *{
 border:0pt none;
 margin:0pt;
 padding:0pt;
 text-align:left;
}

#popupContact body{
 background:#fff none repeat scroll 0%;
 line-height:1;
 font-size: 12px;
 margin:0pt;
 height:100%;
}
#popupContact a{
 cursor: pointer;
 text-decoration:none;
 font-size:10px;
}
#backgroundPopup{
 display:none;
 position:fixed;
 _position:absolute; /* hack for internet explorer 6*/
 height:100%;
 width:100%;
 top:0;
 left:0;
 background:#FFFFFF; 
 z-index:1;
}
#popupContact{
 background-color:#F9F9F9;
 display:none;
 position:fixed;
 _position:absolute; /* hack for internet explorer 6*/
 min-height:402px;
 max-width: 960px;
 min-width: 787px;
 padding: 12px;
 border:10px solid #FFFFFF;
 z-index:2;
 top: 10px;
 overflow:hidden;
 box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 5px 3px rgba(0, 0, 0, 0.05), 0 5px 4px -3px rgba(0, 0, 0, 0.06);
}
#popupContactClose{
 line-height:14px;
 right:6px;
 top:4px;
 position:absolute;
 display:block;
 color:#000000;
}


#picHolder{
 text-align:center;
 max-width: 960px;
 min-width: 740px;
}


#popup_head{
 color:#333333!important;
 text-align:center!important;
}
div.nextPrev a{
 font-size: 24px!important;
    font-weight: bold;
 text-align:center;
 color:#333333!important;
}
#commentsHolder{
    overflow-y: auto;
 margin-left:18px;
}
.new_comment_table{
 clear:left;
 overflow:hidden;
 padding:5px 0 4px 5px;
 font-size:11px;
 margin:1px 0 0 25px;
}
.new_comment_table div.alb_count{
 color:#333333;
 float:right;
}
.new_comment_table td.pic_name{
 padding:5px 0 5px 5px!important;
 width:380px;
}
td.commentsTd{
 border-top: 1px groove #333333;
 padding: 10px 0 5px 0;
}
.new_comment_row{
 background-color:#ECEFF5;
 line-height: 16px;
 padding:3px;
}
.new_comment_text{
 width:300px;
 margin-top:2px;
 vertical-align:top;
 border-bottom: 1px solid #D2D9E7;
 padding: 5px 5px 4px!important;
}
.new_comment_text a.prof_name{
 color:#3B5998;
    font-weight: bold;
}
.new_comment_text span.msg{
 color:#333333;
}
.comment_time{
 color:#808080;
 font-size:9px;
 float:left;
}
.comment_likes{
 color:#808080;
 font-size:9px;
 float:right;
}
.comment_likes img{
 padding: 0 5px 0 0;
 vertical-align:middle;
}
.comment_likes div.count{
 padding: 0 5px 0 0!important;
 float:right;
}

Thats all to make our application running on your site. Will be back with version 3 of this script. Till then enjoy it:)

Quick tips for improving PHP Performance

2011-10-05T11:47:00.000-07:00

Recently I was studying about improving the performance of our PHP code. While surfing through the web I came out with some interesting tips about improving the performance of your PHP code. All the tips have been verified by renowned authors(including Google) and there is nearly no doubt regarding their authenticity. I want to share these tips with my readers. So here we go...

1. 'echo' is much faster than print. So always try echo something rather than printing it.

	/*This is faster*/
	echo 'This is echoed text';

	/*This is slower*/
	print 'This is printed text';

2. Always use the stacked form of echo instead of using concatenation. e.g

	/*Faster form of echo*/
	echo 'This is stacked form of ', $variable;

	/*Slower form of echo*/
	echo 'This is regular form of ' . $variable;

3. Use of single quotes rather than double quotes with echo can improve the performance of your code because compiler will not search for the variables inside the single quotes but in double quotes it will perform a search for possible variables.

	/*Faster form of echo*/
	echo 'This is single quoted string.';

	/*Slower form of echo*/
	echo "This is double quoted $string.";

4. Use pre-increments where possible instead of post-increments. Pre-incrementing is faster than post-increments.

	/*Slower form of iteration*/
	for ( $i=0; $i < 1000; $i++ ) {
		echo 'Loop ',$i;
	}

	/*Faster form of iteration*/
	for ( $i=0; $i < 1000; ++$i ) {
		echo 'Loop ',$i;
	}

5. Never use calculations as counters in an iteration.

	/*Slower form of iteration*/
	for ( $i=0; $i < count($arr); $i++ ) {
		echo 'Loop ',$i;
	}

	/*Faster form of iteration*/
	$counter = count($arr);
	
	for ( $i=0; $i < $counter; $i++ ) {
		echo 'Loop ',$i;
	}

6. Always unset the variable after using those. It may save some of your resources on the server.

	$counter = count($arr);
	
	for ( $i=0; $i < $counter; $i++ ) {
		$value = $arr[$i];
		
		foo( $value );//call any function
		
		unset($value);//unset the variable after using it.
	}

7. Always initialize your variables before using those. It can sometimes prove beneficial in terms of performance.

	$counter = count($arr);
	
	$value = '';//initialize the variable before using it
	
	for ( $i=0; $i < $counter; $i++ ) {
		$value = $arr[$i];
		
		foo( $value );//call any function
		
		unset($value);//unset the variable after using it.
	}

8. Always close the database connections after you are done with the queries.

	mysql_connect('localhost', 'root', 'secret123');
	
	mysql_select_db('test_db');
	
	//write database queries here
	
	mysql_close();//close the connection at the end

9. Avoid strlen() to check the length of a string. Checking the desired index in the string can also work.

	/*Slower form*/
	if ( strlen($str) > 100 ) {
		echo 'You have crossed the limits';
	}

	/*Faster form*/
	if ( $str[100] ) {
		echo 'You have crossed the limits';
	}

10. Use include() and require() instead of include_once() and require_once(). There's a lot of work involved in checking to see if a file has already been included. Sometimes it's necessary, but you should default to include() and require() in most situations.

11. Use full file paths on include/require statements. Normalizing a relative file path can be expensive; giving PHP the absolute path (or even "./file.inc") avoids the extra step.

12. Don't copy variables for no reason. Sometimes PHP novices attempt to make their code "cleaner" by copying predefined variables to variables with shorter names before working with them. What this actually results in is doubled memory consumption (when the variable is altered), and therefore, slow scripts. In the following example, if a user had inserted 512KB worth of characters into a textarea field. This implementation would result in nearly 1MB of memory being used.

	/*Slower form*/
	$description = strip_tags($_POST['description']);
	echo $description;

	/*Faster form*/
	echo strip_tags($_POST['description']);

13. Avoid doing SQL queries within a loop. A common mistake is placing a SQL query inside of a loop. This results in multiple round trips to the database, and significantly slower scripts. In the example below, you can change the loop to build a single SQL query and insert all of your users at once.

	foreach ($userList as $user) {
		$query = 'INSERT INTO users (first_name,last_name) VALUES("' . $user['first_name'] . '", "' . $user['last_name'] . '")';
		mysql_query($query);
	}

Produces:

	INSERT INTO users (first_name,last_name) VALUES("John", "Doe")

Instead of using a loop, you can combine the data into a single database query.

	$userData = array();
	foreach ($userList as $user) {
		$userData[] = '("' . $user['first_name'] . '", "' . $user['last_name'] . '")';
	 }
	$query = 'INSERT INTO users (first_name,last_name) VALUES' . implode(',', $userData);
	mysql_query($query);

Produces:

	INSERT INTO users (first_name,last_name) VALUES("John", "Doe"),("Jane", "Doe")...

14. Avoid OOP whenever you can. You should use OOP concepts only when these are really required. Study the situation you are working in. If you can do the things without OOP concepts, do it without hesitation. Using OOP for smaller tasks will always increase overhead rather than improving the performance. So the core concepts can help in most of the situations.'

15. Always strive for caching. Each time your request is processed by the server, the server has to reproduce the similar content repetitively. This wastes a lot of server resources just for nothing useful. So try to implement templating systems like 'Smarty'. It will always fasten your web application.

16. Using in built functions of PHP is many times faster than using custom build functions. So search the PHP manual thoroughly before writing your own function. Nearly every type of function is available in PHP.

Adding custom columns to the WordPress Posts/Pages listing

2011-09-23T03:19:00.000-07:00

While developing your custom plugins you might may have desired to add extra columns to the pages/posts listing in WordPress admin section. At first glance you may think that it may requires editing some template file (I guessed same though ;)). But thanks to WordPress action api that allows you to manipulate nearly every action in WordPress. Adding custom column is also achieved through WordPress actions. Lets see how it is done.

In your theme's function.php or your plugin file, write the following code:

add_filter('manage_posts_columns', 'my_column');

function my_column($defaults){

	$defaults['my_column'] = __('Custom Column');	/*Add our column to the list of default columns*/

	return $defaults;

}

The 'manage_posts_columns' filter will add the custom column to the list of default columns. So the column heading now appears in the listing. But it has no data till now. To add data under this column, write following code:

add_action('manage_posts_custom_column', 'custom_column_data', 10, 2);

function custom_column_data($column_name, $id) {
    if( $column_name == 'my_column' ) {

		/*Fetch custom information saved in meta data for this post*/
		$meta = get_post_meta($id, 'custom_info');

		/*If metadata is not empty, show it in the column*/
		if(!empty($meta)){

			$reviewed_by = $meta['reviewed_by'];
			
			$user = get_userdata($reviewed_by);
			
			echo '<a href="'.site_url()."/wp-admin/edit.php?post_type=post&author=".$user->ID.'">'.$user->user_nicename.'</a>';

		}

	}
}

The action 'manage_posts_custom_column' takes two arguments, one is the column name and other is the post ID. Based on these, any type of information can be shown in the column.

Managing Pages
To add the column to the pages listing, use following actions and filters:

add_filter('manage_pages_columns', 'my_column');

add_action('manage_pages_custom_column', 'custom_column_data', 10, 2);

Access Facebook Photo Albums using PHP - v1.0

2011-09-16T12:04:00.000-07:00

I think it will be great if you can access your Facebook photo albums on your website. I have created an easy way to access your Facebook albums and photos on your site. Like the previous tutorial on 'How to upload photos on Facebook using PHP', this tutorial also requires the appId and secret code of your Facebook application. I will release updates of this post in near future The new version will include the comments posting on the photos.
Lets see it working...

Live Demo Download Script

PHP Code:

<?php
	require_once 'library/facebook.php';
	try{
		$facebook = new Facebook(array(
				'appId' => $app_id,
				'secret' => $app_secret,
				'cookie' => true
		));
		if(is_null($facebook->getUser()))
		{
				header("Location:{$facebook->getLoginUrl(array('req_perms' => 'user_status,publish_stream,user_photos'))}");
				exit;
		}
		$me = $facebook->api('/me');
	}catch(Exception $e){
		echo $e->getMessage();
		echo '<p>Please try clearing your browser cookies or <a href="http://demos.frnzzz.com/fbAlbum/photos.php">click here</a>.</p>';
		die;
	}
?>
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
		<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
		<script type="text/javascript"> 
		$(document).ready(function() {
			$('.slideshow').cycle({
				fx: 'fade'
			});
		});
		</script> 
		<title>WebSPeaks.in | Access facebook Albums on your site using PHP</title>
	</head>
	<body>
<?php
	$albums = $facebook->api('/me/albums');

	$action = $_REQUEST['action'];

	$album_id = '';
	if(isset($action) && $action=='viewalbum'){ 
		$album_id = $_REQUEST['album_id'];
		$photos = $facebook->api("/{$album_id}/photos");
		?>
		<div class="slideshow"> 
		<?php
		foreach($photos['data'] as $photo)
		{
			echo "<img src='{$photo['source']}' />";
		}
		?>
		</div>
		<?php
	}

	$pageURL .= 'http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	echo '<div class="alb">';
	if(strstr($pageURL,'.php?')){
		$and = '&';
	}else{
		$and = '?';
	}

	echo '<p class="hd">My Albums</p>';
	foreach($albums['data'] as $album)
	{
		if($album_id == $album['id']){
			$name = '<b><u>'.$album['name'].'</u></b>';
		}else{
			$name = $album['name'];
		}
		echo '<p>'."<a href=".$pageURL.$and."action=viewalbum&album_id=".$album['id'].">".$name.'</a></p>';
	}
	echo '</div>';
	?>
	</body>
</html>

CSS Code:

body{
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
.alb {
	margin: auto;
	width:200px;
	float:right;
	padding:20px;
}
.alb p{
	background-color: #EDEFF4;
}
.alb p.hd{
	background-color: #EDEFF4;
	color: #1C2A47;
	font-size: 16px;
	font-weight:bold;
	padding:5px;
}
.alb p a{
	color: #3B5998;
	cursor: pointer;
	text-decoration: none;
	font-size: 11px;
	padding:10px;
	line-height: 25px;
}
.slideshow{
	margin: auto;
	float:left;
	padding:20px;
}
.slideshow img {
	padding: 15px;
	border: 1px solid #ccc;
	background-color: #eee;
}

Upload photos on Facebook using PHP

2011-08-30T12:30:00.000-07:00

If you have strived for the uploading photos on Facebook via your site, then you are at right place. On demand of my readers I have written this article to show how to upload images on Facebook via PHP. First of all you need to create a Facebook app. I will not tell you how to do that. Get the appId and secret code of your application from facebook. This appId and secret code is necessary to connect you site to the application on Facebook. This code uses the Facebook.php class that can be downloaded from here.

Live Demo

PHP Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in | Upload images to Facebook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html{
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
.main{
	width:400px;
	margin:auto;
	border:2px solid #0066CC;
	color:#3B5998;
	padding:20px;
	font-size: 11px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 1px 1px 0 #d5d5d5;
	background: none repeat scroll 0 0 #F2F2F2;
}
.post_but {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #999999 #999999 #888888;
    border-style: solid;
    border-width: 1px;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
}
a{
	color:#3B5998;
}
</style>
</head>

<body>
<?php
/******************Configuration options***********************/

require_once 'library/facebook.php';
$facebook = new Facebook(array(
  'appId'  => $appId,	//your facebook application id
  'secret' => $secret,	//your facebook secret code
  'cookie' => true
));
	
$user = $facebook->getUser();

if(is_null($facebook->getUser()))
{
	header("Location:{$facebook->getLoginUrl(array('req_perms' => 'user_status,publish_stream,user_photos'))}");
	exit;
}
/******************Configuration options***********************/

if($_SERVER['REQUEST_METHOD'] =='POST'){
	$img = realpath($_FILES["pic"]["tmp_name"]);
	// allow uploads
	$facebook->setFileUploadSupport("http://" . $_SERVER['SERVER_NAME']);
	// add a status message
	$photo = $facebook->api('/me/photos', 'POST', 
		array(
			'source' => '@' . $img,
			'message' => 'This photo was uploaded via www.WebSpeaks.in'
		)
	);

	echo '<p><a target="_blank" href="http://www.facebook.com/photo.php?fbid='.$photo['id'].'">Click here to watch this photo on Facebook.</a></p>';
}
?>
<div class="main">
	<p>Select a photo to upload on Facebook.</p>
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
	<p>Select the image: <input type="file" name="pic" /></p>
	<p><input class="post_but" type="submit" value="Upload to my album" /></p>
	</form>
</div>
</body>
</html>

New Gmail like Floating Toolbar jQuery Plugin: v. 1.0

2011-07-24T09:04:00.000-07:00

This time Google has invested some resources in designing their sites. Like Gmail has been made much better. The new theme is simple and sober. I liked the floating toolbar of new Gmail. When I looked at it I thought why shouldn't I create something like that for my readers. After that I created a jQuery plugin that floats any element on your webpage just like the Gmail's toolbar. The plugin is really simple to use with few lines of code. Lets have a look at it.

Live Demo 1 Live Demo 2 Download Script

jQuery Plugin:

Here is the jQuery plugin that I wrote to make the thing happen.

(function($){
	$.fn.fixFloat = function(options){	/**We have named our plugin 'fixFloat'**/
	
		var defaults = {
			enabled: true
		};
		var options = $.extend(defaults, options);

		var offsetTop;		/**Distance of the element from the top of window**/
		var s;				/**Scrolled distance from the top of window through which we have moved**/
		var fixMe = true;
		var repositionMe = true;

		var tbh = $(this);
		var originalOffset = tbh.css('top');	/**Get the actual distance of the element from the top**/

		tbh.css({'position':'absolute'});

		if(options.enabled){
			$(window).scroll(function(){
				var offsetTop = tbh.offset().top;	/**Get the current distance of the element from the top**/
				var s = parseInt($(window).scrollTop(), 10);	/**Get distance from the top of window through which we have scrolled**/
				var fixMe = true;
				if(s > offsetTop){
					fixMe = true;
				}else{
					fixMe = false;
				}

				if(s < parseInt(originalOffset, 10)){
					repositionMe = true;
				}else{
					repositionMe = false;
				}

				if(fixMe){
					var cssObj = {
						'position' : 'fixed',
						'top' : '0px'
					}
					tbh.css(cssObj);
				}
				if(repositionMe){
					var cssObj = {
						'position' : 'absolute',
						'top' : originalOffset
					}
					tbh.css(cssObj);
				}
			});
		}
	};
})(jQuery);

HTML Markup:

<html>
<head>
<title>WebSpeaks.in | Gmail like Floating Toolbar</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="fixFloat.jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('div#toolbar_holder').fixFloat();	/**Call our plugin**/
});
</script>

</head>

<body>
<div class="main">
	<div id="toolbar_holder">
		<div class="tb">
			<ul>
				<li><input type="checkbox" ></li>
				<li><a>Archive</a></li>
				<li><a>Spam</a></li>
				<li><a>Delete</a></li>
				<li><a>Move to</a></li>
				<li><a>Labels</a></li>
				<li><a>Refresh</a></li>
			</ul>
		</div>
	</div>
	<div class="spacer">
	</div>
</div>
</body>
</html>

CSS Code:

html {
	height:100%; /* fix height to 100% for IE */
	max-height:100%; /* fix height for other browsers */
	padding:0; /*remove padding */
	margin:0; /* remove margins */
	border:0; /* remove borders */
	background:#fff; /*color background - only works in IE */
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	/*overflow:hidden; /*get rid of scroll bars in IE */
	/* */
	font: 75% arial,sans-serif;
}
#toolbar_holder{
	position:absolute;
	top:80px;
	margin:0;
	padding:0;
	border:1px solid #e1e1e1;
	background-color:#f9f9f9;
	height:50px;
	width:100%;
	width:800px;
	margin-left:207px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 1px 1px 0 #d5d5d5;
}
.tb ul{
	margin:0;
	padding:0;
	background:transparent;
	height:100%;
	margin-left:60px;
	padding-left:60px;
	padding-top:10px;
    line-height: 31px;
}
.tb ul li {  display:inline;}
.tb ul li a {
	cursor:pointer;
	font-weight:bold;
	padding:6px;
	color:#666666;
	text-decoration:none;
	border:1px solid #D3D3D3;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
	background-color: #F1F1F1;
}
.tb ul li:first-child {
	padding-right:30px;
}
.tb ul li:last-child {
	padding-left:30px;
}
.tb ul li a:hover {
	border:1px solid #666666;
}
.spacer{
	height:1000px;
	width:100%;
	background-color:#F1F1F1;
	width:1007px;
}

10 handy CSS3 tricks for web developers

2011-07-04T02:51:00.000-07:00

This time I have collected some useful CSS3 techniques for my readers. These are handy and ready to use techniques that can help you during your website development. I have selected the best tricks out of various excellent articles written by renowned authors. Here is the collection:

1. Multiple background images:
CSS3 allows you to have multiple background images in your containers. Now you need not to implement nested containers with clumsy CSS to create the layered effects.

#multipleBGDiv{
 border: 5px solid #cccccc;
 background:url(bg1.jpeg) top left no-repeat, url(bg2.jpeg) bottom left no-repeat, url(bg3.jpeg) bottom right no-repeat, url(bg4.jpeg) top right no-repeat;
 padding: 15px 25px;
 height: 400px;
 width: 500px;
}

2. Multiple border colors (FireFox only):
Using CSS3 you can also implement multiple colors in the borders of you containers. Take a look at this.

.borderColor{
 border: 8px solid #000;
 -moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
 -moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
 -moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
 -moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
 width:400px;
}

3. Rainbow Effect:

.rainbow  {
 /* fallback */
 background-color:#063053;
 /* chrome 2+, safari 4+; multiple color stops */
 background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
 /* chrome 10+, safari 5.1+ */
 background-image:-webkit-linear-gradient(,green,blue,purple,orange);
 /* firefox; multiple color stops */
 background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);
 /* ie10 */
 background-image: -ms-linear-gradient(red,green,blue,purple,orange);
 /* opera 11.1 */
 background-image: -o-linear-gradient(red,green,blue,purple,orange);
 /* The "standard" */
 background-image: linear-gradient(red,green,blue,purple,orange);
}

4. Drop Shadows:
Creating text shadows is now few words far. CSS3 provides direct implementation for text shadows.

.shadow{
 text-shadow: 2px 2px 2px #000;
}

The first two numbers control the offset, which is 2px down and 2px right. The last number sets the shadow spread. If you want shadows above the text, just use negative numbers.

5. Rotation:
Now rotate your containers around the axes using CSS3.

.rotate30deg{
 transform:rotate(30deg);
 -ms-transform:rotate(30deg); /* IE 9 */
 -moz-transform:rotate(30deg); /* Firefox */
 -webkit-transform:rotate(30deg); /* Safari and Chrome */
 -o-transform:rotate(30deg); /* Opera */
 background-color:#063053;
 border:2px solid #e9e9e9;
 height:300px;
 width:300px;
 border-radius:15px;
 margin:50px;
}

6. Box Shadow:
Giving a shadow to your box provides it an elevated effect.

.boxShadow
{
 box-shadow: 10px 10px 5px #888888;
 -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}

7. Stylish image less buttons:
Courtesy:http://inspectelement.com/

.button {
    -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
 background: #67b600;
    padding: 10px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
 color:#fff;
}
.button.gradient {
 background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.1, rgba(0,0,0,0.3)),
  color-stop(1, rgba(255,255,255,0.2))
 );
 background-image: -moz-linear-gradient(
  center bottom,
  rgba(0,0,0,0.3) 1%,
  rgba(255,255,255,0.2) 100%
 );
 background-image: gradient(
  center bottom,
  rgba(0,0,0,0.3) 1%,
  rgba(255,255,255,0.2) 100%
 );
}
 
.button.gradient:hover {
 background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.1, rgba(0,0,0,0.45)),
  color-stop(1, rgba(255,255,255,0.3))
 );
 background-image: -moz-linear-gradient(
  center bottom,
  rgba(0,0,0,0.45) 1%,
  rgba(255,255,255,0.3) 100%
 );
 background-image: gradient(
  center bottom,
  rgba(0,0,0,0.45) 1%,
  rgba(255,255,255,0.3) 100%
 );
}
.button:active { position: relative; top: 3px;
    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}
.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }

8. CSS3 Columns:
Now arrange your content in multiple columns without those tricky CSS tricks.

.3column{
 text-align: justify;
 -moz-column-count: 3;
 -moz-column-gap: 1.5em;
 -moz-column-rule: 1px solid #c4c8cc;
 -webkit-column-count: 3;
 -webkit-column-gap: 1.5em;
 -webkit-column-rule: 1px solid #c4c8cc;
}

9 CSS3 Opacity:
Creating opacity simplified with CSS3.

.opac{
 opacity:.30;/*Backward compatibility*/
 filter: alpha(opacity=value);/*IE*/
 -moz-opacity:.30;/*Mozilla*/
}

10. Gradient Background:

.linearBg2 {
  /* fallback */
  background-color: #1a82f7;
  background: url(bg1.jpeg);
  background-repeat: repeat-x;
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
  
  /* Safari 4-5, Chrome 1-9 */
  /* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  
  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(#2F2727, #1a82f7);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(#2F2727, #1a82f7);
}

Learn Object Oriented Programming Concepts in JavaScript

2011-07-01T00:26:00.000-07:00

If you are a JavaScript lover then you must have always missed the Object Oriented programming concepts in JavaScript. You must have dreamt of classes, properties, objects in JavaScript. But let me tell you that your dreams will come true after reading this article. Object Oriented programming is possible in JavaScript and this is done with help of 'prototype'. Now lets come to point and see how it is done.

Creating the Class:
In JavaScript, a class is nothing else than a simple function. It has same definition and declaration style as that of a function. Look at the following example:

function myClass(){  //myClass is the name of the JS class
 //Extra code lies here...
}

Now let us create some properties for our class.

function myClass(){
 this.a = 20;
 this.b = 'webspeaks';
 this.c = new Array();
}

Adding variables from outside the class:

myClass.prototype.newVariable = 'Wow! It works...';

Now let us add some methods to our class.
Adding methods to our class is very interesting. You need to create new methods through 'prototype' keyword along with the class name. All the properties of the class are available in this function through the use of 'this' keyword.

myClass.prototype.myMethod = function (){
 document.writeln('Following are the properties of myClass:');
 document.writeln(this.a+', '+this.b); //'this' points to myClass
 this.c['first'] = 'Red';    //Assign values to properties of the class
 this.c['second'] = 'Blue';
 document.writeln(this.c['first']+', '+this.c['second']);
 document.writeln(this.newVariable);     //Access the class variable created outside the class
}

Call the method from the class:

function myClass(params){
 this.myMethod(); //Call the method using 'this'
}

Creating object of the class:
Now you may want to know how do I access the class through the code. Don't worry, here is the solution:

//Creating Object 
var obj = new myClass();

//Call the methods and properties of the class through the newly created object
document.writeln(obj.a + ' = a');
document.writeln(obj.c['first'] + ' = c[first]');
obj.myMethod();     //Call the method of class through object

Parametrized Classes:
We can also create classes in JS that accept parameters. Just take a look at following example:

function myParamClass(params){ //We pass an array to the class as parameter
 this.p = params     //Hold the parameters in a class variable for access throughout the class methods.
 this.x = this.p['name'];  //Same as this.x = params['name'];
 this.y = this.p['age'];   //Same as this.x = params['age'];
}

//Passing parameters to our class
var values = new Array();
values['name'] = 'Arvind';
values['age'] = '23';
//Creating Parameterized Object 
var obj = new myParamClass(values);

//Access the class variables
document.writeln(obj.x + ' = name'); //Prints 'Arvind'
document.writeln(obj.y + ' = age');  //Prints '23'

And that's all for now. I hope you enjoyed the article. Please share the article if you find it interesting:)

How to Create Your First Google Chrome Extension

2011-06-28T09:34:00.000-07:00

This time I have created my first Google Chrome Extension - 'TwitFinder'. TwitFinder is a simple extension that allows you to retrieve the twitter profile information and all tweets posted by your friends just by typing in their username. So you need not open twitter.com each time you want to check out the new tweets of your friends. The main objective is to learn basics of How to create your first Chrome extension. And believe me, its really easy. Now I will tell you step by step how to create your first Google Chrome extension.
Extensions in Google Chrome are basically webpages. You have JavaScript files, stylesheets and images. You can even use JavaScript libraries like jQuery.
Download zip file Download Extension

The extensions are, however, treated a bit differently than your regular webpage, which is displayed in the browser. You can have access to all the opened tabs, to the user’s browsing history, you can manipulate all the pages that are opened, send AJAX requests to any website and much more.
You also have the benefit (or the limitation) that your extension runs only on one browser. You can forget all compatibility issues and embrace Google Chrome’s hot new HTML5 features.

Developing extensions

Extension are packed in a .crx file (are named zip file) but during development, you can map your working folder as an extension. This way you can quickly change and deploy code without the need of repackaging.
This is done by opening the extension page (type chrome://extensions/ in the address bar, or click Wrench icon > Extensions), and clicking Developer mode > Load unpacked extension.. on the page. After you make a change to the extension, just hit the Reload link below it.
After you’re done developing, click Pack extension.. and a crx file will be created for you. You can serve this file from your site and enable your site’s visitors to install it.
Google Chrome is by far the easiest browser to make extensions for, as you will see from the steps below.

Create and load an extension

In this section, you'll write an extension that adds a browser action to the toolbar of Google Chrome.
1. Create a folder somewhere on your computer to contain your extension's code.
2. Inside your extension's folder, create a text file called manifest.json, and put this in it:

{
 "name": "TwitFinder",
 "version": "1.0",
 "description": "Find all tweets of your friends just by typing in their username.",
 "browser_action":{
  "default_icon": "twitter.png",
  "default_title":"TwitFinder by WebSpeaks.in",
  "popup": "tweet.html" //Tell chrome that our extension is going to show a popup
 },
 "icons":{
  "128":"twitter-128.png" //The icon to be shown in the list of extensions.
 },
 "permissions": [
  "http://*.twitter.com/",
  "https://*.googleapis.com/"
 ]
}

3. Copy the icons (twitter.png and twitter-128.png) to the same folder.
4.Load the extension.

Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder and click OK.

If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

5. Now create a file tweet.html in the same directory with following contents (keep all the contents in tweet.html):

HTML Markup:

<html>
<head>
</head>
<body>
<div class="main">
<form id="twitform" onsubmit="return false;">Enter your Twitter Username : <input type="text" name="user" id="uname"><input type="button" value="Get Profile" id="tweet_btn" /></form>
<div id="timeline"></div>
<div id="infodiv">
 <h2>Additional Info:</h2>
 <ul id="info">
  <li>Name : <span id="twit_name"></span></li>
  <li>Location : <span id="twit_loc"></span></li>
  <li>Total Friends : <span id="twit_frnd"></span></li>
  <li>URL : <span id="twit_url"></span></li>
  <li>Account Created at : <span id="twit_created"></span></li>
  <li>Followers : <span id="twit_flwr"></span></li>
 </ul>
</div>
</div>
</body>
</html>

jQuery Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

/*********************************************************************/
/**The Twit jQuery plugin by Yusuke Horie to show the recent tweets**/
/*********************************************************************/
(function(jQuery){var _i=0;jQuery.fn.twit=function(user,options){if(typeof user!='string')return this;var
opts=jQuery.extend({},jQuery.fn.twit.defaults,options),c=jQuery.isFunction(opts.callback)?opts.callback:_callback,url='http://twitter.com/statuses/user_timeline/'+user+'.json',params={};opts.user=user;params.count=opts.count;return this.each(function(i,e){var $e=$(e);if(!$e.hasClass('twit'))$e.addClass('twit');jQuery.ajax({url:url,data:params,dataType:'jsonp',success:function(o){c.apply(this,[(o.results)?o.results:o,e,opts]);}});});};jQuery.fn.twit.defaults={user:null,callback:null,icon:true,username:true,text:true,count:200,limit:7,label:'Twitter',title:''};var _callback=function(o,e,opts){var $this=$(e);if(!o||o.length==0||$this.length==0)return false;$this.data('_inc',1);_i++;var username=o[0].user.screen_name,icon=o[0].user.profile_image_url;var h='<div class="twitHeader">'+' <span class="twitLabel">'+opts.label+'</span>  '+' <span class="twitTitle">'+opts.title+'</span>'+'</div>';if(opts.icon||opts.username){h+='<div class="twitUser">';if(opts.icon)
h+=' <a href="http://twitter.com/'+username+'/">'+'  <img src="'+icon+'" alt="'+username+'" title="'+username+'" style="vertical-align:middle;" />'+' </a>  ';if(opts.username)
h+='<a href="http://twitter.com/'+username+'/">'+username+'</a>';h+='</div>';}
h+='<ul class="twitBody" id="twitList'+_i+'">'+_build(o,$this,opts)+'</ul>';$this.html(h);$('a.twitEntryShow','#twitList'+_i).live('click',function(e){e.preventDefault();var $t=$(this);$t.parent().fadeOut(400,function(){var i=$this.data('_inc');i++;$this.data('_inc',i);if($t.hasClass('twitEntryAll')){$t.die('click');var start=(i*opts.limit)-opts.limit;$(this).after(_build(o,$this,opts,start,o.length)).remove();}else{$(this).after(_build(o,$this,opts)).remove();}});});};var _build=function(o,$t,opts,s,e){var
h='',inc=$t.data('_inc'),start=s||(inc*opts.limit)-opts.limit,end=e||((o.length>start+opts.limit)?start+opts.limit:o.length);for(var i=start;i<end;i++){var
t=o[i],username=t.user.screen_name,icon=t.user.profile_image_url;h+='<li class="twitEntry">';if(opts.text){var text=t.text.replace(/(https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/,function(u){var shortUrl=(u.length>30)?u.substr(0,30)+'...':u;return'<a href="'+u+'">'+shortUrl+'</a>';}).replace(/@([a-zA-Z0-9_]+)/g,'@<a href="http://twitter.com/$1">$1</a>').replace(/(?:^|\s)#([^\s\.\+:!]+)/g,function(a,u){return' <a href="http://twitter.com/search?q='+encodeURIComponent(u)+'">#'+u+'</a>';});h+=' <span>'+text+'</span>';}
h+='</li>';}
if(o.length>end){h+='<li class="twitNavi">'+'<a href="#" class="twitEntryShow">more</a>  / ';if(o.length>opts.limit)
h+='<a href="#" class="twitEntryShow twitEntryAll">all</a>';h+='</li>';}
return h;};})(jQuery);
</script>

<script type="text/javascript">

/**Code to fetch and display the tweets and profile information on the page**/

$(function()
{
 $('#uname').focus();
 function populate(){
  twitterusername = $('#uname').val();
  if(twitterusername != ''){
   $('#tweet_btn').attr('value','Please wait...');
   $('#timeline').twit(twitterusername); //Call the Twit plugin to fetch recent tweets
   $('#timeline').hide();
   $.getJSON('http://twitter.com/users/'+twitterusername+'.json?callback=?', //Retrieve user data from Twitter using the JSON
   function(data){
 /**Display the user data**/
    $('#tweet_btn').attr('value','Get Profile');
    $('.main').css({'background-image':'url('+data.profile_background_image_url+')'});
    $('#twit_uname').text(data.screen_name);
    $('#twit_loc').text(data.location);
    $('#twit_frnd').text(data.friends_count);
    $('#twit_url').text(data.url);
    $('#twit_created').text(data.created_at);
    $('#twit_name').text(data.name);
    $('#twit_flwr').text(data.followers_count);
    $('ul').css({'color':'#'+data.profile_text_color});
    $('#timeline').show();
    $('div#infodiv').show();
   });
  }
 }
 $('#tweet_btn').click(function(){
  populate();
 });
 $('#twitform').submit(function(){
  populate();
 });
})
</script>

CSS Code:

/**CSS Code to beautify our extension**/
body{
 font-size:10px;
 overflow-x:hidden;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
 text-shadow:1px 1px 0 white;
}
div#infodiv{display:none;}
ul#info{padding:10px;margin:0;}
ul#info li{
 border-bottom:1px dashed #666666;
 margin-bottom:10px;
 list-style-type:none;
}
div.main{
 margin:auto;
 border:1px solid #CC0;
 float:none;
 width:520px;
 padding:10px;
 font-family:Verdana, Geneva, sans-serif;
 color:#03497e;
}
a{
 color:#336633;
 text-decoration:none;
 font:italic 1em Georgia, Times, serif;
}
h2{
 background-color: #FFFFFF;
 color:#33CCFF;
 font-size:12px;
 padding:5px 0 5px 5px;
 width:100%;
}
#tweet_btn{
 background-color:#cbf2ff;
 border:1px solid #33CCFF;
 color:#336633;
 font-weight:bold;
 -webkit-border-radius:4px;
}
#uname{
 background-color:#BDD7E3;
 border:1px solid #33CCFF;
 color:#0596D5;
 margin-right:10px;
}

/** Twit **/
.twit{
 background-color: #cbf2ff;
 padding: 7px;
 display:none;
}
.twitHeader {
  background-color: #fff;
  margin: 0;
  padding: 7px 7px 0 7px;
}
.twitLabel {
  font-weight: bold;
  font-size: 22px;
  color: #33ccff;
}
.twitTitle {
  font-weight: bold;
}
.twitUser {
  background-color: #fff;
  border-bottom: none;
  font-size:160%;
  padding: 7px;
}
.twitUser a{
  color:#222;
  font-weight:bold;
  text-decoration: none;
}
.twitBody {
  background-color: #ffffff;
  padding: 0 7px 7px 7px;
  margin: 0;
  list-style: none;
}
.twitEntry {
  padding: 6px 8px;
  margin: 0;
  border-bottom: dashed 1px #ccc;
  height: auto !important;
}
.twitNavi {
  clear: both;
  text-align: center;
  margin-top: 0;
  padding: 5px;
  background-color: #ffffff;
}

And now we are done with our first Google Chrome extension!

LinkedIn like news Gallery using jQuery & CSS

2011-06-25T02:09:00.000-07:00

The most popular professional social network has recently done a lot of design changes in its site. And the site has gone really awesome. I really many of their new design features. Their news gallery on home page attracted my mind towards it and I decided to create it for my readers. So here is LinkedIn style news gallery.... See it working!

Live Demo Download Script

HTML Markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Webspeaks.in | Linkein like news gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="gallery">
 <h2>LinkedIn Today</h2>
 <ul>
  <li>
   <a href="http://www.webspeaks.in/2011/06/live-background-change-using-jquery.html" target="_blank">
    <p class="hd">Live background Change using jQuery</p>
    <p class="link">via webspeaks.in</p>
    <p class="img"><img src="http://1.bp.blogspot.com/-vxjOxEP6LB0/Te-8csJeSCI/AAAAAAAAAI0/TdlvX8z-wpE/s400/Webspeaks.in+-+Live+background+change+with+jQuery+2011-06-08+23-45-50.png" /></p>
   </a>
  </li>
  <li>
   <a href="http://www.webspeaks.in/2011/03/creating-stylish-graphs-with-php-yahoo.html" target="_blank">
    <p class="hd">Creating Stylish Graphs with PHP & Yahoo Charts</p>
    <p class="link">via webspeaks.in</p>
    <p class="img"><img src="https://lh4.googleusercontent.com/-RLDr7UzMvLc/TXi1TBe_mOI/AAAAAAAAAIU/O3k4CDJ9qpE/s400/y.PNG" /></p>
   </a>
  </li>
  <li>
   <a href="http://www.webspeaks.in/2011/03/in-place-form-editing-using-jquery.html" target="_blank">
    <p class="hd">In-Place Form Editing using jQuery</p>
    <p class="link">via webspeaks.in</p>
    <p class="img"><img src="https://lh4.googleusercontent.com/-HOPYmUk-cCM/TW_TspwS9QI/AAAAAAAAAIA/XMdLUFlPRdw/s400/formEdit.PNG" /></p>
   </a>
  </li>
  <li class="continue">
   <a href="http://webspeaks.in">»</a>
  </li>
 </ul>
<div>

</body>
</html>

jQuery Code:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#gallery ul li').hover(function(){
  $(this).find('p.img').animate({'marginTop':'20px'}, 'fast');
  $(this).find('p.hd').css({'color':'#069'});
 }, function(){
  $(this).find('p.img').animate({'marginTop':'-17px'}, 'fast');
  $(this).find('p.hd').css({'color':'#333'});
 });
});
</script>

CSS Code:

body{
 font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif;
}
#gallery h2{
 font-size:13px;
 font-weight:bold;
 margin-bottom:5px;
}
#gallery ul {
 list-style: none outside none; 
 overflow:hidden; 
 cursor:pointer; 
 width:666px; 
 border-top:2px solid #ededed;
 padding: 0;
 margin-top:0;
}
ul li{ 
 float:left; 
 padding:0 20px 0 0; 
 overflow:hidden;
 max-height:165px;
 _height:165px;
}
#gallery a{ color:#333; text-decoration:none;}
#gallery li p.hd{
 color:#333;
 display: block;
 font-size: 12px;
 max-height: 42px;
 min-height: 24px;
 _height: 42px;
 overflow: hidden;
 padding: 1px;
 width: 174px;
 height:28px;
}
#gallery li p.link
{
 margin:0;
 padding:0;
 color:#333;
 font-size: 11px;
 height: 13px;
 line-height: 13px;
 text-decoration:none;
 padding-left:3px;
}
#gallery li p.img{overflow:hidden; margin-top:-17px;}
#gallery li p.img img{ 
 height:109px; 
 width:176px; 
 border:1px solid #DEDEDE; 
 padding:2px; 
 overflow:hidden;
}
#gallery li.continue{
 margin-right: 0;
 width: auto;
 _display: inline;
 float: left;
 padding: 10px 0;
 position: relative;
 vertical-align: baseline;
}
#gallery li.continue a{
 color: #069;
 font-size: 40px;
 line-height: 142px;
}

Live background Change using jQuery

2011-06-08T11:18:00.000-07:00

jQuery can be extremely useful for you if you want to beautify your web app. jQuery provide a number of simple ways to dynamically change the design of your web page. Here is a simple script that shows how to change the background image of your web page using jQuery.

Live Demo Download Script

HTML Markup:

<html>
<head>
<title>Webspeaks.in | Live background change with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="main">
 <div class="text"><a href="#">Live background change using jQuery <span class="small">by</span> <span class="title">Webspeaks.in</span></a></div>
 <div>
  <ul class="menu">
   <li><img src="1.gif" /></li>
   <li><img src="2.jpg" /></li>
   <li><img src="3.png" /></li>
   <li><img src="4.jpg" /></li>
   <li><img src="5.png" /></li>
   <li><img src="6.jpg" /></li>
  </ul>
 </div>
</div>
</body>
</html>

jQuery Code:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
 $('ul.menu').find('img').fadeTo('slow', 1);
 $('ul.menu').find('img').hover(function(){
  $(this).fadeTo('fast', 0.7);
  $('body').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
 }, function(){
  $(this).fadeTo('slow', 1);
 });
});
</script>

CSS Code:

body{background-color:#CCCCCC;}
#main{margin:0; position:absolute; width:100%; text-align:center;bottom:100px;}
ul.menu{list-style-type:none;}
ul.menu li{ display:inline;}
img{height:90px; width:105px; border:5px solid #333333; padding:2px;-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 cursor:pointer;
 margin:5px;
}
img:hover{border-color:#990099;}
.text a{background-color:#33CCCC; color:#FFFFFF; font-size:20px; font-weight:bold;
 font-family:Georgia, "Times New Roman", Times, serif; height:40px; line-height:40px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
 margin:10px;
 padding:10px;
 text-decoration:none;
}
.text .small{ font-size:16px;}
.text .title{ color:#993366;}

Customize 'New Order' Email template in Magento

2011-06-04T09:42:00.000-07:00

Customizing the 'New Order Confirmation Email' template in Magento may be a havoc for the first time if you do not know the write way. But it is as easy as anything. Recently I needed to customize the item information in the 'New Order Confirmation Email'. I googled a number of links but found nothing useful. Then I decided to find my own way, and after 2 hours of hard work I found a simple way. Here are the steps to customize the email template:

1. In the Magento Admin panel go to 'System > Transactional Emails' and click on 'Add New Template'.
2. In the 'Load default template' container select 'New Order' in the 'Template' dropdown. Alse select our desired 'Locale'.
3. Click on 'Load Template'. It will load the Default email template to edit for you. Now you can edit the 'Template Subject' and 'Template Content' to suit your needs. See the following screenshot:

Here we want to edit the item information in the order email. The email template calls a layout file as:

{{layout handle="sales_email_order_items" order=$order}}

for the item information. So we will replace this line so that we can call our own custom template in place of the default layout file.
Replace

{{layout handle="sales_email_order_items" order=$order}}

with

{{block type='core/template' area='frontend' template='<module_name>/orderemail.phtml' order=$order}}

where template='<module_name>/orderemail.phtml' tells Magento the path of template file to be called. We have also passed order variable in the call as order=$order, so the $order variable is available to us in the template file that holds the current order information.
Save the template.

4. Now create orderemail.phtml in the template directory of your custom module.
Full file path: app\design\frontend\default\default\template\<module_name>\orderemail.phtml
In this template file we have $order available to user. You can access the order id from $order variable as:

$order_id = $this->getData('order')->getRealOrderId();

Now you can access all order information here and write your custom HTML format to be shown in the email. You can change the way the item information is shown or add more item information in the email template.

5. Now in Magento Admin panel go to 'System > Configuration > Sales Emails'. In the 'Order' tab select your newly created template in the 'New Order Confirmation Template' dropdown. Save the options.

And you are ready to send the customized email template!!!

Learn FILTERS in PHP for Best Security Performance

2011-04-11T22:48:00.000-07:00

Today we will learn about a less used but powerful feature of PHP: the FILTERS. This extension filters data by either validating or sanitizing it. This is especially useful when the data source contains unknown (or foreign) data, like user supplied input. For example, this data may come from an HTML form.
There are two main types of filtering: validation and sanitization.
Validation is used to validate or check if the data meets certain qualifications. For example, passing in FILTER_VALIDATE_EMAIL will determine if the data is a valid email address, but will not change the data itself.
Sanitization will sanitize the data, so it may alter it by removing undesired characters. For example, passing in FILTER_SANITIZE_EMAIL will remove characters that are inappropriate for an email address to contain. That said, it does not validate the data.

Source: PHP.net

Note: FILTER is available only in PHP version 5.2 or later.

Types of filters:

Validate filters
Sanitize filters
Other filters
Filter flags

Validate Filters:
FILTER_VALIDATE_BOOLEAN: Returns TRUE for "1", "true", "on" and "yes". Returns FALSE otherwise.
FILTER_VALIDATE_EMAIL: Validates value as e-mail.
FILTER_VALIDATE_FLOAT: Validates value as float.
FILTER_VALIDATE_INT: Validates value as integer, optionally from the specified range.
FILTER_VALIDATE_IP: Validates value as IP address, optionally only IPv4 or IPv6 or not from private or reserved ranges.
FILTER_VALIDATE_REGEXP: Validates value against regexp, a Perl-compatible regular expression.
FILTER_VALIDATE_URL: Validates value as URL.

Examples:
Validating Email address:

<?php
$email_a = 'foo@foo.com';
$email_b = 'invalid@email';

if (filter_var($email_a, FILTER_VALIDATE_EMAIL)) {
echo "This ($email_a) email address is valid.";
}else{
echo "This ($email_a) email address is invalid.";
}
if (filter_var($email_b, FILTER_VALIDATE_EMAIL)) {
echo "This ($email_b) email address is valid.";
}else{
echo "This ($email_b) email address is invalid.";
}

//Output
This (foo@foo.com) email address is valid.
This (invalid@email) email address is invalid.
?>

Validating IP address:

<?php
$ip_a = '127.0.0.1';
$ip_b = '52.69';

if (filter_var($ip_a, FILTER_VALIDATE_IP)) {
echo "This ($ip_a) IP address is valid.";
}else{
echo "This ($ip_a) IP address is invalid.";
}
if (filter_var($ip_b, FILTER_VALIDATE_IP)) {
echo "This ($ip_b) IP address is valid.";
}else{
echo "This ($ip_b) IP address is invalid.";
}

//Output:
This (127.0.0.1) IP address is valid.
This (52.69) IP address is invalid.
?>

Sanitize filters:
FILTER_SANITIZE_EMAIL: Remove all characters except letters, digits and !#$%&'*+-/=?^_`{|}~@.[].
FILTER_SANITIZE_ENCODED: URL-encode string, optionally strip or encode special characters.
FILTER_SANITIZE_MAGIC_QUOTES: Apply addslashes().
FILTER_SANITIZE_NUMBER_FLOAT: Remove all characters except digits, +- and optionally .,eE.
FILTER_SANITIZE_NUMBER_INT: Remove all characters except digits, plus and minus sign.
FILTER_SANITIZE_SPECIAL_CHARS: HTML-escape '"<>& and characters with ASCII value less than 32, optionally strip or encode other special characters.
FILTER_SANITIZE_STRING: Strip tags, optionally strip or encode special characters.
FILTER_SANITIZE_STRIPPED: Alias of "FILTER_SANITIZE_STRING" filter.
FILTER_SANITIZE_URL: Remove all characters except letters, digits and $-_.+!*'(),{}|\\^~[]`<>#%";/?:@&=.
FILTER_UNSAFE_RAW: Do nothing, optionally strip or encode special characters.

Examples:

<?php
$invalid_email = "(corrupted@-foo dot com)";

if ( !filter_var($sanitized_email, FILTER_VALIDATE_EMAIL) ) {
$sanitized_email = filter_var($invalid_email, FILTER_SANITIZE_EMAIL);
echo "This ($invalid_email) email address is invalid.\n";
echo "Sanitized  Email is:  $sanitized_email\n";    
}

//Output:
This ((corrupted@-foo dot com)) email address is invalid.
Sanitized  Email is:  corrupted@foo.com
?>

Filtering GET & POST Variables:
The filter_input() function gets a specific external variable by name and optionally filters it.
Usage:

mixed filter_input ( int $type , string $variable_name [, int $filter = FILTER_DEFAULT [, mixed $options ]] )

Parameters:
type: One of INPUT_GET, INPUT_POST, INPUT_COOKIE, INPUT_SERVER, or INPUT_ENV.
variable_name: Name of a variable to get.
filter: The ID of the filter to apply. The Types of filters manual page lists the available filters.
options: Associative array of options or bitwise disjunction of flags. If filter accepts options, flags can be provided in "flags" field of array.

Return Values: Value of the requested variable on success, FALSE if the filter fails, or NULL if the variable_name variable is not set. If the flag FILTER_NULL_ON_FAILURE is used, it returns FALSE if the variable is not set and NULL if the filter fails.

Example:

<?php
$search_html = filter_input(INPUT_GET, 'search', FILTER_SANITIZE_SPECIAL_CHARS);
$search_url = filter_input(INPUT_GET, 'search', FILTER_SANITIZE_ENCODED);
echo "You have searched for $search_html.\n";
echo "<a href='?search=$search_url'>Search again.</a>";
?>

Override Controllers in Magento

2011-03-31T10:50:00.000-07:00

While working in Magento you may sometimes run into situations where you would like to override the functionality of the Magento core controllers. But you cannot edit the core controllers of Magento as it will hinder you from upgrading your Magento version. So we have to find a simple solution for that. Don't worry, today we will see how to override Magento core controllers.
For this, you have to create a custom module. If you do not know how to create a custom module, then read this post.
Now suppose we want to override the checkout/cart controller. To do this, we will have to edit just two files in our custom module.
Suppose our custom module is present in the namespace 'Company' and our module is named as 'Web'.

Step 1:
Open the app\code\local\Company\Web\etc\config.xml and edit it as follows:
The name of the core module to be overridden is written in between the router tags. Here we want to override the checkout module so checkout is to be wrapped in <routers> tags.
After that we will tell Magento to call our custom module before the Mage/Checkout module

<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
  <Company_Web>
    <version>0.0.1</version>
  </Company_Web>
</modules>
<frontend>
  <routers>
    <checkout><!-- Name of core module to be overridden  -->
      <args>
        <modules>
          <Company_Web before="Mage_Checkout">Company_Web</Company_Web><!-- Tell Magento to call our custom module before the Mage/Checkout module -->
        </modules>
      </args>
    </checkout>
  </routers>
</frontend>
</config>

Step 2:
Now create the controller file to be overridden, CartController.php in our case. (app\code\local\Company\Web\controllers\CartController.php)

<?php
/**
 * Magento
 *
 * Override Mage_Checkout_Cart controller
 */


/**
 * IMPORTANT
 * Include the core file to be overridden
 */
require_once("Mage/Checkout/controllers/CartController.php");

/**
 * IMPORTANT
 * Extend the core controller in our custom controller.
 */
class Company_Web_CartController extends Mage_Checkout_CartController
{
    /**
     * Get current active quote instance
     *
     * @return Mage_Sales_Model_Quote
     */
    public function indexAction()
    {
        echo "This controller has been overridden.";
    }
}

And you are done now. Override what you want:)

Implementing Moneybookers Payment Gateway with PHP

2011-03-30T00:26:00.000-07:00

Today we will integrate a Payment gateway in our website. We are going to implement Moneybookers Payment Gateway. Moneybookers provide an easily customizable payment gateway that can be implemented without much headache. You just need to create two accounts on Moneybookers, one for the Merchant and other for the Buyer. Then send a request to Moneybookers to convert these accounts into test accounts (for testing purpose). This is a manual process as Moneybookers provide no sandbox account like PayPal for the developers. After your account has been approved as test account, you can start using it for transactions.
Moneybookers payment gateway gives you two options for the payment, either you can transfer the buyer to Moneybookers payment page or you can embed the iframe into your own page which looks more elegant. Here we will be following the second one i.e the iframe.

Database structure:
Create table 'payment_details' as:

CREATE TABLE `payment_status` (
  `order_id` int(11) NOT NULL AUTO_INCREMENT,
  `transaction_id` varchar(255) DEFAULT NULL,
  `amount` float(10,2) DEFAULT NULL,
  `status` int(1) DEFAULT NULL,
  `payment_type` varchar(20) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `username` varbinary(255) DEFAULT NULL,
  PRIMARY KEY (`order_id`)
)

Create the payment page:
We will include our payment form inthis page using an iframe. This is simple and doesn't need anything special. We will pass the necessary information with the URL of the iframe as:

<iframe src="http://yoursite.com/payment-form?email=<?php echo $email ?>&fname=<?php echo $FirstName ?>&lname=<?php echo $LastName ?>&address=<?php echo $Address ?>&address2=<?php echo $Address2 ?>&city=<?php echo $City ?>&postal_code=<?php echo $PostalCode ?>&country=<?php echo $CountryId ?>&state=<?php echo $State ?>" name="payment" height="600" width="610" border="0">
 </iframe>

Create the payment form:
Payment page starts with a form with a number of hidden fields for the payment process. We will autosubnit this form to proceed to the next step of payment.

<html>
<head>
<title>MoneyBookers by WebSpeaks.in</title>
</head>
<body>
<?php
$email = $_GET['email'];
$fname = $_GET['fname'];
$lname = $_GET['lname'];
$address = $_GET['address'];
$address = $_GET['address'];
$address2 = $_GET['address2'];
$city = $_GET['city'];
$postal_code = $_GET['postal_code'];
$country = $_GET['country'];
$state = $_GET['state'];

$price = 10;
?>
<form action="https://www.moneybookers.com/app/payment.pl" target="_self" name="payment_form">

 <input type="hidden" name="pay_to_email" value="your_merchant_email"> 
 <input type="hidden" name="pay_from_email" value="<?php echo $email ?>">
 <input type="hidden" name="return_url" value="http://yoursite.com/payment_success.php"> <!-- URL to redirect after payment success -->
 <input type="hidden" name="cancel_url" value="http://yoursite.com/payment_cancel.php">  <!-- URL to redirect after payment cancel -->
 <input type="hidden" name="status_url" value="http://yoursite.com/payment_status.php"> <!-- URL to get the payment response (not visible to user, called on backend) -->
 <input type="hidden" name="language" value="EN"> <!-- Language of payment -->

 <input type="hidden" name="hide_login" value="1">  <!-- Whether to show the tiny login form with the payment form, no in our case -->

 <!-- Specifies a target in which the return_url value will be called upon successful payment from customer.  -->
 <!-- 1 = '_top', 2 = '_parent', 3 = '_self', 4= '_blank' -->
 <input type="hidden" name="return_url_target" value="1">  
 <input type="hidden" name="cancel_url_target" value="1"> 

 <!-- Custom fields for your own needs -->
 <input type="hidden" name="merchant_fields" value="name, username, order_amount, user_id"> <!-- List all your custom fields here (comma separated, max 5)-->
 <input type="hidden" name="name" value="<?php echo $fname. ' '.$lname ?>"> <!-- Value of Custom 'name' -->
 <input type="hidden" name="username" value="<?php echo $username ?>">  <!-- Value of Custom 'username' -->
 <input type="hidden" name="order_amount" value="<?php echo $price ?>"> <!-- Value of Custom 'order_amount' -->
 <input type="hidden" name="user_id" value="<?php echo $user_id ?>">  <!-- Value of Custom 'user_id' -->

 <input type="hidden" name="amount_description" value="Testing Amount">  <!-- Description of the amount -->
 <input type="hidden" name="amount" value="<?php echo $price ?>">  <!-- Amount to be charged -->
 <input type="hidden" name="currency" value="GBP">   <!-- Currency of payment -->
 <input type="hidden" name="firstname" value="<?php echo $fname ?>">   <!-- Firstname of buyer, need for autofilling -->
 <input type="hidden" name="lastname" value="<?php echo $lname ?>">    <!-- Lastname of buyer, need for autofilling -->
 <input type="hidden" name="email" value="<?php echo $email ?>">    <!-- Email of buyer, need for autofilling -->
 <input type="hidden" name="address" value="<?php echo $address ?>">     <!-- Address of buyer, need for autofilling -->
 <input type="hidden" name="city" value="<?php echo $city ?>">     <!-- City of buyer, need for autofilling -->
 <input type="hidden" name="state" value="<?php echo $state ?>">     <!-- State of buyer, need for autofilling -->
 <input type="hidden" name="postal_code" value="<?php echo $postal_code ?>">     <!-- Postal_code of buyer, need for autofilling -->
 <input type="hidden" name="country" value="<?php echo $country ?>">     <!-- Country code of buyer, need for autofilling -->
 <input type="hidden" name="detail1_description" value="New Product">      <!-- Description heading of the payyment, shown after payment has been made -->
 <input type="hidden" name="detail1_text" value="<?php echo $product ?>">      <!-- Detailed description of the payment, shown after payment has been made -->
 <input type="hidden" name="confirmation_note" value="Thanks for purchasing Voodoo Video!"> <!-- Confirmation message to be shown after payment has been made --> 

 <p>
  <input type="submit" class="submitBtn

Receive Payment Status:
In the payment form we have specified the 'status_url' field. This field specifies the URL on which the Moneybookers sends the status of the payment. It is URL to which the transaction details will be posted after the payment process is complete. Alternatively, you may specify an email address to which you would like to receive the results. If the status_url is omitted, no transaction details will be sent to the Merchant.
Detailed status description
‘2’ Processed – This status is sent when the transaction is processed and the funds have been received on your Moneybookers account.
‘0’ Pending – This status is sent when the customers pays via the pending bank transfer option. Such transactions will auto-process IF the bank transfer is received by Moneybookers. We strongly recommend that you do NOT process the order/transaction in your system upon receipt of a pending status from Moneybookers.
‘-1’ Cancelled – Pending transactions can either be cancelled manually by the sender in their online account history or they will auto-cancel after 14 days if still pending. ‘-2’ Failed – This status is sent when the customer tries to pay via Credit Card or Direct debit but our provider declines the transaction. If you do not accept Credit Card or Direct debit payments via Moneybookers (see page 16) then you will never receive the failed status.
‘-3’ Chargeback – This status could be received only if your account is configured to receive chargebacks. If this is the case, whenever a chargeback is received by Moneybookers, a -3 status will be posted on the status_url for the reversed transaction.

Create payment_status.php as:

$status = $_POST['status']/*Status of transaction*/
$username = $_POST['username'];/*Custom field*/
$user_id = $_POST['user_id'];/*Custom field*/
$amount = $_POST['amount'];/*Amount of transaction*/
$payment_type = $_POST['payment_type'];/*Type of Payment*/
$mb_transaction_id = $_POST['mb_transaction_id'];/*Moneybookers transaction id*/

/*save transaction details in database*/
mysql_query("INSERT INTO `payment_details` (`transaction_id`, `amount`, `status`, `payment_type`, `user_id`, `username`) VALUES ('".$mb_transaction_id."', '".$amount."', '".$status."', '".$payment_type."', '".$user_id."', '".$username."') ");

Payment Success Page:
Create payment_success.php as

<?php
echo "Your payment has been received. Thanks for purchasing our product.";
?>

Payment Cancel Page:
Create payment_cancel.php as

<?php
echo "Your payment has been cancelled. Please try again.";
?>

Update: Magento Frontend/Backend Modules Updated

2011-03-29T10:12:00.000-07:00

On Request of my readers, I have uploaded the working examples of Magento frontend and backend modules. Also the previous tutorials of module creation have been modified to resolve problems.

Download links:

Download Magento Module

Download Magento Backend Module

Now you can watch the upgraded modules on:

Create Your First Magento Module

Create Your First Admin (Backend) Module in Magento

Create Admin (Backend) Module in Magento with Grids