Mar03

Creating Facebook ID Card with PHP Facebook SDK

14 Comments

You may have came across some images about horoscope or stats about profile visitors on friends wall, aren’t they just fun to read? Well, why not create something fun like that? may be a Facebook ID card? Today 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.

Initial Code

Everything takes place in just one PHP file here, as usual we will show a Facebook log-in button and the user data we fetch from Facebook will be used to create Facebook ID card for the user. Here’s a look at our initial PHP code for Facebook SDK:

 
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
}

Once we have the session, we can then we fetch Facebook User data:

 
1
2
3
4
5
     try {
        $user_profile = $facebook->api('/me');
      } catch (FacebookApiException $e) {
        $fbuser = null;
      }

Generating ID card

Now we copy user profile image to local server using PHP copy() function, merge profile image with ID card image template, and then we write text to the image using TrueType fonts.

 
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 make it more easier you can download entire file at the bottom of this article.

 
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
#################################


// check if curl is enabled
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 facebook user
$fbuser = $facebook->getUser();

//check user session
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 or post it on facebook
    echo '<img src="tmp/id_'.$fbuser.'.jpg" >'; //display saved user 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 demo, please share you thoughts also, good luck!
Download Demo

Related Articles:

Article by on March 3, 2013 Tagged under Tagged under , . If you like this article, please consider sharing it.

14 Thoughts

  1. Hello Saran,

    Thanks you for the wonderful script, Only Problem is that my Host do not have GD, can you change the code function form imagettftext() to imagestring() to Write text to the image.

  4. hello ser
    i have a problem
    when i click sign with facebook nothing happens
    please help me !

  5. Hello
    can you help me how to link submit button , past image to user wall i tried but i felt

    thanks for tutorial

  7. Hi
    I have uploaded all files and changed
    $appId = ‘yyyyyyyyyyyy’; //Facebook App ID
    $appSecret = ‘zzzzzzzzzzzzzzzzzzz’; // Facebook App Secret
    $return_url = ‘http://shobjanta.com/atheist/’; //return url (url to script)

    but its not working. What is the problem ? plz help me sir
    thanks

  8. Only issue I am having, is the fetched profile picture of user is sizing at 160px x 160px and ingnoring the size function in the script:

     
    1
    http://graph.facebook.com/'.$fbuser.'/picture?width=100&height=100

    we also have not changed size or image quality in:

     
    1
    imagecopymerge($dest, $src, 320, 32, 0, 0, 100, 100, 100);

    Any suggestion what is wrong ?

  9. Ok I seem to have figured that out, my issue now is in trying to upload the image. Using this code I get oauth exception, require active token.

    added to index.phpI did this.

    setFileUploadSupport(true);
    //Create an album
    $album_details = array(
    ‘message’=> ‘Album desc’,
    ‘name’=> ‘Album name’
    );
    $create_album = $facebook->api(‘/me/albums’, ‘post’, $album_details);

    //Get album ID of the album you’ve just created
    $album_uid = $create_album['id'];

    //Upload a photo to album of ID…
    $photo_details = array(
    ‘message’=> ‘Photo message’
    );
    $file=’tmp/id_’.$fbuser.’.jpg’; //Example image file
    $photo_details['image'] = ‘@’ . realpath($file);

    $upload_photo = $facebook->api(‘/’.$album_uid.’/photos’, ‘post’, $photo_details);
    ?>

    • I seem to have fixed this, works great ( had to add ,user_photos to $fbpermissions

      When logging out I am getting headers already sent error tho, maybe I need to force session to end.

Comments Are Closed!
Please start a new topic in discussion section, thanks!.