Generate Facebook ID Card with PHP

You may have came across some some horoscope or fun images of your friends, aren't they just fun? well, why not create some fun page like that on your website to allow your visitors to generate a Facebook ID card, which they can save on their computer or publish on Facebook wall. Let's focus on creating some authentic looking "Facebook ID" for the users using PHP and PHP Facebook SDK. facebook-id We will be merging image files and writing text on Facebook ID card, so make sure GD is properly working. I have included PHP Facebook SDK and free font DidactGothic.ttf by Daniel Johnson in downloadable sample file below.

Facebook SDK

We start by including Facebook PHP SDK file in our PHP file, and then writing basic code blocks, which will connect to Facebook and fetch appropriate user data for us to continue further. Everything takes place in just one PHP file here, here's a look at our initial PHP code for Facebook SDK:
PHP
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
//include facebook SDK include_once("inc/facebook.php"); //New Facebook object with your app id and app secret $facebook = new Facebook(array( 'appId' => $appId, 'secret' => $appSecret, )); //get facebook user $fbuser = $facebook->getUser(); if(!$fbuser) //if user is null { //show login button } else { //do stuff like merging image and }
Basically the user gets redirected to Facebook for authentication, and then user grants permissions to share data to your application, only then we can proceed generating their Facebook ID card.

Generating ID card

Once user returns back to page after the authentication, we copy user profile image to local server using PHP copy() function, and then we need to merge profile image with blank ID card image template, and write user name, birthday, hometown to the image using TrueType fonts.
PHP
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
//copy facebook image to local folder copy('http://graph.facebook.com/USER_ID/picture?width=100&height=100','Local_folder/USER_ID.jpg'); //merge two images (profile picture on id card image template) imagecopymerge($dest, $src, 320, 32, 0, 0, 100, 100, 100); //write on merged image using a font imagettftext($dest, 10, 0, 170, 190, 'color' , 'DidactGothic.ttf', 'Text to write');

Finishing

Below you'll find entire PHP code that generates Facebook ID card. The comment lines should make things easy for you to understand, you can also download the sample files and create your own version of ID card.
PHP
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
######### edit details ########## $appId = 'xxxxxxxxxxx'; //Facebook App ID $appSecret = 'xxxxxxxxxxxxxxxxxxxxxxxx'; // Facebook App Secret $return_url = 'http://www.sitename.com/get_fb_id/'; //return url (url to script) $temp_folder = 'tmp/'; //temp dir path to store images $fbPermissions = 'publish_stream,user_hometown,user_birthday'; //Required facebook permissions $image_id_png = 'assets/id.png'; // id card image template path $font = 'assets/fonts/DidactGothic.ttf'; //font used ################################# // make sure curl is enabled and working if (!in_array ('curl', get_loaded_extensions())){die('curl required!');} //include facebook SDK include_once("inc/facebook.php"); //Facebook API $facebook = new Facebook(array( 'appId' => $appId, 'secret' => $appSecret, )); if(isset($_GET["logout"]) && $_GET["logout"]==1) { //Destroy the current session and logout user $facebook->destroySession(); header('Location: '.$return_url); } //get currently logged-in Facebook user details $fbuser = $facebook->getUser(); if(!$fbuser) { //new users get to see this login button $loginUrl = $facebook->getLoginUrl(array('scope' => $fbPermissions,'redirect_uri'=>$return_url)); echo '<div style="margin:20px;text-align:center;"><a href="'.$loginUrl.'"><img src="assets/facebook-login.png" /></a></div>'; } else { //get user profile try { $user_profile = $facebook->api('/me'); //list of user granted permissions $user_permissions = $facebook->api("/me/permissions"); } catch (FacebookApiException $e) { echo $e; $fbuser = null; } //login url $loginUrl = $facebook->getLoginUrl(array('scope' => $fbPermissions,'redirect_uri'=>$return_url)); // permission required to proceed $permissions_needed = explode(',',$fbPermissions); //loop thrugh each permission foreach($permissions_needed as $per) { //if more permission needed show login link if (!array_key_exists($per, $user_permissions['data'][0])) { die('<div>We need additional '.$per.' permission to continue, <a href="'.$loginUrl.'">click here</a>!</div>'); } } //display logout url echo '<div>'.$user_profile["name"].' [<a href="?logout=1">Log Out</a>]</div>'; ###### start generating ID ########## //copy user profile image from facebook in temp folder if(!copy('http://graph.facebook.com/'.$fbuser.'/picture?width=100&height=100',$temp_folder.$fbuser.'.jpg')) { die('Could not copy image!'); } ##### start generating Facebook ID ######## $dest = imagecreatefrompng($image_id_png); // source id card image template $src = imagecreatefromjpeg($temp_folder.$fbuser.'.jpg'); //facebook user image stored in our temp folder imagealphablending($dest, false); imagesavealpha($dest, true); //merge user picture with id card image template //need to play with numbers here to get alignment right imagecopymerge($dest, $src, 320, 32, 0, 0, 100, 100, 100); //colors we use for font $facebook_blue = imagecolorallocate($dest, 81, 103, 147); // Create blue color $facebook_grey = imagecolorallocate($dest, 74, 74, 74); // Create grey color //Texts to embed into id card image template $txt_user_id = $fbuser; $txt_user_name = isset($user_profile['name'])?$user_profile['name']:'No Name'; $txt_user_gender = isset($user_profile['gender'])?$user_profile['gender']:'No gender'; $txt_user_hometown = isset($user_profile['hometown'])?$user_profile['hometown']['name']:'Unknown'; $txt_user_birth = isset($user_profile['birthday'])?$user_profile['birthday']:'00/00/0000'; $user_text = 'Your source for Google+ and hangout graphics for free.'; $txt_credit = 'Generated using www.saaraan.com'; //format birthday, not showing whole birth date! $fb_birthdate = date($txt_user_birth); $sort_birthdate = strtotime($fb_birthdate); $for_birthdate = date('d M', $sort_birthdate); imagealphablending($dest, true); //bring back alpha blending for transperent font imagettftext($dest, 10, 0, 170, 190, $facebook_grey , $font, $txt_user_id); //Write user id to id card imagettftext($dest, 15, 0, 25, 105, $facebook_grey, $font, $txt_user_name); //Write name to id card imagettftext($dest, 15, 0, 25, 147, $facebook_grey, $font, $txt_user_gender); //Write gender to id card imagettftext($dest, 15, 0, 170, 147, $facebook_grey, $font, $txt_user_hometown); //Write hometown to id card imagettftext($dest, 15, 0, 25, 190, $facebook_grey, $font, $for_birthdate); //Write birthday to id card imagettftext($dest, 10, 0, 25, 215, $facebook_grey, $font, $user_text); //Write custom text to id card imagettftext($dest, 8, 0, 25, 240, $facebook_blue, $font, $txt_credit); //Write credit link to id card imagepng($dest, $temp_folder.'id_'.$fbuser.'.jpg'); //save id card in temp folder //now we have generated ID card, we can display it on browser or post it on facebook echo '<img src="tmp/id_'.$fbuser.'.jpg" >'; //display saved id card /* or output image to browser directly header('Content-Type: image/png'); imagepng($dest); */ /* //Post ID card to User Wall $post_url = '/'.$fbuser.'/photos'; //posts message on page statues $msg_body = array( 'source'=>'@'.'tmp/id_'.$fbuser.'.jpg', 'message' => 'interesting ID'; ); $postResult = $facebook->api($post_url, 'post', $msg_body ); */ imagedestroy($dest); imagedestroy($src); }

Conclusion

This is just example of what else you can do to make fun pictures for your Facebook users, all you need is an idea! download sample file below and don't forget to checkout the working demo, please share you thoughts and feedback, good luck! Download Demo
New question is currently disabled!