Posts Tagged ‘wordpress’

Administer your ghost pages shared by the new Facebook Like button

Sunday, April 25th, 2010

——————
Note: Use this post to talk about the Wordpress Facebook Like button plugin
——————

If you’re using THE Facebook Like button plugin (the first one the market and most robust ;-) hosted on Wordpress, you want to be able to administer your pages.

It’s nice to have lots of people like your pages, but it’s even better if you can also send all those Facebook user a message too.
For instance you could post updates about your page, or offer products and services (or advertisement) in a pinpoint accuracy targeted way.

The main revolution Facebook announced at f8 on April 21st is that every legacy web page on the web can now be turned into a Facebook page.

Here is how it works in practice and how to administer your blog pages on Facebook.

You will be able to not only view all the Facebook users who Liked your page, but see statistics and also send all of them messages directly to their Facebook feeds.

Pretty powerful spammy viral tool here.

The First solution if you use Wordpress and the Facebook Like button plugin is to simply configure the plugin by entering your Facebook ID in the Settings page.

It will make an “Admin Page” link appear next to the number of shares you have so far for the page:

Like button with Admin link

And voilà! You’re done. The meta data will be added automatically to the header.

The Second solution, if you don’t use the plugin, or if you use another blogging software or even a standalone website is to add some meta tags in the html header.

Here are the steps to do it manually in Wordpress.

1/ Modify you Wordpress header

Edit your Wordpress header file…

bash# cd ~/wordpress/wp-content/themes/<THE DIRECTORY OF YOUR THEME>/
bash# vi header.php

… by adding HTML tag attributes (very top of the file):

<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:og="http://opengraphprotocol.org/schema/"
        xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

… and by adding these meta tags in the header section of the header.php file:

<meta property="fb:admins" content="YOUR OWN FACEBOOK ID"/>
<meta property="og:title" content="<?php the_title_attribute( $args ); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php echo get_permalink($post->ID); ?> "/>
<meta property="og:image" content="http://blog.bottomlessinc.com/wp-content/uploads/2010/04/logo.jpg" />

Don’t forget to replace “YOUR OWN FACEBOOK ID” with your own numerical Facebook ID.
(example: “68310606562″ if you are Mark Zuckerberg)

Be careful to use the proper Facebook ID as once people start liking your post, you cannot change this ID anymore for security reasons.
You can only append new Facebook IDs (separate them with commas) and cannot replace the original Facebook ID which always has to appear first.
So in the previous example the first Facebook ID will always have to be 68310606562, otherwise Facebook will return this error when trying to like the page:

You previously specified 68310606562 as the leading admininstatory in the ‘fb_admins’ meta tag. The ‘fb_admins’ tag now specifies that 666 is the leading administrator. That needs to be changed back.

Also you can’t remove the Admin ID anymore once it’s been entered, or you will get this error:

Your page no longer includes any admininstrator IDs, even though you’ve specified one before. You must include 68310606562 in the ‘fb_admins’ meta tag, and it must be the very first one if there are many.
Facebook ©2010

Thanks to Tim at Hyperarts for the code.

2/ Administer your Facebook Ghost Pages

Now refresh your page, click on the “Like” button and notice the link to your newly created Facebook admin page as in this screen shot:

Facebook Like Admin Page

Clicking on the “Admin Page” link will redirect you to Facebook, which is only a regular Facebook Page automatically created with the picture specified in your header meta tag as profile picture.

It looks like this:

Facebook Like Admin Page on Facebook

Notice at the top the message in the yellow box confirming your are administrator of the page:

Administer Your Page.

You are seeing this page because you are an administator. All other users are directed to http://blog.bottomlessinc.com/2010/04/creating-a-wordpress-plugin-add-the-new-facebook-like-button-to-your-posts/, but you are being directed here so you can manage your fans and publish stories to your fans’ News Feeds.

(hum, looks like Facebook doesn’t know how to spell administrator).

Facebook provides a list of all the pages you administer in one convenient place.

Facebook is definitely mirroring the whole entire world wide web with these ghost pages that will blossom like mushrooms this spring.

From this Facebook page you can:
- see all Facebook users who Liked your page (formerly known as “Fans”)
- see statistics about the page (“insights”)
- post a message to your page wall

You will then start getting a weekly email update from Facebook listing the statistics of all your the different pages that were created.

For each page you will see:
- number of fans this week and number of total fans (hum, Facebook still calls them “Fans” here, I guess it didn’t sound right to call them “Likers”?)
- Wall Posts, Comments, and Likes this week (and last week)
- visits to your page this week (and visits last week)
- a direct link to Update your fans

Posting a message to your page wall will make your message appear in the Stream of every user who liked your page.

Virality is back (for external website that is, not Facebook applications)

Creating a Wordpress plugin: Add the new Facebook Like button to your posts

Thursday, April 22nd, 2010

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

Facebook new Like button

Simple yet customizable as we’ll still provide a settings page for the plugin.

Facebook new Like button Wordpress plugin settings

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()) . "&amp;layout="  . $tt_like_settings['layout']
                                . "&amp;show_faces=" . $showfaces
                                . "&amp;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.

Facebook XFBML Like button comment

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…:
Facebook Like button wallpost IFRAME

… and here is the profile post the user will generate when adding a comment with the XFBML version of the button:
Facebook Like button wallpost XFBML

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:

Making the default Wordpress Kubrick theme wider

Tuesday, March 9th, 2010

Using this tutorial to make Kubrick wider in Wordpress 2.9.2 will not work right away as the tutorial was written for 2.7, but the basics remain the same:

1/ Change the 4 images to 984px

kubrickheader.jpg
kubrickfooter.jpg
kubrickbgwide.jpg
kubrickbg-ltr.jpg

2/ Change header-img.php as in the tutorial

$corners = array(
        0 => array ( 25, 734+224 ),
        1 => array ( 23, 736+224 ),
        2 => array ( 22, 737+224 ),
        3 => array ( 21, 738+224 ),
        4 => array ( 21, 738+224 ),
        177 => array ( 21, 738+224 ),
        178 => array ( 21, 738+224 ),
        179 => array ( 22, 737+224 ),
        180 => array ( 23, 736+224 ),
        181 => array ( 25, 734+224 ),
        );
...
$x2 = 740+224;
...
$x2 = 739+224;

4/ Modify style.css

#headerimg {
        width: 984px;
}
#page {
        width: 984px;
}
#header {
        width: 984px;
}
.narrowcolumn {
        width: 660px;
}
.widecolumn {
        width: 660px;
}
#footer {
        width: 984px;
}
#sidebar {
        margin-left: 745px;
}

Voilà