Redirect back to my web page after posting an image to my wall

Question

I have a website with Facebook capabilities (Sending personal messages, posting to wall). I have a page with a form that posting an image to the users wall photos album.

My problem is that after posting the image (Posting the form) i'm redirected to this url: https://graph.facebook.com/'ALBUM_ID'/photos?access_token=AAAEzcP64ySABAA3YYxBzRlrtUn..............

And in the browser I see this: (I removed the numbers for security)

{
   "id": "ID NUMBER HERE", 
   "post_id": "POST ID NUMBER HERE"
}

How can I tell Facebook to redirct me back to my page.

My code is:

$app_id = APP_ID;
$app_secret = APP_SECRET;
$my_url = "MY_URL";
$page_id = "PAGE_ID"; // Set this to your APP_ID for Applications

$code = $_REQUEST["code"];

if(empty($code)) {
  // Get permission from the user to publish to their page. 
  $dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
    . $app_id . "&redirect_uri=" . urlencode($my_url)
    . "&scope=publish_stream,manage_pages";
  echo('<script>top.location.href="' . $dialog_url . '";</script>');
} else {

  // Get access token for the user, so we can GET /me/accounts
  $token_url = "https://graph.facebook.com/oauth/access_token?client_id="
      . $app_id . "&redirect_uri=" . urlencode($my_url)
      . "&client_secret=" . $app_secret
      . "&code=" . $code;
  $access_token = file_get_contents($token_url);

  $accounts_url = "https://graph.facebook.com/me/accounts?" . $access_token;
  $response = file_get_contents($accounts_url);

  // Parse the return value and get the array of accounts we have
  // access to. This is returned in the data[] array. 
  $resp_obj = json_decode($response,true);
  $accounts = $resp_obj['data'];



  // Find the access token for the page to which we want to post the video.
  foreach($accounts as $account) {
       if($account['id'] == $page_id) {
         $access_token = $account['access_token'];
         break;
       }
  }

  $ALBUM_ID = "ALBUM_ID";

      // Show photo upload form to user and post to the Graph URL
      $image_post = "https://graph.facebook.com/" . $ALBUM_ID . "/photos?"
      . "access_token=" .$access_token;

        $video_post = "https://graph-video.facebook.com/" . $page_id . "/videos?"
      . "title=testTitle" . "&description=testDescription"
      . "&access_token=". $access_token;

?>
  <table align="center">
             <tr>                                                                                                 
                 <td>

                     <?php
         echo '<html><body>';
         echo '<form enctype="multipart/form-data" action="'
         .image_post.' "method="POST">';
         echo 'Please choose a photo: ';
         echo '<input name="source" type="file"><br/>';
         echo 'Say something about this photo: <br/>';
         echo '<textarea id="fbText" name="message" 
             rows="4" cols="47">';
         echo '</textarea><br/><br/>';
         echo '<input type="submit" value="Upload"/><br/>';
         echo '</form>';
         echo '</body></html>';
      }
          ?>
                 </td>

             </tr>
  <?php

I've tried adding &redirect_uri=" . urlencode($my_url) to the $image_post but that didn't change anything in the behavior and redirected me to the same page without going back.

Thanks.

Have you tried a `header('Location: to_file.php');` somewhere? All I can think of, am not a pro but I do get by. — Funk Forty Niner, Jun 27 '12 at 17:14
I'm redirected to a graph.facebook.com URL so I cant add code to that page. — Alon Adler, Jun 27 '12 at 17:16
Try adding your redirect URL to the form as a hidden input field. If that doesn’t help, then I guess you have to upload the photo to _your_ server, and post it from there making a server-side API call. — CBroe, Jun 27 '12 at 17:16
_“I'm redirected to a graph.facebook.com URL”_ – you’re not _redirected_ there – you say yourself that that’s the address where the form data should be send by the browser. That’s something different than a _redirect_. — CBroe, Jun 27 '12 at 17:17
@CBroe I see, so how can send the form data to the Facebook URL without the `action=$image_post` tag ? — Alon Adler, Jun 27 '12 at 17:24
May be nothing or was left out, but you don't have a closing tag `?>` in your shown code. Just sayin' — Funk Forty Niner, Jun 27 '12 at 17:39

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You have 3 options as I see it:

1 . This only works if you don't care about the response coming back from facebook:

<iframe name="uploader" onLoad="locationChange(this)"></iframe>

<form method="POST" action="..." target="uploader">
...
</form>

funnction locationChange(ifrm) {
    console.log("iframe location has changed to: ", ifrm.src);
}

The problem with that is that if the upload fails you won't be aware, meaning that you can not differentiate between a successful upload and a failed one.
The reason you can not read the data from the iframe is that your page has a different domain than of the iframe, and browsers block communication in this case due to the same origin policy.

2 . Upload the image to your server and then from php upload the image to facebook.
You can use this: Upload Photo To Album with Facebook's Graph API.

3 . You can upload the image using ajax, there are some techniques, for example: Ajax Image Upload without Refreshing Page using Jquery.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 27 '12 at 19:07

Nitzan Tomer

155,636
47
315
299

Thanks (Toda raba :)) for the help, I think I will try the Ajax technique. I understand whats going on in the example, but I have another question, if you can please help: How, from the PHP file called in the Ajax request I can send both of the form fields (the `message` and `file`) to the Facebook URL ? I would get them by `$_FILES['source']` and `$_POST['message']`, but how will I transfer them to `https://graph.facebook.com/" . $ALBUM_ID . "/photos?" . "access_token=" .$access_token` ? Thanks ! – Alon Adler Jun 27 '12 at 22:07
And one last thing, In the Ajax example they initiate the form submit when the input file is being change. I would like to submit and initiate a request only when the user press the upload button, how can I do it (I prefer doing it with calling a javascript with onsubmit event, that will initiate an xmlhttprequest, is it possible ?) thanks again ! – Alon Adler Jun 27 '12 at 22:20
Instead of listening to the change even listen to another event in you dom, such as a button click ($("#button_id").bind("click", function...). You can use this ajax technique to post the image straight to facebook, no need to go through your server. – Nitzan Tomer Jun 28 '12 at 08:22
Thank you very much for all the help, Eventually I've made an invisible `iframe` post. It seems like the best solution. – Alon Adler Jun 28 '12 at 13:54

Redirect back to my web page after posting an image to my wall

1 Answers1