Walker News

How To Add Facebook Share Button To WordPress Post Page?

It is darn easy to add Facebook Share button on WordPress or HTML page that allows visitors to share the link / URL on Facebook.

With reference to Facebook documentation, however, the social networking giant suggests users to use FB Like Button for sharing pages, hints the FB Share Button will be deprecated.

If you still want to consider it, here is this 2-step guide:

1) Open header.php file of active WordPress theme and add this script tag to the line between <head></head> tag.
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
Putting this script tag at header will get the JavaScript file loads faster so the functions in it are available for calling asap.

2) Open single.php file of active WordPress theme (or the PHP file template in theme folder that generate page of which you want to add the said social networking feature) and insert the FB Share Button hyperlink tag:
<a name="fb_share"></a>
This simple link tag will be converted by JavaScript function (added by step-1) to the FB Share Button for current page URL accordingly.

Note, there are three different styles of FB Share Button available, which can be specified by type attribute (default style is “button” if not specified), i.e.:
<a name="fb_share" type="button">

<a name="fb_share" type="icon_link">

<a name="fb_share" type="icon">

For those who are interested to create own button style, please use this hyperlink link template for the <a></a> tag:
http://www.facebook.com/sharer.php?u=<Encoded URL>&t=<Encoded title of content>

For WordPress, the encoded URL can be easily generated by rawurlencode (PHP function), i.e.:
http://www.facebook.com/sharer.php?u=<?php echo rawurlencode(get_permalink()); ?>&t=<?php echo rawurlencode(get_the_title()); ?>

That is all you need to do for adding the FB Share Button on WordPress. If you want FB automatically include excerpt or portion of content, specific thumbnail of image used in the post, etc, then you might need to include some meta tags required by Facebook in the header section of HTML page :-(.

Custom Search

2017  •  Privacy Policy