Search code examples
facebookfacebook-graph-apifacebook-loginfacebook-social-plugins

Render a Facebook follow button for users who've authed via Facebook Login?


I have a web app that uses Facebook Login. We would like to render Facebook "Follow" buttons for these users on their profile pages on our product.

However, the "Follow" button does not render when it's initialized with the profile URL we get from the graph API for the user when they auth to our app.

I can only get it to work when the URL used in the button is their primary Facebook account URL, which I can locate manually, but not programmatically. We don't seem to have access to this URL via the graph API or the Javascript SDK.

Example markup that I expected to work, using the profile URL given in the "link" edge on the user graph node (note this employs the app-scoped user ID):

<div class="fb-follow" data-href="https://www.facebook.com/app_scoped_user_id/812839870448/" data-layout="button" data-show-faces="false"></div>

Example markup that actually works using a non-app-scoped user name:

<div class="fb-follow" data-href="https://www.facebook.com/yetanotherjosh" data-layout="button" data-show-faces="false"></div>

Rendering a follow button for a user who has authenticated to your app seems like a simple enough task, what have I missed? Thanks!

p.s. - in case you are wondering if the JS SDK isn't loaded correctly, we're loading it via this code, as suggested by the Facebook developer site, inside the body tag (and the button does work with certain URLs, so I don't think the SDK setup is the issue):

<script>(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#xfbml=1&version=v2.5&appId=REDACTED";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Solution

  • I want to do the same thing and I have the same problem with the php api.

    In theory you could do the following thing:

    1. Have a php script follow the https://www.facebook.com/1234 url to it's end point: https://www.facebook.com/username
    2. Step 1 is very slow, so you should do it only once, maybe use a cron job, not on-the-fly when the user logs in. Then store that url in your DB.
    3. Use the stored url to generate the Follow button.

    For step 1. you can use How to get final URL after following HTTP redirections in pure PHP?

    but make sure you add a user agent:

     $request .= 'User-Agent: Safari/537.16\r\n'; 
    

    or otherwise you'll get redirected to /unknownbrowser

    I will try it myself and post the results if any.

    Later Edit: i tried it and facebook needs you to be logged in to get the final url so you could, again in theory, start a login flow to get to the url, but it would probably be overkill.