Posts Tagged ‘Tricks’

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 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

CCK Link Display field

Though, there are several options for outputting the display in the Admin/Content Type//Display fields, there is nothing that handles stripping some characters from the title.

So I figured that I needed to theme the custom field. I searched and 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.

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:

/* 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.

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.


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

Getting the Delicious bookmarks add-on to work with Firefox 4.0

I figured out a simple trick to make the Delicious bookmarks Firefox add-on work after upgrading to Firefox 4.0 or 4.0.1.

This assumes that you previously had the Delicious bookmarks add-on working in Firefox 3.6.x and you have just upgraded to Firefox 4.0 – which disables the add-on and states that it is incompatible with Firefox 4.0

  • Open Firefox
  • Goto “Help” in the Menu, then “Troubleshooting Information”
  • Click on the “Open Containing Folder” 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="4.0b3pre" />
    em:maxVersion="4.0" />
  • Restart Firefox

UPDATE: To get the Delicious bookmarks add-on to work with Firefox 4.0.1 and all subsequent 4.0.x versions, change above line to:

  • em:maxVersion=”4.0.*" />

Quick Drupal install on Ubuntu 10.04 server

Here’s some instructions for doing a really quick Drupal install on Ubuntu server 10.04.

This assumes that you are well versed with Drupal and have already created your database and database user and given the rights to the DB user to access the DB.

Step 1 download, extract, and copy the files into the /var/www root

$ cd /
$ sudo wget
$ sudo tar xvzf drupal-6.20.tar.gz
$ sudo mv drupal-6.20/* drupal-6.20/.htaccess /var/www
$ sudo rm -rf drupal-6.20.tar.gz
$ sudo rm -rf drupal-6.20

Create the files directory and give it the proper ownership

$ sudo mkdir /var/www/sites/default/files
$ sudo chown www-data:www-data /var/www/sites/default/files

Copy default settings.php file to settings.php so that you can enter your own server and database details

$ sudo cp /var/www/sites/default/default.settings.php /var/www/sites/default/settings.php
$ sudo chown www-data:www-data /var/www/sites/default/settings.php

From here you would need to edit /var/www/sites/default/settings.php and enter in our server, database, and database user details.

I would also like to note that you can also install Drupal with aptitude on Ubuntu, but I would much prefer to install Drupal manually and use Drush to update drupal whenever I want to have it updated.

I only want Drupal updated when I say so and with what versions that I decide on.

$ sudo apt-get install drupal6

Installing Drush (at the time of this writing 4.2 is the latest version)

$ sudo apt-get install php5-cli
$ cd /usr/local/
$ sudo wget
$ sudo tar zxvf drush-All-versions-4.2.tar.gz
$ sudo rm -rf drush-All-versions-4.2.tar.gz (remove downloaded and extracted tar file)
$ cd drush (to make sure the files are there)
$ sudo chmod 555 drush

Create symbolik link
$ cd /usr/local/bin
$ sudo ln -s /usr/local/drush/drush drush

I'm currently available
for Lotus Notes / Domino consulting engagements.


Connect with me: