Symetrik Domino Consulting

Archive for the ‘HTML’ Category

I recently developed a WordPress website where it was important that some pages could be liked and show up on a user’s Facebook status. The front page also had a Facebook fan page like box. This is getting to be pretty much the standard for most websites.

Setting up the placement of the buttons is pretty trivial. This guide shows you how to generate the widget code for the fan page like box, and this guide shows you how to generate the widget code for the like/recommend button.

Embedded the widget code into the WordPress or Drupal theme is pretty straightforward, and placing it so that it looks right is a matter of simple CSS.

Getting the like/recommend buttons to function properly so that the like action shows up on the user’s Facebook status, which then leads that user’s friends to your website is the difficult part. Additionally, what shows up in that link might not always be what you want.

Ideally, you want the proper page title, a short description under the page title, and a little image to the left of the title and description which is indicative of what the page is about.

You must add Facebook Opengraph meta tags to the pages header for this to work right. This is done by adding the meta tags to the header.php file in your WordPress theme.

That’s easy to do if you just want to set a static image, title, and description for all pages on your site. I’m going to show you how to do that dynamically.

First, let’s assume that we want to have something for the front page, something for pages that have featured images, and something for pages/posts that do not have a featured image. This is done with a PHP if statement and few WordPress short codes.

The first thing that happens is that we set two tags that are always going to be the same no matter what – the fb:admin tag, which is the profile ID of one of the admins of the Facebook Fan Page. The second tag is the URL of the link.

Next, if the front page is liked, then specify the title, default description, and logo.

The next part of the statement says that if the post is a page, and the page has a featured image attached, then use the post title, and featured image. The description is taken from the body field.

The else statement says that for all other pages, use the post title, but use the site’s default logo and description.

You may want to play with these a little bit, but for my project this is what I needed. I’m sure this will get you started and you can figure out the rest in getting the proper look you want on the user’s Facebook status.

See this example below: