Adding The Facebook Like Button

One of the new features on the new Needmore website are the Twitter Sharing and Facebook Like button at the bottom of every work item and blog post.

Given how popular these tools are they are remarkably difficult to implement. Most blogs use either the AddThis or ShareThis plugins to use these tools. However setting up and using these tools adds a layer of complexity as well as another account you have to manage, as well as a layer of complexity for visitors who suddenly can share your post via dozens of different services (most of which they have never heard of). Just having the simple Facebook and Twitter buttons without involving a third party plugin seemed like the cleanest and most minimal solution.

I ended up developing a small WordPress plugin to place the properly formated OpenGraph tags and required JavaScript and sharing buttons.

When you share with Facebook, it is best to include Facebook’s OpenGraph tags in your . They look like this.

These tags tell Facebook how you want your page to appear when someone hits the Like button. Things like titles, links and images. However, I’ve already made a mistake. Notice that I set the type to “blog” thinking this was the logical choice. Well, buried in the OpenGraph documentation is this obscure but important detail.

Note that the Open Graph protocol is currently designed to support real-life objects. If your URL is a piece of content — such as a news article, photo, video, or similar — you should set og:type to article (see below). Pages of type article do not have publishing rights, and will not show up on user’s profiles because they are not real world objects.

If you fail to set your og:type to article Facebook will assume that your single blog post is a unique real world item and create a new Facebook page when someone “Likes” it. These are fully functional Facebook pages that people can “like” and comment on. Fortunately, these new pages are put under the control of your fb:admins, so you can delete them. The results of my remarkably simple plugin make shared posts look this when they are “Liked”. Notice is has an image, title, link to the article and a small excerpt from the article and properly credits it to our website.

Integrating with Facebook can be tricky. I recommend reading up on it as much as possible before working with it. The result is that items shared on Facebook show up more like this and have greater prominence on people’s walls.

Raymond Brigleb

Creative Director, dreamer, partner, father, musician, photographer. Has been known to ride the rails. Pulls one heck of a shot.