A great way to share the hard work you have done on your website and blog is to get your friends to “Like” what you have done and share it with their friends on Facebook.
This is a subject covered in many places around the web.
How do I get Facebook Like Buttons, Comments Boxes and various other social goodies to work with my website? Be this a normal website or a WordPress Blog. Then – How can I administer it all and see “insights” into what has been going on?
It’s important to note that if this I not done correctly – you may lose any Likes you already had – Which is exactly what happened to me.
I’m not going to even attempt to cover the whole thing here. I have myself barely scratched the surface of it. But there are some basic things that need to be done that I will share here. There are also a few things that can cause big, time-consuming problems. Things that I could not find the answer to despite large amounts of Googling and Forum-hunting.
It’s all about the meta tags. Then it gets even more complex!
The biggest problems I had were as follows:
- Understanding why I need to set up a Facebook Application for my web site. And not doing it soon enough.
- Getting the FB Open Graph meta tags to show up in my WordPress (self-hosted) Site. On one of my sites this took DAYS of trial and error to figure out!
- Placing the buttons in the right places.
So I am going to cover these points as simply as possible.
Set up a Facebook App for your site.
This is a step I missed when I first added Like buttons to this very site. Consequently – When I wanted to take advantage of all the other features (insights, admin etc.) things went a bit pear-shaped. So my advice here is do this first – even if you see no need for it – you may regret it later if you skip it.
In this case the Facebook app is simply a pointer to your web site. It allows you to admin all your social features. No one else can see this. So don’t be confused into thinking you are setting up a new page. It will direct visitors to your site too.
To set up an App for your site, first make sure you are logged in to Facebook and then go here: https://developers.facebook.com/setup/ and set up your app. There are more detailed instructions on how to do this all over the web. Enter your website name and the URL. You may also need to Facebook Developer to your account. Again full and lengthy discussion about how to do this can be found by hitting Google if required.
Once your app is set up you will be able to view the app details.
Make a note of this info (even better bookmark the page) as you will need it later.
Get The FB Open Graph META tags into your site header.
This is one of those things that should be simple but can be very, very confusing. These tags are read by Facebook and tell it lots of information about your site.
There are lots of these but the important ones for now are (this is taken from Facebook’s own very detailed guide here https://developers.facebook.com/docs/opengraph/:
<meta property="og:title" content="TITLE"/> <meta property="og:type" content="CONTENT TYPE"/> <meta property="og:url" content="URL"/> <meta property="og:image" content="IMAGE"/> <meta property="og:site_name" content="SITE NAME"/> <meta property="fb:admins" content="USER ID"/> <meta property="og:description" content="LONG DESCRIPTION"/>
This is the tag for your App ID:
<meta property="fb:app_id" content="YOUR_APP_ID/">
The other thing you need is your Facebook USER ID which can be found by going to your own profile and clicking on your main profile picture. You will see the number at the end of the address in the address bar of your browser.
There are various ways to actually get this META data into your website. If you have simple HTML web, you can just copy the META tags into the HEAD section of your index.
If you use WordPress – You will find a bunch of plugins to help with this. Some work, some don’t. Some work with some themes and others work with other themes. Some will conflict with other plugins. It is in all honesty – A MINEFIELD!
I can offer two tips on this.
Use the Facebook Linter. This little tool enables you to see what Facebook has picked up from your site. Simply go here: https://developers.facebook.com/tools/lint/ and enter your site URL. You should see some helpful information about what Facebook has seen. If you are lucky you should see something like this:
The single most frustrating issue I had was on this very site – no matter what plugin I used, no matter where I put the META tags (I even pasted them into the theme header) the linter just would not pick them up. This also manifested itself in that I could not add myself as an admin to my own personal website. Although all my websites that link to pages worked fine.
The answer – CLEAR THE CACHE! Turn off any plugins that cache your WordPress site! Lint again.
If there is one single piece of information on this page that makes it out to the web this should be it. So I say again:
CLEAR THE CACHE! Turn off any plugins that cache your WordPress site!
Some plugins will add these tags for you in a very sophisticated way. Changing them dynamically depending on which page you are viewing etc. Check them out. Google is your friend.
Placing the buttons and forms.
This is a matter of choice obviously. Most folks believe that having Like Buttons at the top of you page is best. I don’t really have any information on that one. But I chose to use Digg Digg for my like buttons (also includes Twitter buttons and Google +1 plus many others if required) and Facebook Comments for the comments forms. (They do work together if you use lazy loading in Digg Digg).
If you have a standard HTML web site then just get the button code from Facebook Developer area and paste it into your page in the appropriate places.
Add yourself as an admin of your page and you will then be able to see those Facebook Insights. To do this click the Insights button on your page and follow the instructions. If you have everything correct you should see something similar to this:
You should also see admin options on your Like Buttons and Comments forms etc. If it doesn’t work – try the linter again or have a search round for some clues.
OK. So this is a very basic guide. Very, very basic. Most of the information here can be found in much more detail by searching around. There are one or two small pieces of knowledge here that I had to figure out for myself and if they help anyone then I have done my duty.
Of course if anyone has any questions, comments or feel that I could elaborate on any the above then please use the Facebook Comments below and let’s see if it all works!
Thanks for reading.