Home Blog Facebook Share Button in WordPress With Shortcode

Facebook Share Button in WordPress With Shortcode

Facebook Share Button

Most of us are familiar with the Facebook share button. It’s normally integrated with other social sharing services – as it should be – but it can also be included on your website in isolation. This post will show you how to add a Facebook share button (with WordPress shortcode) to share a page to Facebook. There’s a post forthcoming that’ll deal with including a multitude of social share icons at the top and/or bottom of each page.

This post is part one of three; the remaining two posts dealing with how to integrate custom property types with your content as it’s shared. The custom property types (object graph tags) ensure that your page is properly represented on Facebook and other social platforms.

The Result:

Using the shortcode of [fbshare width="200" p="1"], we’ll render the following basic text on our WordPress website (we’ve used p="1" to wrap the text in paragraph tags. The text can be altered with text="something").

Share on Facebook

I like and use the text option regularly, however, it’s not the most common application. Other layout options are as follows:


Usage: [fbshare layout="box_count"]



Usage: [fbshare layout="button_count" align="right" size="large"]



Usage: [fbshare layout="button"]



Usage: [fbshare layout="icon"]


Shortcode Attributes

The following shortcode attributes are available.


If a URL is not specified (normally the case), the post permalink will be used.


Available layout options are box_count, button_count, button, icon, and link. Use as follows: layout="button".


Available size options are small and large.


For a text link, default text rendered is Share on Facebook. Alter as required.


If set to true (mobile="true"), the share button will open the share dialog in an iframe (instead of a popup) on top of your website on mobile. This option is only available for mobile, not desktop. false by default.


Default padding is 8px 15px 8px 15px.


If alignment is not specified (left or right), the button will center.


The button or text link will wrap in paragraph tags by default. Use p="0" to disable.

WordPress Shortcode

It's a requirement when using this function that you download the FBSDK function. Review its use and download the code here. It's possible that your theme is already rendering the SDK by default (open up your source code and search for "connect.facebook.net" to confirm).

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.


  • Share Button Configuration on Facebook .
  • The code necessary to include anything above and below posts, common with social shares, is scheduled here.


Title: Facebook Share Button in WordPress With Shortcode
Description: Embed a Facebook Share Button in WordPress With Shortcode.
Download: Shortcode (V0.2) | WP Plugin (V0.2) | Plugin Page

■ ■ ■

Interested in WordPress and Web Design? Subscribe to our list and we'll send you subscriber-only tools and plugins

Short URL for this post: http://shor.tt/Jo4