We'll start by building in a sharing button into our menu screen
Next lets add the Browser plugin to our project
The trick to making your sharing function look good is to add metatags to the webpage your sharing function directs to. If you're hosting your own webpage you can do this easily by inserting the following lines into your html script (I have bolded and italicized the parts you will need to replace with your own info:
- <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
- <meta property="fb:app_id" content="302184056577324" />
- <meta property="og:type" content="website" />
- <meta property="og:url" content="Put your own URL to the object here" />
- <meta property="og:title" content="Sample Website" />
- <meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
There are lots of other metatags to add to your webpage and you can even add in deep linking tags so that your link directs users to different download locations based on their operating system (iOS vs Android). Facebook for Developers has more information on this on their webpage.
If you're using a website building application like Squarespace or Wix you may have to do a little bit more fiddling around to make your sharing functions look good as they will commonly override any metatags you add to your individual pages with metatags that cover your whole domain.
A couple of tips I have picked up on how to make your sharing actions look better:
- The optimal image ratio for displaying your sharing image is 1.91. This will make your image look good with minimal cropping on most devices.
- Put the logo in the middle of the image to make it look better in browser based Facebook conversations
- The optimal width seems to be ~1300-2000px (this is based purely on my own experimentation). Feel free to add your own thoughts in the comments
- After making a change to your sharing action you need to refresh your cookies to see your updates. A faster and easier way to check what your sharing action will look like is the Facebook Debugger. Simply put in the link to you webpage and hit 'Fetch new scrape information' to see what the sharing action will look like
**Note. Sometimes your meta tags (sharing thumbnail etc.) will not display the first time you try to use the sharing function. If this happens, the following will usually solve the problem:
- Double check your URL
- Visit your URL on your browser
- Visit the Facebook debugger and hit 'Fetch new scrape information' several times (wait for Facebook to scrape your info between each time)
PS. to enable Facebook logins and shares from this browser version I have added the URL to the list of valid OAuth redirect URIs in Facebook for Developers.
In the next tutorial we'll have a look at how to download a list of the user's facebook friends. This is very useful for displaying Facebook-only scoreboards or extracting game information (such as what level they are on) about a users Facebook friend.