Webhooks for Lead Ads Tutorial

To get the most benefit from leads generate from Lead Ads, advertisers should respond to leads quickly. Various sources ^{[1] [2] [3]} suggest that responding to leads quickly (within 30 minutes) drastically affects conversion rates. You can achieve this with Facebook Lead Ads using our webhooks (previously known as Realtime Updates API), where your application will receive realtime updates as leads are filled out.

The integration requires setting up the webhook and subscribing the page to the application. The following is a video tutorial that steps through the integration starting with the creation of your Facebook application.

Sample Code from Video

Below are the files created in the video you can use to bootstrap the integration on your platform.

From webhook.php:

This is the file that will be used to verify the endpoint for webhooks and will thereafter be used to handle the data that gets posted in from the webhook subscription.

<?php

$challenge = $_REQUEST['hub_challenge'];
$verify_token = $_REQUEST['hub_verify_token'];

if ($verify_token === 'abc123') {
echo $challenge;
}

$input = json_decode(file_get_contents('php://input'), true);
error_log(print_r($input, true));

From platform.php:

This file is intended to mimic your marketing platform or website and show how you might integrate a workflow using the JavaScript SDK.

<h2>My Platform</h2>

<script>
window.fbAsyncInit = function() {
FB.init({
appId      : '<YOUR_APP_ID>',
xfbml      : true,
version    : 'v2.5'
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function subscribeApp(page_id, page_access_token) {
console.log('Subscribing page to app! ' + page_id);
FB.api(
'/' + page_id + '/subscribed_apps',
'post',
{access_token: page_access_token},
function(response) {
console.log('Successfully subscribed page', response);
});
}

// Only works after `FB.init` is called
function myFacebookLogin() {
FB.login(function(response){
console.log('Successfully logged in', response);
FB.api('/me/accounts', function(response) {
console.log('Successfully retrieved pages', response);
var pages = response.data;
var ul = document.getElementById('list');
for (var i = 0, len = pages.length; i < len; i++) {
var page = pages[i];
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#";
a.onclick = subscribeApp.bind(this, page.id, page.access_token);
a.innerHTML = page.name;
li.appendChild(a);
ul.appendChild(li);
}
});
}, {scope: 'manage_pages'});
}
</script>
<button onclick="myFacebookLogin()">Login with Facebook</button>
<ul id="list"></ul>

Other Reading

• JavaScript SDK Examples
• Webhooks
• /subscriptions edge
• /subscribed_apps edge

References

¹https://hbr.org/2011/03/the-short-life-of-online-sales-leads/ar/1
²http://www.forbes.com/sites/kenkrogue/2012/07/12/the-black-hole-that-executives-dont-know-about/
³http://www.entrepreneur.com/article/236916