How to Add Facebook Share Button (for WordPress too)

Posted in Tutorials

Let’s say that you want to add a Facebook share icon on your website or WordPress site.  For example, something like …

And if the user clicks on that button, it will redirect to Facebook to prompt the user to log in if they are not already logged in.

After they have logged in, they will be presented with opportunity to post that webpage link on their Facebook profile Wall….

User will be able to add their comment and set the visibility of the post.   Facebook automatically extract out the title, excerpt, and possible thumbnails for the post.  But sometimes if Facebook doesn’t pick out an appropriate thumbnail for the post, the user can select a more appropriate one or none at all.

Clicking on the Share button will perform the post to the user’s Facebook Wall in their profile.  As in …

Of course, since it was the user that had made the post, they can remove the post by clicking the the X icon next to the post.  The X icon does not become visible unless the user hovers over that area.

The Facebook Share Button Code

Now we will learn how to write the code for that initial Facebook share icon that makes all that work.   Actually, it is Facebook that makes all that work.  We only write an anchor link to Facebook’s sharer.php file with the appropriate query parameters.

The code would look something like this …

You see an image tag to a Facebook icon.  This “img” tag is preceded by an anchor start tag (<a>) and followed by the anchor closing tag </a>.

The key ingredients are in the anchor start tag.  There you see the “href” attribute indicating the link destination to go to …

http://www.facebook.com/sharer.php

The link is immediately followed with a question mark (?) to indicated that query parameters will be passed to the link.  In this link, we are passing in two “query parameters”.  The first query parameter being the “u” paramter …

u=http://learnwebtutorials.com/subscribe-rss-feeds-firefox-internet-explorer-browser

After the equal sign of the u parameter is the web address of the page that we are sharing.  This (the stuff after the equal sign) is known as the value of the parameter.  So if you are sharing your particular webpage, you replace this web address with your page’s web address.

After the first parameter, we put an ampersand (&) before putting the second parameter.  The ampersand separates the first parameter from the second.

Our second parameter is the “t” parameter …

t=How to Subscribe to RSS Feeds using Firefox and Internet Explorer Browsers

This parameter indicates the title of the webpage we want users to share.

You might notice another attribute in the anchor tag that looks like …

target=”_blank”

That just tell the link to open up in a new browser window.

If you like, you can also add the

rel=”nofollow”

attribute.

Adding Facebook Share Button on WordPress

The above is generic code where you hard-coded the web address and the webpage title in the anchor tag.  But if you have a WordPress site where you want to add the share button to every post such that each share button code has a dynamically generated web address and webpage title for the two parameters, then you would write something like …

We essentially replaced the value of the “u” parameter with …

<?php echo get_permalink(); ?>

And replaced the value of the “t” parameter with …

<?php the_title(); ?>

You put this code in your WordPress template files (such as single.php).

Remember that the value of a parameter is the stuff after the equal sign of the parameter.  The get_permalink() returns the web address of the WordPress post.  There is no “echo” in the latter because the_title() already does the echo for you when it outputs the title of the webpage.

Notes:

This article was written on February 2011 and Facebook and/or WordPress may have changed since then.

---