Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Blogs

WordPress Basics: Adding Facebook Integration to Your WordPress Site

  • Print
  • + Share This
  • 💬 Discuss
Let your WordPress readers share your content with their Facebook friends. Follow these quick steps from Jessica Neuman Beck, coauthor of WordPress Visual QuickStart Guide, Second Edition, to give your content new life on the social network everyone is using.

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:

  1. Log into your WordPress dashboard and choose Plugins > Add New.
  2. Search for Jetpack.
  3. Find the listing "Jetpack by WordPress.com" and click Install Now (see Figure 1).
  4. Once the plug-in has downloaded, click Activate Now to activate it.
  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.

  6. 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.
  7. 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.
  8. 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 worry—you won't have to set up your blog in two places! The WordPress.com account is for administrative purposes only.

  9. To enable the sharing features, click Jetpack in your Dashboard sidebar and find the Sharedaddy block (see Figure 3). Click Configure.
  10. Figure 3 Find the Sharedaddy block and click Configure to set up sharing on your site.

  11. 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).
  12. 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.

  13. 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.
  14. Click Save Changes. A Facebook Share button will now appear below each of your posts (see Figure 5).
  15. Figure 5 Sharing buttons now appear on your site, without any modifications to your theme files.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus