On April 25, 2011, Facebook released the [Send] button. The [Send] button provides a means to share a web page with someone directly, as opposed to the [Like] button’s behavior of placing the entry on your wall for all your friends. Of course, the [Like] button is handy too. Fortunately, you now can have both show up on your WordPress posts rather easily and I’m going to show you how to do this without using a plugin.
First, you will need to download a PHP file that contains the code for presenting the Facebook buttons on your posts. Then you’ll need to update the “functions.php” file associated with your theme to reference this file. I took this approach in order to isolate this code, making it easier for someone to update in the future.
Once you get this done, then you simply place a short piece of code within the single.php file to place the Facebook buttons on your Posts. So, let’s get started.
Preparing Your Posts to display the Facebook Like and/or Send buttons
The following steps will get the Facebook buttons showing up on your site’s Post pages:
- Download the Facebook Button PHP file, un-zip it and place it into your theme’s folder. This will be the same location where the functions.php file is located. This file does two things. First, it places the Facebook Open Graph meta information into the <head> section of your Post. Second, it generates the HTML used to display the Facebook Like and/or Send buttons. If you prefer to cut-and-paste, then this PHP code can be retrieved from Pastie.org.
- If there is not an “images” folder within your theme folder, create one.
- In the images folder place an image file that will be used for Posts that don’t have an included image. When someone clicks [Like] or [Send] a reference to the article is placed in Facebook. This entry includes the page’s URL, the first 200 characters of the post and an image. The image will be the first one in the Post or this default image if the Post has no image.
-
Update the fb_buttons.php file to specify the required Facebook Open Graph values. Simply place the appropriate values within the quotes. For example,
"ref"=>"", "default_image"=>"default.jpg");might become
"ref"=>"xyz.com", "default_image"=>"no_post_image.jpg");The values that you need to update include the following:
- appid (optional): If there is a Facebook Application associated with your website then you can specify it and gain added administration features.
- admins (optional): Specify the Facebook ID(s) of the person(s) who administers the website pages. This can be a comma-delimited list of IDs. Though <Linter> will throw an error, you may use your Facebook Username (if you’ve set one) in place of your Facebook ID.
- type (required): This field indicates the type of “Page”. In the case of a blog, the most common value would be “article”. Refer to Facebook Open Graph Types for a complete listing of types.
- width: (required): The overall width of the button element. The default is set as 450 pixels. You just specify the numerical value.
- ref (optional): This value will be returned as an argument on the URL from Facebook should someone click the page link there.
- default_image (required): The name of the image to use should your Post not have an image. This image should be placed in a folder titled “images” that is located within your theme directory. If the folder is not there, create it.
-
Add the following line of code to the functions.php file so that the file you placed above is made available to WordPress.
include_once("fb_buttons.php"); -
And, finally, add the following code to the single.php file in your theme directory.
<?php if ( function_exists('webphys_fb_buttons') ) { webphys_fb_buttons(array("Send" => true, "Like" => true, "Faces" => false)); } ?>The single.php file is used to build the Post page. A good place for the above code might be before the line that calls “the_content()” function. You also could place it after this line, which would place the buttons below the contents of your article. If you also wanted to incorporate the Facebook buttons on other pages of your site, you can do so, BUT you will need to update the webphys_fb_meta_tag() function within the provided PHP file as it limits the creation of the Facebook Open Graph meta data to just Posts. Details on other available conditional tags can be found on the WordPress Conditional Tag Codex page. The following are the files you may update the same way you have for the single.php file:
- index.php: This is the blog feature page. Depending upon how you’ve set up your WordPress installation, this may be the home page of your site or not. If you see the “is_home()” or “is_frontpage()” function, then the code within these conditional clauses would be used only on your site’s home page.
- page.php: This is the code used to generate static Pages within your website.
- archive.php: This file’s code is used to layout the archive page, for example, the page generated when someone clicks on a category or a tag.
- search.php: This file’s code is used to generate the results page should someone search within your site.
If you’d like to get an even more in depth view of the anatomy of WordPress, check out our WordPress Theme Anatomy blog Post.
A few parameters are sent by the above code to allow you to control which Facebook buttons are displayed. The parameter values may be set to either true or false. The parameters include the following:
- Send: Specifying “true” will indicate that you would like the Facebook [Send] button to be displayed.
- Like: Specifying “true” will indicate that you would like the Facebook [Like] button to be displayed. This button also includes some textual information on the number of “Likes” the page has received. This count includes the number of [Send] requests.
- Faces: This parameter is used only if you have the [Like] button displayed. Specifying “true” will result in small Facebook profile images being displayed below the [Like] button for those folks who have “Liked” the Post.
Verifying Your Facebook Send and Like Button Configuration
Once you have everything configured, you can verify your updates by doing the following:
- Navigate to a blog Post and see if the buttons are displayed. If not, something is off.
- If the buttons are displayed, copy the page URL, go to the Facebook URL Linter page and test the URL. You will receive error or warning messages if something is not properly configured.
- Try clicking the [Like] and/or [Send] buttons.
For additional information about Facebook Open Graph refer to the Facebook Open Graph Protocol documentation.
Making use of the new Facebook [Send] button and the Facebook [Like] button will allow you to gain even more visibility within the Facebook community. Let me know how this works out for you and share any tips on making this Facebook tool even further.
Pingback: The Facebook Send Button | MediaFunnel