Last updated on September 22nd, 2014 at 03:06 pm
If you want to quickly and easily add a Facebook Like button and Open Graph meta tags to a Drupal website as I recently setup to trial, there are two modules that allow you to do this, OpenGraph_Meta and Facebook Like Button. These two modules certainly don’t offer the advanced functionality of the heavyweight Drupal for Facebook module, but unlike it, these two do not require a Facebook App ID. These two are also extremely simple to setup with a single configuration page for each module. The only technical configuration is one small change to the page.tpl.php file to add the Open Graph XML namespace to the HTML header as below:
All you need to do is add the xmlns:og section to your HTML tag along with your other namespaces.
Once you’ve added the Open Graph namespace, enable the OpenGraph_Meta module and browse to www.yoursite.com/admin/content/opengraph_meta
First things first you need to select what content types you would like Open Graph to be enabled on. On the site that I set this up on, this is all the product classes and the blog entries. I have left it disabled for regular pages and book pages.
The only other configuration required is entering the default values (if you want to use them).
The meta tags that can have defaults set are:
- Site name
- Fallback image (the image to use if there is no image configured on a page).
- Default meta type for each content type (eg. activity, person, place, business, organisation etc)
- Contact meta tags
- Location meta tags
All the default meta tags can be overridden on a per node basis, so really you just want to set the tags you want to use regularly that are unlikely to change often.
Now when you create a node that has Open Graph enabled, there will be a new fieldset called “Open Graph Meta Tags”. Expanding this fieldset will allow you to override all the default meta tags as well as set the title and summary tags. If you don’t set these tags, the title is automatically set to the node title and the summary tag uses the first 200 characters of the node body.
Configuring Facebook Like Button
Once you have Open Graph setup you can start controlling exactly what is shown when a user likes or shares your pages on Facebook. So now we want to take advantage of this and encourage people to like our pages!
Simply enable the Facebook Like Button module and then navigate to www.yoursite.com/admin/settings/fblikebutton to do the configuration of it.
Like Open Graph, the first configuration option allows you to set what node types to display the like button on.
Next up you can choose to enable the like button for node teasers as well as full nodes, I have this disabled.
Some custom appearance options are disabled that allow you to set the height and width of the iFrame that contains the like button. You can also add in custom CSS that is applied inline when the page is rendered. You can also do custom styling through your main stylesheets.
There are three layout options:
- Standard: Shows the standard like button and a written count of how many people like the page.
- Box Count:Shows a button with a thumbs up and count of how many people have liked it.
- Button Count: Shows the standard like button with a graphical count of how many people like the page beside it.
My personal preference is the standard layout as this has become the most recognisable around the internet.
The next option, “Show Faces” also requires the standard layout. This option shows the display pictures of friends who like the page but is ignored with all layouts except standard.
The final key options are choice of verb (either “like” or “recommend”), choice of font, light or dark colour scheme, weight within the node (lets you move it above or below other node elements), and the language.
That’s it! Nice and simple, if you want to style it more you can, but if you are happy with the standard styling, it only takes a matter of minutes to configure.
Now people can like your Drupal nodes on their Facebook account and you can control what is actually displayed.
It’s also worth checking out the AddThis module which does give you statistics through the AddThis system and incorporates many more sharing options. I use a combination of the two of these options at the moment.