Facebook Sharing Guide
Table of Contents
- Reachable by Facebook
- Open Graph
- Open Graph Debug Tool
- Quick Tips
- Need More Help?
Having problems trying to get Facebook to share the correct information?
I get a lot of questions about how and what gets shared when a Facebook button gets clicked so I thought I would put together a check list to make sure you are getting the most out of your share buttons.
Is your website online and accessible to the public?
The first thing you need to understand is if Facebook can't reach your page then it has no way of retrieving and storing the information needed. This leads me to the very important question, is your website live and is it reachable by the public? If your site is offline for development or maintenance then the Facebook bots can't reach your site thus have no way of creating a record of your page.
There is a known issue with Joomla 3.+, Gzip and Facebook. It is basically due to Facebook interpreting some pages as being too large when this options is being used and as a consequence returns an error. If you are using a CoalaWeb extension I have added an option to the System CW Gears framework plugin (that comes packaged with all my extensions) to fix this issue it basically turns off GZip compression when the Facebook or Linkedin bots visits your page.
To use this option open up your plugin manager and search for gears. [Figure-1]
Then under the General tab turn on the Gzip Help option and save and close the plugin options. Its always a good idea to clear your Joomla cache after making changes to make sure they catch up. [Figure-2]
Tip: Facebook stores page information for up to 24 hours so any changes you make or if you have just brought your site back online can take up to 24 hours to catch up.
To make sure what Facebook shares is as accurate as possible you will need to include Open Graph meta tags in the head of each of your pages you have a share button published on. They typically included the follow tags:
For CoalaWeb Social Links Pro subscribers you will already have a plugin to take care of adding all of this info for your automatically based on the page details. To learn more check out this Guide Link
The main thing you will need to ensure is that it is turned on so open up the CoalaWeb Social Links Component Options and make sure that under the Metadata Plugin tab in the Facebook Only section the Add Open Graph option is set to Yes
There are loads of free Open Graph plugins over in JED so have a look around to see if one fits your needs.
To check that the Open Graph tags are being included start by opening up one of your articles then right click the page and finally select View Page Source If all has gone according to plan you should see something like this in the head of the page. [Figure-3]
If you aren't using Open Graph tags and your site is reachable by Facebook they will try to retrieve page details as best they can by using such things as normal meta tags and scrapping the page to find usable images.
Can I see what Facebook sees when looking at my website?
Tip: To use the Debugger Tool you will need to have a Facebook account and be logged in.
Facebook provides a great tool for fault finding issues called the Debugger it allows you to quickly and easily identify any issues with a particular web page. To get started enter in the URL of a page you want to check and click Debug. [Figure-4]
On the next page you have a tonne of helpful information but lets start at the top with the title When and how we last scraped the URL here you can see if there were any problem reaching your page, the last time it was scrapped and even current Likes and Shares for that particular page. [Figure-5]
In the next section you can see what raw tags were seen by Facebook when checking your page in our case they retrieved our Open Graph tags. [Figure-6]
Next Facebook takes the raw tags and constructs a series of definitive Open Graph tags for the page. If the Open Graph tags in the head of the page were displayed correctly they should coincide with this section. [Figure-7]
Next is a great way to actually see what will be shared when a button is clicked on that page. [Figure-8]
How do I update what Facebook has stored?
If your site doesn't have any errors and Facebook can see and retrieved your page information you can wait up to 24 hours for your pages to automatically catch up.
You can also force a page to catch up using the Fetch new scrape information button at the top which will instructed Facebook to recheck the page now. If you see all the information is being displayed correctly when you scroll down to the When shared, this is what will be included then the share button on that page should now share the correct information.
Tip: If you find the majority of your pages are displaying correctly but a particular page is being stubborn open up the Debug Tool and try the Fetch new scrape information button from the top to force it to catch up. If after fetching your page information everything is displaying correctly head back to your site and test your button again.
If the image referenced by the Open Graph tags is too small Facebook will move onto another image that it finds on the page that meets the minimum size restrictions. FB will only use images that are at least 200x200 px and prefers images that are measured in multiples of 100 and are in a square format.
Facebook stores page information for up to 24 hours so any changes you make or if you have just brought your site online can take up to 24 hours to catch up.
Joomla 3.+ sites using Gzip compression will need to use the Gzip Help option in the System CW Gears plugin.
To use the Debugger Tool you will need to have a Facebook account and be logged in.
Stubborn pages, if you find the majority of your pages are displaying correctly but a particular page isn't drop by the Debug tool and try the Fetch new scrape information to force it to catch up. If everything is displaying correctly head back to your site and test your button again.