Publish Multi-Photo Stories using Facebook API with PHP SDK
by Vincy. Last modified on August 22nd, 2022.
Facebook supports PNG, JPEG, BMP, GIF and TIFF format photos for uploading to a post or Facebook page. Facebook supports publishing single or multi-photo stories using Facebook API.
I have used Facebook PHP SDK for publishing the multi-photo stories in this tutorial. The implementation will be as simple as that programming with Facebook API to get user feeds and photos.
The multi-photo story can be published on the Facebook by using the photo and feed endpoint. Following are the steps to implement this.
- Create a Facebook App and get the API key and the app secret key.
- Integrate Facebook Login and get the access token for accessing Facebook API for performing photo upload and publishing post.
- Create an interface to upload multiple photos.
- Iterate the uploaded images and post to Facebook Photo edge with publish: false.
- Get the photo ids array response from Facebook and refer the id to embed multiple photos to a feed post.
Go through the above-linked articles to learn about how to integrate Facebook login and to get the Facebook API key and secret key.
Upload Multiple Photos to Facebook using PHP SDK
For publishing a multi-photo story to the Facebook, the photo files have to be uploaded first. While uploading the photo for a story feed, we have to send the boolean parameter published with the value false. By setting this parameter, the photo will be uploaded to the Facebook server but not published on the photo endpoint.
Following is the HTML code with the multi-photo upload option. I made the markup as simple as possible for supporting the multi-file upload by using the “multiple” attribute. This form also contains a textarea to enter the text for the Facebook post. By submitting the story text with the uploaded photo files, the PHP code will handle PHP image upload and also the Facebook API access via SDK functions.
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="post-box">
<form method="post" enctype="multipart/form-data">
<textarea name="photo_caption" class="photo-caption"></textarea>
<div id="post-box-footer">
<input type="file" name="media_file_input[]"
id="media-file-input" multiple />
<div class="photo-icon">
<img src="photo.png" />
</div>
<input type="submit" name="upload_to_fb"
class="photo_publish">
</div>
</form>
</div>
</body>
</html>
On each photo upload, the post request will get the id of the uploaded photo. These ids are loaded into a PHP array and will be embedded on the story feed later. This is the PHP code for uploading multiple photos to the specified target. The chosen files array is iterated and the files will be moved to the target folder.
The uploaded file locations are sent to a PHP function which handles the Facebook API photo upload process by using PHP SDK. This code snippet is the part of the PHP FBUserPhoto class file that handles the multi-photo upload.
function uploadPhoto($photoPath)
{
$photoIdArray = array();
foreach($photoPath as $photoURL) {
$params = array(
"url" => "https://yourdomain.com/publishing-multi-photo-stories-to-facebook-using-php-sdk/" . $photoURL,
"published" => false
);
try {
$postResponse = $this->fb->post("/{user-id}/photos", $params, $this->accessToken);
$photoId = $postResponse->getDecodedBody();
if(!empty($photoId["id"])) {
$photoIdArray[] = $photoId["id"];
}
} catch (FacebookResponseException $e) {
// display error message
//print $e->getMessage();
exit();
} catch (FacebookSDKException $e) {
//print $e->getMessage();
exit();
}
}
return $photoIdArray;
}
Embed Multiple Photos and Publish Facebook Stories
In the uploadPhoto() function stated above, the Facebook photo post request returns the uploaded photo id. While uploading multiple photos to the Facebook server, the returned ids are stored in a PHP array.
This photo id array will be iterated in a loop to embed them into to a story feed. This code shows how to embed the uploaded Facebook photos to a feed post by using attached_media parameter. This parameter should contain the array of photo ids by using the media_fbid key.
function publishMultiPhotoStory($caption, $photoIdArray)
{
$params = array( "message" => $caption );
foreach($photoIdArray as $k => $photoId) {
$params["attached_media"][$k] = '{"media_fbid":"' . $photoId . '"}';
}
try {
$postResponse = $this->fb->post("/{user-id}/feed", $params, $this->accessToken);
} catch (FacebookResponseException $e) {
// display error message
print $e->getMessage();
exit();
} catch (FacebookSDKException $e) {
print $e->getMessage();
exit();
}
}
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.