Tutorial: How to customize the Facebook Share Dialog using dynamic meta tags

Solar2D General Questions/Discussion
#1

This may be obvious for some, but it took me some digging and I figured I would share what I learned in a nice, easy to digest format.

Facebook documentation recommends the share dialog over the feed dialog for mobile developers. It’s supposed to be the easiest way to share stuff from your app. It doesn’t seem to be documented, but Corona supports the share dialog.

Feed allows you to pass in a name, caption, description, and a link to customize your dialog. Share on the other hand, only takes an href parameter – this is the url for your page. When you activate the share dialog, Facebook scrapes your page looking for specific meta tags to fill in the content.

Normally these meta tags are static, but if you want to take your sharing to the next level, you can dynamically generate them using a bit of server side code.

Note: The following assumes you have facebook configured with your app and that you have access to a server running php.

First, let’s look at the Lua code for Corona:

facebook.showDialog( "share", { href = "http://www.yoursite.com/share.php?score="..tostring(levelScore).."&level="..tostring(levelId) })

Notice that we are encoding a score and level Id into the url. Pretty simple so far!

Next, let’s look at the contents of share.php:

\<?php $score = $\_GET['score']; //read the score from the url $level = $\_GET['level']; //read the level from the url ?\> \<!DOCTYPE html\> \<head\> \<!-- This url should be the same as the href you passed in to showDialog --\> \<meta property="og:url" content="\<?= "http://". $\_SERVER['HTTP\_HOST'] . $\_SERVER['REQUEST\_URI']; ?\>" /\> \<!-- Here I customized the title, but you can customize any property you want --\> \<meta property="og:title" content="I scored \<?= $score ?\> points on Level \<?= $level ?\>!"/\> \<meta property="og:description" content="This is literally the best game on Earth! Download it now!" /\> \<meta property="og:image" content="http://yoursite.com/appimage.png" /\> \<!-- Manually redirect to the page you want the user to land on. This is optional --\> \<meta http-equiv="refresh" content="0;url=http://yoursite.com"\> \<script type="text/javascript"\> window.location.href = "http://yoursite.com" \</script\> \</head\>

And that’s all it takes! Facebook has a nifty tool to verify that your meta tags are being read properly. You can check it out here. Simply enter your href with some sample values to see the results.

Example:

http://www.yoursite.com/share.php?score=390&level=50

You may be wondering why you should go through all the trouble to use Share instead of Feed. The main advantage is that you can update your meta tag content on your server, and have it propagate to all versions of your app immediately instead of building and pushing out an update just to change one or two dialog properties.

Hopefully this helps a few of you!

#2

Hello, thanks for this useful post. It may be just what I need if I ever get the dialog to work.

I would like to know a little more about your experience using the share dialog, since I’m having some (odd) trouble with it

I think I have configured everything according to the instructions provided by Corona, and it seems to work at first:

When I perform the facebook login a screen asks me if I want to give the app access to my public profile, I click ok ant then the app comes back for a fraction of second and then the share dialog pops up.

The dialog is titled   " my name shared an article on app name"

thus far everything works as it is expected to, but then if i try to type a comment in the “say something about this…” box, as soon as I tap it I’m asked for email and password (If I try to post without writing it works perfectly),  I think it’s weird, since I already granted permission to the app, but I tink “ok, maybe it is required for security reasons”. But then, it launches the internet browser and once again asks for email and password.

Then the browser stays in a white screen,nothing is shared

Next time I try to share, it works perfectly, I can share and add a comment as many times as I like.

If I don’t fill my email and pass the second time I’m asked (browser) the share dialog will either work the next time I try to use it or it won’t be shown ever again (“Loading” will quickly be shown and hidden, but no dialog).

I’m sure this is not how this is supposed to work, and no user using my app will go through the trouble of filling their credentials (when they are already logged in) not once, but twice, because: 1. they should’t have to, and 2. it is at least a little bit suspicious.

Another weird thing that’s happening to me is that if I log out of FB, log in with a different account and then try to open the share dialog, it is always shared on behalf of the first account who tried to share

So, what I would like to know is, did you experience this? Is this the way your app is working right now (I hope not)?

Thank you.

#3

Hi Gerard,

You might be experiencing the bug mentioned in this post, which I have experienced as well. For me, I notice that it only happens when I have the native Android FB app installed. At this time I don’t have a fix for it, and I don’t know if one exists.

I still have a couple months before releasing my app so I’m hoping Corona fixes the bug before then. If not then I will probably fall back to the Feed dialog, which doesn’t not seem to have the same problem.

I would suggest starting a separate post documenting your issue. That way at least Corona can see that there are multiple developers encountering this behavior.

#4

Thanks for the very quick reply.

I remembered reading somethingsimilar but didn’t find that thread. I have already posted thi in a related thread I started some weeks ago.

I’ve been avoiding the use of the “feed” dialog as facebook won’t allow me to add the app url or any description. it is also set to stop working this year, so there’s that.

I also hope this gets fixed soon, as my app is already past its scheduled release date and i’m being pressured to “get the facebook posting to work properly”

#5

Hello, thanks for this useful post. It may be just what I need if I ever get the dialog to work.

I would like to know a little more about your experience using the share dialog, since I’m having some (odd) trouble with it

I think I have configured everything according to the instructions provided by Corona, and it seems to work at first:

When I perform the facebook login a screen asks me if I want to give the app access to my public profile, I click ok ant then the app comes back for a fraction of second and then the share dialog pops up.

The dialog is titled   " my name shared an article on app name"

thus far everything works as it is expected to, but then if i try to type a comment in the “say something about this…” box, as soon as I tap it I’m asked for email and password (If I try to post without writing it works perfectly),  I think it’s weird, since I already granted permission to the app, but I tink “ok, maybe it is required for security reasons”. But then, it launches the internet browser and once again asks for email and password.

Then the browser stays in a white screen,nothing is shared

Next time I try to share, it works perfectly, I can share and add a comment as many times as I like.

If I don’t fill my email and pass the second time I’m asked (browser) the share dialog will either work the next time I try to use it or it won’t be shown ever again (“Loading” will quickly be shown and hidden, but no dialog).

I’m sure this is not how this is supposed to work, and no user using my app will go through the trouble of filling their credentials (when they are already logged in) not once, but twice, because: 1. they should’t have to, and 2. it is at least a little bit suspicious.

Another weird thing that’s happening to me is that if I log out of FB, log in with a different account and then try to open the share dialog, it is always shared on behalf of the first account who tried to share

So, what I would like to know is, did you experience this? Is this the way your app is working right now (I hope not)?

Thank you.

#6

Hi Gerard,

You might be experiencing the bug mentioned in this post, which I have experienced as well. For me, I notice that it only happens when I have the native Android FB app installed. At this time I don’t have a fix for it, and I don’t know if one exists.

I still have a couple months before releasing my app so I’m hoping Corona fixes the bug before then. If not then I will probably fall back to the Feed dialog, which doesn’t not seem to have the same problem.

I would suggest starting a separate post documenting your issue. That way at least Corona can see that there are multiple developers encountering this behavior.

#7

Thanks for the very quick reply.

I remembered reading somethingsimilar but didn’t find that thread. I have already posted thi in a related thread I started some weeks ago.

I’ve been avoiding the use of the “feed” dialog as facebook won’t allow me to add the app url or any description. it is also set to stop working this year, so there’s that.

I also hope this gets fixed soon, as my app is already past its scheduled release date and i’m being pressured to “get the facebook posting to work properly”

#8

FYI, you can use the same dynamic meta tag approach for the feed dialog, not just the share dialog.  The benefit is that the feed dialog doesn’t suffer the buggy login-related behavior mentioned above for the share dialog.  When using the feed dialog with this approach, don’t pass a description parameter, or it will override the description meta tag.

  • Andrew
#9

Thanks for the tutorial. I’m struggling with the share/feed dialog.

I have a share function where I upload a screenshot to parse, whereafter I share the image link using showdialog and the php dynamic meta tags from the tutorial above. Working fine.

BUT: When clicking on the facebook post, I want the user to go to the image url, (displaying the image in full size).

However, when I use the Facebook plugin showdialog to share the image url, the user will automatically open the app instead.

I can’t figure out how to get around this. Hoping I’m missing something obvious here, thankful for any pointers.

//Oscar

#10

FYI, you can use the same dynamic meta tag approach for the feed dialog, not just the share dialog.  The benefit is that the feed dialog doesn’t suffer the buggy login-related behavior mentioned above for the share dialog.  When using the feed dialog with this approach, don’t pass a description parameter, or it will override the description meta tag.

  • Andrew
#11

Thanks for the tutorial. I’m struggling with the share/feed dialog.

I have a share function where I upload a screenshot to parse, whereafter I share the image link using showdialog and the php dynamic meta tags from the tutorial above. Working fine.

BUT: When clicking on the facebook post, I want the user to go to the image url, (displaying the image in full size).

However, when I use the Facebook plugin showdialog to share the image url, the user will automatically open the app instead.

I can’t figure out how to get around this. Hoping I’m missing something obvious here, thankful for any pointers.

//Oscar