How to dynamically set Facebook Opengraph Meta tags in WordPress headers
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:
Theming fields in Drupal 6
I needed to figure out how to theme a field in Drupal 6. The use case was that I wanted to field to be a URL. This is pretty simple and straightforward by using the CCK Link module, which is a sub-module of CCK.
I was able to input my URL, such as http://www.symetrikdesign.com with no problem, and the CCK display options are pretty good. However, I wanted to strip the “http://” part on the output display, but have the link remain the legitimate link of http://www.symetrikdesign.com
Though, there are several options for outputting the display in the Admin/Content Type/
So I figured that I needed to theme the custom field. I searched drupal.org and google.com far and wide and found that though the documentation was present, there wasn’t much of it and it wasn’t that clear.
Here’s what I did.
My field name was called artistwebsite, so I needed to make sure that there was a standard content-field.tpl.php in my theme’s directory and then copy/clone that and call the new file content-field-field_artistwebsite.tpl.php. This works like other types of Drupal entity template files, but the tricky part is that you need to find content-field.tpl.php into your theme’s directory, because it probably isn’t there by default, depending on your theme.
I now have the following in my theme directory, and a field called field_artistwebsite in my content type.
content-field.tpl.php
content-field-field_artistwebsite.tpl.php
I was able to re-write the output of a CCK Link field so that it removes the “http://” on the display title on the node.
I did this by adding the following lines of code in place of the commented out print statement below:
".$item['display_title'].""; /* Here is the original PHP print statement line in the stock/default content-field.tpl.php * file that I commented out and replaced with what is above. * */ ?>
Getting the Delicious bookmarks add-on to work with Firefox 5.0
I figured out a simple trick to make the Delicious bookmarks Firefox add-on work after upgrading to Firefox 5.0.
This assumes that you previously had the Delicious bookmarks add-on working in Firefox 3.6.x and you have just upgraded to Firefox 5.0 – which disables the add-on and states that it is incompatible with Firefox 5.0
- Open Firefox
- Goto “Help” in the Menu, then “Troubleshooting Information”
- Click on the “Open Containing Folder” or “Show in Finder” button (within the box “Application Basics” on top of the page)
- Close Firefox
- Goto into directory “extensions\{2fa4ed95-0317-4c6a-a74c-5f3e3912c1f9}”
- Edit install.rdf and change the following from the first line to the second line
em:maxVersion=”5.0.*” />
- Restart Firefox
How to format line breaks in custom fields in WordPress
I was working on a WordPress project where I needed to create some custom fields and format them for the user. I wanted to be able to create those fields so that the user only had to put a few bits of text into the fields and be done with it without having the need to know any HTML formatting.
I had this working fine for two fields called price and dimensions. The issues was that the output is a line of text, so all of the items were being displayed on one line and then wrapping to the next line even though there were page breaks in the fields themselves.
For the price field.
$159.99 for two nights.
Add one more night for $49.99
The output looked like:
$159.99 for two nights. Add one more night for $49.99
I fixed this in the page template file by adding the following code around the get statement.
wpautop
So my statement looked like:
ID, 'Price', true)); ?>
Now the output looks like I want:
$159.99 for two nights.
Add one more night for $49.99
Fun Fact: How Lotus Notes got it’s name
Mitch Kapor got the name for his company from “The Lotus Position” or “Padmasana”. Kapor used to be a teacher of Transcendental Meditation of Maharishi Mahesh Yogi.