Simple WordPress Facebook Buttons

This’ll only take 5 minutes won’t it, two minutes to locate the best plugin, one minute to install and test it, and of course a couple of minutes blabbing about it on my facebook page showing just how jolly clever I must be, right ?

Wrong ! In the end I had to implement it myself and this is how I did it.

Now, I wanted to just have a site link, not a link to individual articles; the latter would be fine if I wre sharing recipes, photographs, that kind of thing but I’m not, I’m sharing nerd-geek ramblings so just a general like button tucked away in the widgets bar is what I wanted.

The Easy Bit

Trundle off to the Facebook developers area, in fact here:

https://developers.facebook.com/docs/plugins/like-button

Configuration

I set the layout to simply “button” – that way you don’t get that embarrassing counter of how “few” likes you get :-( Also unticked “Friends Faces”, partly for the same reason but also because I wanted nothing other than the buttons themselves. Then press the [Get Code] button …

Facebook button code.

All’s we need to do now – if it’s not inviting some suggestions – is to find where to stick it !

In your WordPress admin section, in the left panel select “Appearance”, subitem “Widgets”. On the right hand side will be a display of sidebar panels, I wanted the buttons to appear at the top so expanded the “Sidebar Top” drop down.
Next, scroll down the list of widgets in the middle of the page and locate the “Text” widget (labelled “Arbitrary text or HTML”) and drag it onto the “Sidebar top panel”. Now remember the Facebook-generated code ? Well just cut and paste both code blocks into the text area you created. Wasn’t that easy ! Wasn’t it ? Lets go test it, go to your main blog page and press the Facebook [Share] button (note that the first time may have a delay in displaying the page, presumably that’s Facebook initialising something but hey that’s fair enough).

Are you happy with the share preview ? Is it the right thumbnail ? Are the title texts etc correct ? Unfortunately not if alls you want is a general Facebook button for the whole site as Facebook will have picked out information about specific posts. Hey, they are pretty good at scraping relevant data from your page, it’s just not right in this instance.

If you don’t care, or simply find it is good enough then read no further. But where’s the fun in that ?

Controlling What Information Facebook Uses

Well, actually this doesn’t just apply to facebook but also other social websites and I wouldn’t be surprised if it will be (or even is) used by others when scraping relevant site information. Welcome to the Open Graph Protocol. Basically this is noting more than adding some meta tags to the head section of a web page. If you are writing your own web page from scratch then it’ll onlytake 30 seconds to add these. But we aren’t, we are using a programatically built site – WordPress – which is also themed. So, how do we add the these meta tags?

Well, I hope you like writing PHP because that’s what we are going to do. We need to add a function to our theme’s “functions.php” file; at the time of writing this I’m using the “themezee” theme and so the “functions.php” file is in the “wp-content/themes/zeestyle” folder of the WordPress site.

Very first thing you wan’t to do is to back up the existing “functions.php” file like I know you were going to, right ?

Next we add a function that will write the meta tags we want:

Meta tag code

All’s we need to do now is get the function actually called. In an ideal world you would simply add the following call outside of the function we just declared:

add_action(‘wp_head’, ‘add_open_graph_tags’);

However, as the WordPress API documentation states at the very start, not all themes support this and that was the case for the style I was using. So instead I trawled through functions.php searching for all instances of the “add_action” call to find out where there was a call being made that was writing to the head of the page. In this instance it was a call for ‘wp_enqueue_scripts’ so the line I actually added was:

add_action(‘wp_enqueue_scripts’, ‘add_open_graph_tags’);

Now just a quick mention of the image that is referenced in the meta tags. There are some rules:

  1. The image should be at least 200 x 200 pixels
  2. The aspect ratio – the width divided by the height – should not exceed 3. Note however if your image isn’t square then Facebook seems to simply chop out a square section from your image.
  3. Neither image dimension should exceed 600 pixels.

Et voila ! Now we have the right meta tags appearing and a suitable image too. Job done. Well, almost.

Testing

So we think we’ve added the right tags, but how do we test them ? You can not rely on the Facebook [share] button to test your meta tags being picked up as Facebook cache the tags (though apparently they do rescan them every 24 hours). But Facebook are on the case, simply visit https://developers.facebook.com/tools/debug/ , enter the address of your blog and Facebook will

  1. Show you the information that it will pick from the page, highlighting anything it doesn’t like, and
  2. Refresh its cached information about your page

I found #1 useful (ish) as I had trouble getting my image picked up. I could see my image being picked up by Facebook (i.e. I had used the correct image URL) but it also warned me it it didn’t like the image; ok, it didn’t say _why_ it didn’t like it but soon had that sorted with the aid of Google.

Wrapping It Up

Thing is, we just hacked a php file that is part of a theme. What happens when we update that theme, or simply get bored and change the theme ?

Well, ok, we still need to edit the relevant “functions.php” but at the very least we should move the code wot we writ into it’s own separate php file so alls we have to do is include it in whatever “functions.php” subsequently comes our way.

Ultimately your first choice really should be to make use of the plugins that are readily available for adding Facebook buttons to your WordPress site. Quick, tested by many and you won’t need to worry about theme changed or updates. But they didn’t work for me – and that may partly be due to the theme I chose.

Time for another cuppa – and off to read up on Child Themes so that I don’t have to hack “functions.php” anymore (i.e. do it properly!).

 

 

Leave a Reply