WordPress Basics: Adding Facebook Integration to Your WordPress Site
- Installing Jetpack
- Adding Open Graph Meta Tags
- That's It, You're Done!
Sharing articles on Facebook has become one of the most popular ways to disseminate information online. When readers can share articles from your site with a simple click or tap, it's easier than ever to get your information out there.
Making sure that your site plays nicely with Facebook is an important step in this process. The simplest option is to add a plug-in like the WordPress Jetpack to your site, giving it Facebook sharing capability. Want to go a little further? With a few relatively simple additions to your site's meta data, you can take advantage of some advanced Facebook sharing features that allow your site to provide titles, excerpts, and featured images automatically when an article is posted to Facebook. In this article, I'll show you how to use both methods. Let's get started by adding Jetpack to your site.
Installing Jetpack
Jetpack is a plug-in developed by the folks behind WordPress. It contains a suite of applications that were created for WordPress.com blogs, including a Share feature that lets you choose one or several sharing services, decide where the sharing buttons will appear on your site, and implement them with the click of a button. You don't have to connect your site to Facebook manually, and you don't have to touch any code. Easy!
First you'll need to connect your self-hosted WordPress site with a WordPress.com account (it's free). Follow these steps:
- Log into your WordPress dashboard and choose Plugins > Add New.
- Search for Jetpack.
- Find the listing "Jetpack by WordPress.com" and click Install Now (see Figure 1).
- Once the plug-in has downloaded, click Activate Now to activate it.
- When a banner appears at the top of your screen, alerting you to connect Jetpack with your WordPress.com account (see Figure 2), click the Connect to WordPress.com button to get started.
- Log into your existing WordPress.com account. (If you don't have one, you can set one up now.) Once you're logged into your WordPress.com account, you'll be redirected to your WordPress dashboard.
- To enable the sharing features, click Jetpack in your Dashboard sidebar and find the Sharedaddy block (see Figure 3). Click Configure.
- You'll see a list of available services and a list of enabled services. To enable Facebook sharing, drag the Facebook icon from the Available list to the Enabled list (see Figure 4).
- Click the triangle next to the Facebook icon in the Enabled list. From the drop-down list of available styles for your Facebook button, choose Share. This option will allow readers to post your articles directly to their news stream.
- Click Save Changes. A Facebook Share button will now appear below each of your posts (see Figure 5).
Figure 1 Search for Jetpack and find the listing for Jetpack by WordPress.com. Click Install Now to install the plug-in on your site.
Figure 2 Click the big green "Connect to WordPress.com" button to connect your self-hosted WordPress site to a WordPress.com account. Don't worryyou won't have to set up your blog in two places! The WordPress.com account is for administrative purposes only.
Figure 3 Find the Sharedaddy block and click Configure to set up sharing on your site.
Figure 4 To activate a service on your site, drag its icon from the Available Services section to the Enabled Services section. In this example I'm adding StumbleUpon, using the same process I did with Facebook and Twitter. Notice that you can also add Digg, Reddit, and other services.
Figure 5 Sharing buttons now appear on your site, without any modifications to your theme files.