——————
Note: Here is the latest version of the Facebook Like Wordpress Plugin for the impatient (and people not interested in the technical details but just looking for a solution working out of the box).
There is also the Official Wordpress page (from which you should rate the plugin and report it works, thanks).
This blog post is about the process of creating the plugin itself, so if you use the plugin directly you don’t have anything else to do than just installing it.
No coding necessary.
Otherwise you would add things manually and then the plugin would do the same again.
Jump to section 7/ Installation of the plugin if you just want to use the final product working out of the box.
Check also section 8/ Customize the plugin for help on configuring it when installed.
——————
Writing a Wordpress plugin is fairly simple provided you know PHP and follow the well documented process at wordpress.org.
If you’re in a hurry and just want a simple functionality, this guide is what you need.
Here’s a shortened version on how to create a Wordpress plugin that will add the new Facebook “Like” button announced yesterday at f8 to your posts and/or pages.
Simple yet customizable as we’ll still provide a settings page for the plugin.
1/ Optional Preparation
You can write a plugin and release it without submitting it to the official Wordpress directory.
Submitting your plugin to the Wordpress directory means your plugin must be release under GPLv2, so be aware of that before hand if it bothers you.
Some benefits of submitting to the directory are:
- faster distribution (users can find it easily)
- free SVN hosting
- packaging of the different versions
- access to analytics (number of downloads, …)
If you intend to submit your plugin to the directory, it may be a good idea to first look up which names are available as you may want to name your files and functions according to this name.
Check out the Wordpress plugin SVN to see what’s already taken.
2/ Create the plugin folder
bash# cd ~/wordpress/wp-content/plugins/
bash# mkdir like
bash# cd like/
bash# touch readme.txt
bash# touch tt_like_widget.php
We really need only two files:
- the readme file to describe the plugin,
- the actual code of the plugin in the php file (name it whatever you want).
3/ Write the Readme file
A basic Readme file looks like this:
=== Like ===
Contributors: bottomlessinc
Donate link: http://blog.bottomlessinc.com/
Tags: share, facebook, like, button, social, bookmark, sharing, bookmarking, widget
Requires at least: 2.3
Tested up to: 2.9.2
Stable tag: 1.0
The Facebook Like Button Widget adds a 'Like' button to your Wordpress blog posts.
== Description ==
Let your readers quickly share your content on Facebook with a simple click.
== Installation ==
1. Upload `tt_like_widget.php` to the `/wp-content/plugins/` directory
1. Activate the plugin through the 'Plugins' menu in WordPress
1. (Optional) Customize the plugin in the Settings > Like menu
== Frequently Asked Questions ==
= Is Like free? =
Yes
== PHP Version ==
PHP 5+ is preferred; PHP 4 is supported.
== Changelog ==
= 1.0 =
Stable version
You can get more information on the readme file with this more elaborated example.
Wordpress also provides a readme validator the way W3C does for XHTML validation.
4/ Write the PHP file
Only one function will be called in the file, the init function:
tt_like_init();
It does three main things:
- register and retrieve the parameters of your plugin if you have any (you will be able to set those in the settings page)
- register your own function to be called when an event happens, here an event called ‘the_content’ called every time the content of the post is rendered. Our plugin here will just append some content at the end of the post content.
- register your own function to be called to render the settings page in your Wordpress admin panel so you can customize your plugin.
function tt_like_init()
{
add_option('tt_like_width', '450');
add_option('tt_like_layout', 'standard');
add_option('tt_like_showfaces', 'true');
$tt_like_settings['width'] = get_option('tt_like_width');
$tt_like_settings['layout'] = get_option('tt_like_layout');
$tt_like_settings['showfaces'] = get_option('tt_like_showfaces') === 'true';
add_filter('the_content', 'tt_like_widget');
add_filter('admin_menu', 'tt_like_admin_menu');
}
The add_option function is provided by the Wordpress API and registers the default values of your options.
The previously saved setting are retrieved using get_option() and stored in our global variable we named ‘tt_like_settings’.
Our function tt_like_widget() will get called every time the content of the post needs to be rendered as we registered it with the add_filter() function.
In a similar manner, tt_like_admin_menu() will get called to render the settings page in the Wordpress admin interface.
The tt_like_widget() function is pretty straight forward: just append whatever you want to append to the $content variable.
function tt_like_widget($content)
{
$showfaces = ($tt_like_settings['showfaces']=='true')?"true":"false";
$url = urlencode(get_permalink()) . "&layout=" . $tt_like_settings['layout']
. "&show_faces=" . $showfaces
. "&width=" . $tt_like_settings['width'];
$button = '<iframe src="http://www.facebook.com/plugins/like.php?href='.$url.'" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:'.$tt_like_settings['width'].'px; height: 50px"></iframe>';
$content .= $button;
return $content;
}
Here we build a Facebook Like button which is just an iframe pointing to a Facebook URL having the URL of the current post as parameter.
It means we need to retrieve the URL of the current post dynamically, this is done using get_permalink()
This is also the place we use our settings to produce a Facebook Like button customized according to the settings on the admin page.
And now for the settings on the admin page. We basically build an html form that will record the user preferences.
function tt_plugin_options()
{
$tt_like_layouts = array('standard', 'button_count');
<div class="wrap">
<h2>Facebook Like Button</h2>
<form method="post" action="options.php">
<?php
if (tt_get_wp_version() < 2.7) {
wp_nonce_field('update-options');
} else {
settings_fields('tt_like');
}
?>
<table class="form-table">
<tr valign="top">
<th scope="row"><?php _e("Width:", 'tt_like_trans_domain' ); ?></th>
<td><input type="text" name="tt_like_width" value="<?php echo get_option('tt_like_width'); ?>" /></td>
</tr>
<tr>
<th scope="row"><?php _e("Layout:", 'tt_like_trans_domain' ); ?></th>
<td>
<select name="tt_like_layout">
<?php
$curmenutype = get_option('tt_like_layout');
foreach ($tt_like_layouts as $type)
{
echo "<option value=\"$type\"". ($type == $curmenutype ? " selected":""). ">$type</option>";
}
?>
</select>
</tr>
<tr>
<th scope="row"><?php _e("Show faces:", 'tt_like_trans_domain' ); ?></th>
<td><input type="checkbox" name="tt_like_showfaces" value="true" <?php echo (get_option('tt_like_showfaces') == 'true' ? 'checked' : ''); ?>/></td>
</tr>
</table>
<?php if (tt_get_wp_version() < 2.7) : ?>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="tt_like_width, tt_like_layout, tt_like_verb, tt_like_colorscheme, tt_like_showfaces"/>
<?php endif; ?>
<p class="submit">
<input type="submit" name="Submit" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
}
Here we have some code for an input box, a dropdown menu and a checkbox as example.
There is some handling for earlier version of Wordpress.
Refer to the options page help for further information.
The _e() function is here for internationalization.
5/ Submit your plugin to the Wordpress directory
Submit your new plugin to the directory by providing a unique name for it.
You will then be able to upload it to the SVN repository.
6/ Check in your code in the SVN repository
After Wordpress approves your plugin (it took 3 days for this one), you can check your code in the provided SVN link.
bash# mkdir ~/my_wp_plugin
bash# cd ~/my_wp_plugin
bash# svn co http://svn.wp-plugins.org/like
A like/trunk
A like/branches
A like/tags
Checked out revision 233010.
bash# cp ~/wordpress/wp-content/plugins/like/readme.txt trunk/
bash# cp ~/wordpress/wp-content/plugins/like/tt_like_widget.php trunk/
bash# svn add trunk/*
A trunk/readme.txt
A trunk/tt_like_widget.php
bash# svn ci -m "First stable version"
Authentication realm: <http://svn.wp-plugins.org:80> WordPress.org Subversion
Username: bottomlessinc
Password for 'bottomlessinc': ****
Adding trunk/readme.txt
Adding trunk/tt_like_widget.php
Transmitting file data ..
Committed revision 233012.
bash#
Now you can tag the revision of the plugin as your first version.
bash# svn cp trunk tags/1.0
A tags/1.0
bash# svn ci -m "Tagging v1.0"
Adding tags/1.0
Adding tags/1.0/readme.txt
Adding tags/1.0/tt_like_widget.php
Committed revision 233013.
bash#
Now that your code is checked in with the mandatory readme.txt file and you tagged the version 1.0 of your SVN to match the Stable tag: 1.0 in readme.txt, Wordpress will do all the rest and package it for you.
It will be available to a URL resembling http://wordpress.org/extend/plugins/like making it accessible to all Wordpress user and providing you download statistics and feedbacks from users.
You can also promote your plugin further by submitting it to wp-plugins.
7/ Installation of the plugin
Here is the complete code for the widget:
Facebook Like Wordpress Plugin (Latest Version)
Unzip it in your plugin directory.
bash# cd ~/wordpress/wp-content/plugins/
bash# wget http://blog.bottomlessinc.com/wp-content/uploads/2010/04/like.zip
bash# unzip like.zip
Then go to the Wordpress admin dashboard, activate it, and optionally customize it in the settings page.
8/ Customize the plugin
The plugin works out of the box without configuration as it uses the IFRAME version of the button.
Optionally you can use the XFBML version but it requires more setup and a better knowledge of the Facebook platform as you will need to create a Facebook Application and enter its App ID in the settings page of the plugin.
Which one to choose, IFRAME or XFBML?
It really depends on how technical you are.
If you are not, stick with the default settings using the IFRAME version.
If you are technical you can venture in the XFBML version, but even there you will hit snags as Facebook is notorious for producing unstable Javascript and not getting things to work the first time (a daily struggle when you develop Facebook applications).
With XFBML, the user who clicked the Like button can add a comment that will be attached to the post on his profile.
The benefit of using XFBML is purely real estate: provided the user not only clicks the button but adds a comment, the profile post will now include the image you entered in the Settings of the plugin along with an excerpt of the article.
For comparison here is the one liner you will see if using IFRAME or if using XFBML when the user did not add a comment…:
… and here is the profile post the user will generate when adding a comment with the XFBML version of the button:
Even though Facebook provides a simplified interface to generate a new Application, it doesn’t work right away.
When I first set it up I had this message when clicking the button:
The application ID specified within the “fb:app_id” meta tag is not allowed on this domain. You must setup the Connect Base Domains for your application to include this domain.
Facebook ©2010
When editing the settings of the Application itself, I couldn’t see anything wrong, and hit the “Save Changes” button without modifying anything.
Surprisingly it raised this error, refusing to save the (non existing) changes:
Validation failed.
Connect URL must point to a directory (i.e., end with a “/”) or a dynamic page (i.e., have a “?” somewhere).
In this case just edit the Application, go to the “Connect” tab and in the first field called “Connect URL”, make sure your website ends with a forward slash.
For instance I had to manually change my Facebook Connect URL from “http://bottomlessinc.com” to “http://bottomlessinc.com/” to make things work.
And even after that, when using the XFBML version the button doesn’t show up in around 20% of the page refresh.
That’s why sticking with the default IFRAME version is more reliable.
There is also a chance that adding a slash to your Connect URL will solve the problem of the Like button blinking (showing up as pressed then right away as unpressed).
During this blinking of the button you can see the message “You like http://example.com” which disappears also right away.
If you use the XFBML version of the plugin, you must provide the numerical Facebook ID of the Facebook user you will use to manage the pages.
Otherwise people clicking on the Like button will receive this error:
You failed to provide a valid list of administators. You need to supply the administors using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.
Did you find this post useful? Like it on Facebook :-) and Spare a few cents:
