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.
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
I like and use the text option regularly, however, it's not the most common application. Other layout options are as follows:
[fbshare layout="button_count" align="right" size="large"]
The following shortcode attributes are available.
link. Use as follows:
Share on Facebook. Alter as required.
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.
8px 15px 8px 15px.
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.
- Share Button Configuration on Facebook .
- The code necessary to include anything above and below posts, common with social shares, is scheduled here.