httpwwwbethedevcom
324329524619168
Loading...

Create Facebook Profile Picture Overlay App using Facebook PHP SDKv5

Facebook profile overlay app. It downloads current user's profile picture and paste an overlay image on it and presents an option to post to Facebook. Here i have used Facebook SDK v5 PHP for authentication and upload.

Guide:

Here you can download Source files from GitHub Download


Installation

Please modify facebook_start.php to add "app_id" "app_secret" the following lines in them:

$fb = new Facebook\Facebook(array(
    'app_id'                => 'YOUR_APP_ID',
    'app_secret'            => 'YOUR_APP_SECRET',
    'default_graph_version' => 'v2.3',
 'persistent_data_handler'=>'session',
    ));

Visit Facebook developers, Create a developer account and create new app. Facebook dashboard provides you App_Id and App_Secret.

Install Curl on Server


sudo apt-get install curl


Facebook Developer Dashboard Setup


After successful creation of new app.

1. Into the app Setting -> Basic.  fill 'Display Name', 'Namespace', 'App Domains' accordingly your app.

2. Click to Add Platform -> Website. Fill Site URL <<Place your APP URL>>

3. Facebook Login -> Setup 'Valid OAuth redirect URIs' , 'Deauthorize Callback URL' accordingly your app

Note :- You should apply for App review to publish app on public.


Call Back URL Setup

Please modify index.php to add 'callback_url' the following lines in them:
require( __DIR__.'/facebook_start.php' );
  $helper = $fb-&gt;getRedirectLoginHelper();
  $permissions = ['email', 'user_posts','publish_actions']; // optional
  $callback_url    = 'https://www.YOUR_DOMAIN.com/login.php';
  $loginUrl    = $helper-&gt;getLoginUrl($callback_url, $permissions);
  $bg_path = 'IMG_PATH';

Screenshots







I hope this guide useful to you. If you have any questions please post your comments below.

Thank you!

,
PHP 1540139424494926543

Post a Comment Default Comments Disqus Comments

  1. Hello Sivarajah Pranavan

    it really good tutorials ...for understand fb overlay image functionality

    i did everything what you write here

    but after clicking login to facebook , i got broker profile image....

    please solve my problem

    ReplyDelete
    Replies
    1. Thank you Arifen, Create "cache" and "cache/temp/" inside root folder

      Delete
    2. Thanks for your instruction ... what you told me on fb chat
      its really great absolutely appreciated ...

      Delete
  2. Hello,
    I tried your code , but it didn't change my profile picture instead it upload a image with overlay.

    ReplyDelete
  3. Replies
    1. I will try to provide video tutorial. Best regards!

      Delete
  4. Warning
    The redirect_uri URL is not supported


    what to do

    my redirect url :profile.cybroze.com

    ReplyDelete
    Replies
    1. First place your redirect url into Website on facebook developer then use it.

      Delete
  5. thanks for ur very great tut
    i met this error
    Facebook SDK returned an error: Failed to connect to graph.facebook.com port 443: Connection refused

    ReplyDelete
    Replies
    1. Have you created facebook app at https://developers.facebook.com
      or
      please make sure your hosted server does allow a connection to Facebook SDK!

      Delete
    2. thanks for help bro it work now :)

      Delete
  6. hello sir thanks for your script
    i have done all what you write .but at last it shows black blank instead of showing profile picture........how can i fix this problem. help me

    ReplyDelete
  7. i sir i have upload this script on server but after login its redirect to home page

    ReplyDelete

emo-but-icon

Home item

Follow by Email

Popular Posts

Random Posts