Sep26

Change Facebook Cover or Profile Pic with PHP

13 Comments

I have seen people making separate souvenir page on their websites, where they put some wonderful wallpapers, mini e-card or freewares, something to remember them by. But now times are changing with Facebook trend, so why not add some cool custom made Facebook cover images for your visitors? I am sure it will surely increase some visibility of your website on Facebook.

Few weeks ago someone sent me a mail asking if I could write a simple PHP script that will change Facebook profile cover or profile picture automatically using Facebook API. So, I explored possibilities in API References but there’s none, not yet! (let me know if they allow this in future) But later found out that with little trick Facebook cover or Profile image can be changed. The trick is to upload picture in user’s Facebook account and redirect user to his/her Facebook profile page, where s/he just has to click save changes button.

We will need Facebook Application ID and Secret, jQuery and Facebook PHP SDK files from Github.com (included in sample download file). I have created two PHP files, index.php and process.php. Index.php just lists the Facebook cover images, when user clicks on an image, it will redirect him to process.php page, and then user can decide if s/he wants to make image cover or profile pic.

Cover Pictures List

First page where user finds all the wonderful cover images, and clicks the one he likes for his/her Facebook profile. To make it little interesting I have also created a small css file, which is included in sample file, and included jQuery for the fade effects on the cover images. You can create a similar page with some images, each image linking to process.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Change Facebook Cover or Profile Pic with PHP Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
//Fade in/out effect for cover images using jquery
$(document).ready(function() {
    coverpics = $('.fbcovers img');
    $(coverpics).fadeTo("fast", 0.70);
    coverpics.mouseenter(OnEnter).mouseleave(OnLeave);
    function OnEnter(){$(this).fadeTo("fast", 1);}
    function OnLeave(){$(this).fadeTo("fast", 0.70);}
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center" class="fbpicwrapper">
<h1>Change Facebook Cover or Profile Pic with PHP</h1>
<div class="fbpic_desc">Please click on cover image you like the most for your profile!</div>
<ul class="fbcovers">
    <li><a href="process.php?pid=1"><img src="cover_pics/cover1.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=2"><img src="cover_pics/cover2.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=3"><img src="cover_pics/cover3.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=4"><img src="cover_pics/cover4.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=5"><img src="cover_pics/cover5.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=6"><img src="cover_pics/cover6.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=7"><img src="cover_pics/cover7.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=8"><img src="cover_pics/cover8.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=9"><img src="cover_pics/cover9.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=10"><img src="cover_pics/cover10.jpg" width="850" height="315" border="0" /></a></li>
    <li><a href="process.php?pid=11"><img src="cover_pics/cover11.jpg" width="850" height="315" border="0" /></a></li>
</ul>
</div>

</body>
</html>

Processing

This is main page which does the task of posting cover picture on user’s Facebook account. Once the image is posted, picture can be set as cover or profile picture.

Permissions: To post pictures to user’s wall, your application requires publish_stream permission, and to access user photos user_photos permission is required. Without these Facebook permissions, your application can not post or access user photos. So we make sure our application have appropriate Facebook permissions before trying to change user cover or profile picture.

 
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
<?php
include_once("inc/facebook.php"); //include facebook api library

######### edit details ##########
$appId = 'xxxxxxxxxxxxxxx'; //Facebook App ID
$appSecret = 'xxxxxxxxxxxxxxxxxxx'; // Facebook App Secret
$return_url = 'http://www.yoursite.com/script/process.php';  //return url (url to script)
$homeurl = 'http://www.yoursite.com/script/';  //return to home
$fbPermissions = 'publish_stream,user_photos';  //Facebook permissions to post photo on user wall.
##################################

$GetPicId = $_GET["pid"]; // Picture ID from Index page
$PicLocation ='';

/*
Users do not need to know original location of image.
I think it's better to get image location from database using ID.
for demo here i'am using PHP switch.
*/
switch($GetPicId)
{
    case 1:
        $PicLocation = 'cover_pics/cover1.jpg';
        break;
    case 2:
        $PicLocation = 'cover_pics/cover2.jpg';
        break;
    case 3:
        $PicLocation = 'cover_pics/cover3.jpg';
        break;
    case 4:
        $PicLocation = 'cover_pics/cover4.jpg';
        break;
    case 5:
        $PicLocation = 'cover_pics/cover5.jpg';
        break;
    case 6:
        $PicLocation = 'cover_pics/cover6.jpg';
        break;
    case 7:
        $PicLocation = 'cover_pics/cover7.jpg';
        break;
    case 8:
        $PicLocation = 'cover_pics/cover8.jpg';
        break;
    case 9:
        $PicLocation = 'cover_pics/cover9.jpg';
        break;
    case 10:
        $PicLocation = 'cover_pics/cover10.jpg';
        break;
    case 11:
        $PicLocation = 'cover_pics/cover11.jpg';
        break;
    default:
        header('Location: ' . $homeurl);
        break;
}

//Call Facebook API
$facebook = new Facebook(array(
  'appId'  => $appId,
  'secret' => $appSecret,
  'fileUpload' => true,
  'cookie' => true
));

//get user
$fbuser = $facebook->getUser();

//variables we are going to post to facebook
$msg_body = array(
'message' => 'I liked this pic from '. $homeurl .' it is perfect for my cover photo.',
'source' => '@'.realpath($PicLocation)
);

if ($fbuser){ //user is logged in to facebook, post our image
  try {
    $uploadPhoto = $facebook->api('/me/photos', 'post', $msg_body );
    $access_token = $facebook->getAccessToken();
  } catch (FacebookApiException $e) {
    echo $e->getMessage(); //output any error
  }
}else{
 $loginUrl = $facebook->getLoginUrl(array('scope'=>$fbPermissions,'return_url'=>$return_url));
 header('Location: ' . $loginUrl);
}

if($uploadPhoto)
{
    /*
    image is posted in user facebook account, but still we need to send user to facebook
    so s/he can set cover or profile picture!
    */

    //Get url of the picture just uploaded in user facebook account
    $jsonurl = "https://graph.facebook.com/".$uploadPhoto["id"]."&?access_token=".$access_token;
    $json = file_get_contents($jsonurl,0,null,null);
    $json_output = json_decode($json);

    /*
    We can not set facebook cover or profile picture automatically yet,
    So, the trick is to post picture into user facebook account first
    and then redirect them to a facebook profile page where they just have to click a button to set it.
    */
    echo '<html><head><title>Update Image</title>';
    echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />';
    echo '<link href="style.css" rel="stylesheet" type="text/css" />';
    echo '</head><body>';
    echo '<div align="center" class="fbpicwrapper">';
    echo '<h1>Image is sent to your facebook account!</h1>';
    echo '<div class="fbpic_desc">Click on desired button you want to do with this image!</div>';
    echo '<div class="option_img"><img src="'.$json_output->source.'" /></div>';

    /*
    Links (buttons) below will send user to facebook page,
    where they just need to crop or correct propertion of image and hit apply button.
    */
    echo '<a class="button" target="_blank" href="http://www.facebook.com/profile.php?preview_cover='.$uploadPhoto["id"].'">Make Your Profile Cover</a>';
    echo '<a class="button" target="_blank" href="http://www.facebook.com/photo.php?fbid='.$uploadPhoto["id"].'&type=1&makeprofile=1&makeuserprofile=1">Make Your Profile Picture</a>';
    echo '<a class="button" href="'.$homeurl.'">Back to main Page.</a>';
    echo '</div>';
    echo '</body></html>';
}

?>

Please checkout demo page and sample file, then you will have a clear idea about this tutorial. I hope this tutorial will help you achieve your result, Good luck!
Download Demo

Related Articles:

Article by on September 26, 2012 Tagged under Tagged under , . If you like this article, please consider sharing it.

13 Thoughts

  3. I have a problem here.. Your script only works if I host the cover images. How to works with blogspot hosted images? To save space, I want to host images on blogspot. Can I?

    Reply ↓

  6. I’m using this script with some twists. Works on Firefox. But I have a problem when testing it on Google Chrome. It shows “ERR_TOO_MANY_REDIRECTS” after user authorizing my application.

    Reply ↓

Leave a Comment

Get your comment picture from Gravatar.com.
Your email address will not be published. Required fields are marked *