Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

How To Integrate Facebook, Twitter And Google+ In WordPress

Integrating social media services in your website design is vital if you want to make it easy for readers to share your content. While some users are happy with the social media buttons that come built into their design template, the majority of WordPress users install a plugin to automatically embed sharing links on their pages. Many of you will find that a plugin does exactly what you need; others not so much. Some are poorly coded, and most include services that you just don’t need. And while some great social media plugins are out there, they don’t integrate with every WordPress design.

You may want to take a look at the following related posts:

If you aren’t comfortable editing your WordPress templates, a plugin is probably the best solution. If you are comfortable making a few edits to your theme, then consider manually integrating social media so that you have more control over what services appear on your website.

The Big Three: Twitter, Facebook, and Google+4

Today, we’ll show you how to manually integrate the three most popular social media services on your website: Twitter, Facebook and Google+. First, you’ll learn how to integrate Facebook comments on your WordPress website, to make it easier for readers to discuss your posts. Then, we’ll show you the most common ways to display your latest tweets in the sidebar, which should encourage more people to follow you on Twitter. Finally, we’ll show you how to add sharing buttons for all three social media services to your home page, posts and pages.

Please make sure to back up all of your template files before making any changes, so that you can revert back if something goes wrong. Testing your changes in a non-production area first would also be prudent.

Integrate Facebook Comments On Your Website Link

Because most people are signed into Facebook when they browse the Web, enabling Facebook comments on your website is a great way to encourage people to leave comments. It also curbs spam. While many solutions purport to reduce spam comments on WordPress, most are either ineffective or frustrate visitors by blocking legitimate comments.

Feature-rich commenting solutions such as IntenseDebate5 and Disqus6 have benefits, of course, because they allow users to comment using Facebook and a number of other services; but before visitors can comment, they have to grant access to the application, an additional step that discourages some from commenting. By comparison, integrating Facebook comments directly enables visitors to comment with no fuss. Also, this commenting system allows users to comment by signing into Facebook, Yahoo, AOL or Hotmail.

Before integrating Facebook on WordPress Mods7 at the end of September, I looked at a few solutions. I followed a great tutorial by Joseph Badow8 and tried a few plugins, such as Facebook Comments For WordPress9. The reality, though, is that the official Facebook comment plugin10 is the quickest and easiest way to add Facebook comments to your website.

Simply follow the steps below to get up and running.

1. Create a Facebook Application Link

To use Facebook comments on your website, create a new comment application for your website on the Facebook Application11 page. This step is required, whether you add Facebook comments manually using a third-party plugin or with the official Facebook plugin.

Simply click on the “+ Create New App” button on the Facebook Application page, and enter a unique name for your application in the “App Display Name” field. The “App Namespace” field doesn’t have to be filled in for Facebook comments (it’s used with the Facebook Open Graph Protocol12).

Create Facebook App13

You will then be provided with an “App ID/API key” and an “App secret key.” You don’t need to remember these numbers because the official Facebook comments plugin14 automatically inserts them into the code that you need to add to your website.

Create Facebook Application15

2. Add the Code to Your Website Link

Next, go back to the Facebook Comments plugin16 page and get the code for your website. The box allows you to change the URL on which comments will be placed, the number of comments to be shown, the width of the box and the color scheme (light or dark).

Customise Facebook17

You don’t have to worry about what you enter in the box because all of the attributes can be modified manually. And it doesn’t matter what URL you enter because we will be replacing it later with the WordPress permalink:

  • href
    The URL for this Comments plugin. News feed stories on Facebook will link to this URL.
  • width
    The width of the plugin in pixels. The minimum recommended width is 400 pixels.
  • colorscheme
    The color scheme for the plugin (either light or dark).
  • num_posts
    The number of comments to show by default. The default is 10, and the minimum is 1.
  • mobile (beta)
    Whether to show the mobile version. The default is false.

When you click on the “Get Code” button, a box will appear with your plugin code (choose the HTML5 option, because FBML is being deprecated). Make sure to select the application that you set up earlier for your comments so that the correct application ID is added to the code.

Get Facebook Application Code18

Insert the first piece of code directly after the <body> tag in your header.php template:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Put the second line of code where you want to show the comments. Make sure the static URL is replaced with the WordPress permalink (<?php the_permalink(); ?>) so that comments show correctly on every page of your website.

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="15" data-width="500"></div>

To put Facebook comments above WordPress comments, add the above code just below the line that reads <!-- You can start editing here. --> in the comments.php template. To put Facebook comments below WordPress comments, add the above code below the </form> tag (again in the comments.php template).

If you plan to completely replace your WordPress comments with Facebook comments, simply replace the call to your comments.php template with the call to your Facebook comments. For example, to replace comments in posts, simply add the code to the single.php template. Similarly, edit the page.php template to show Facebook comments on pages.

Facebook Comments19

Your should now see the Facebook comments box displayed on your website. To get an update whenever someone leaves a comment using Facebook, add yourself as a moderator to your application on the Comment Moderation tool20 page.

Show Your Latest Tweets In The Sidebar Link

Displaying your latest tweets is a good way to encourage people to follow you on Twitter. The most common place to display tweets is in the sidebar, although you can add them to any area of the website.

Display Your Latest Tweets Manually Link

I have tried a few manual solutions for showing tweets on my websites, and my favorite comes from Chris Coyier of CSS-Tricks21. His RSS fetching snippet22 is a quick and effective way to show the latest tweets from your account. The RSS address of your Twitter23 account is (where xxxxx is your Twitter user name). For the tweets that you favorite, use For example, the RSS for the latest tweets from Smashing Magazine is; and to display only the favorites, Once you’ve got your Twitter RSS address, simply add it to Chris’ PHP snippet.

include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);

<?php if ($maxitems == 0) echo '<li>No items.</li>';
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
<?php endforeach; ?>

For a more stylish way to display tweets manually, check out Martin Angelov’s tutorial “Display Your Favorite Tweets Using PHP and jQuery24,” or Sea of Cloud’s “Javascript Plugin Solution.”

Display Your Latest Tweets Using the Official Twitter Widget Link

The official Twitter profile widget looks great and is easy to customize. You can define the number of tweets to display and whether the box should expand to show all tweets or provide a scroll bar.

The dimensions can be adjusted manually, or you can use an auto-width option. The color scheme can easily be changed in the settings area, too. Once the widget is the way you want it, simply grab the code and add it to the appropriate WordPress template.

Official Twitter Profile Widget

Display Your Latest Tweets Using a WordPress Plugin Link

If you don’t want to code things manually or use the official Twitter profile widget, you could try one of the many plugins available:

Add Social-Media Sharing Buttons To Your WordPress Website Link

Adding social-media sharing and voting buttons is very straightforward and enables readers to share your content on the Web. Simply get the code directly from the following pages:

The buttons you get from the above links work well when added directly to posts (single.php) and pages (page.php). But they don’t work correctly on the home page (index.php) or the archive (archive.php) by default, because we want to show the number of likes, pluses and retweets for each individual article, rather than the page that lists the article. That is, if you simply add the default code to index.php, every button will show the number of shares for your home page, not for each article.

To resolve this, simply make sure that each button uses the article permalink, rather than the URL of the page it is on. To add sharing buttons only to posts, simply choose the button you want from the links above and copy the code to single.php; to add the buttons only to pages, just add the code to page.php.

To show the number of likes, pluses and retweets that an article has on the home page and in the archives, follow the steps noted below for Facebook, Google+ and Twitter below (the code for showing a sharing button on the index page will work for posts and pages, too). You can see an example of sharing buttons integrated in post excerpts on my own website WordPress Mods33 and on popular blogs such as Mashable34.

Social Media Sharing Buttons Example35

Facebook Link

Facebook’s Like button36 comes with a lot of options. Choose from three layouts: standard, button count and box count. An email button (labelled “Send”) can be added, and you can set the width of the box, too. You can also show profile pictures below the button, choose between the labels “Like” and “Recommend,” choose between a light and dark color scheme, and set the font.

Customise Facebook37

You need to add two pieces of code to your website. First, add the JavaScript SDK code directly after the <body> tag (in the header.php template). This code has to be added only once (i.e. if you’ve already added the code to show Facebook comments on your website, you don’t need to add it again).

Put the second piece of code where you want to show the Like button. To ensure that the correct page is referenced, add href="<?php echo get_permalink($post->ID); ?>" to the second piece of code. It should look something like this:

<div class="fb-like" data-href="" href="<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>

More information on how to customize the Like button can be found on the Facebook Like Button page38.

Google+ Link

Google+3931 offers four sizes of sharing buttons: small, medium, standard and tall. The number of votes that a page has received can be shown inline, shown in a bubble or removed altogether.

Customise Google+40

Linking to your article’s permalink is very easy. Just append href="<?php the_permalink(); ?>" to the g:plusone tag. For example, to show a tall inline Google+ button, you would use the following code:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

For more tips on customizing the Google+ button, please view the official Google+ button documentation page41.

Twitter Link

Twitter4232 offers four types of buttons: one for sharing links, one for inviting people to follow you, a hash tag button for tweeting stories, and another for mentions (used for contacting others via Twitter). The button you need to show the number of shares that an article has gotten is called “Share a link.”

On the button customization page, you can choose whether to show the number of retweets and can append “Via,” “Recommend” and “Hashtag” mentions to the shared link.

Customise Twitter43

To make sure Twitter uses the title of your article and the correct URL, simply add data-text="<?php the_title(); ?>" and data-url="<?php the_permalink(); ?>" to your link. For example, if you were using the small button, you would use:

<a href="" class="twitter-share-button" data-via="smashingmag" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];

To show the larger button instead, simply append data-size="large" to the link. To show the popular vertical button (shown below) instead of the default horizontal button, append data-count="vertical" to the link.

Twitter Vertical Button44

For more tips on customizing the Twitter button, please view the official Twitter button documentation page45.

Summary Link

Many WordPress users continue to use plugins to integrate social-media sharing buttons and activity on their websites. As we’ve seen, though, integrating social-media services manually is straightforward and, for many users, a better solution than simply installing a plugin and making do with whatever features it offers.

Integrating Facebook comments on your website takes only a few minutes and is much less complicated than any of the available plugins. While good tutorials are available that show you how to manually add Twitter to your website, the official widget from Twitter is the best all-around solution for most websites.

Some fantastic plugins exist for WordPress to automatically insert social-media voting buttons in your design. Installing and setting them up takes only a few minutes, although manually adding the buttons enables you to give them maximum visibility.

Remember, play it safe and make any changes in a test area first before applying the changes to the live website. I also recommend backing up all of your template files before changing anything (and your database if required). A few minutes of preparation could save you hours of troubleshooting, so try not to skip this step.

Hopefully, you’ve found this useful. If you are unsure of any aspect of this tutorial, please let us know and we’ll do our best to clarify the step or help you with it. Also, subscribe to Smashing Magazine via RSS46, Twitter47, Facebook48 or Google+49 to get the latest articles delivered directly to you.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49

↑ Back to top Tweet itShare on Facebook


Kevin Muldoon is a Scottish webmaster and blogger who currently lives in South America. His labour of love is WordPress Mods; a blog which focuses on WordPress Themes, Plugins, Tutorials, News, Modifications.

  1. 1

    Any ideas on automatically pushing posts from WordPress directly to Facebook (ie, without having to use a share button)? Some clients prefer to spend as little time as possible in Facebook so getting them to log in, then post, then share can be tough.

    I use the NetworkedBlogs Facebook App, but when the Facebook user clicks on the link, it only displays the WordPress post in what appears to be an iFrame on NetworkedBlogs’ site, and you have to click the remove frame button to go to the actual post.

    I know there’s also some WP plugins out there to push posts to Facebook, what do folks use?

    • 2

      I’ve been using this one:

      It sends automatically to Facebook and integrates likes, comments, etc. There are a lot of more options to check.

      Great post! I want to like Google+ but it still feels sorta of empty overall and I don’t know if enabling it on my sites is good or just adds clutter

      • 3

        Looks like a decent plugin. I like the idea of copying facebook comments to the WordPress database.

    • 4

      Hi Nick,

      I use RSS Graffiti on my facebook page. It works great. You simply enter your feedurner or rss feed url and it automatically publishes your latest posts directly to it. I’ve been using it for a long time and never had any problems.


    • 5

      Yeah, we ran into the same thing…would also be interested in this.

    • 6

      You can use Buffer to post to facebook.

  2. 7

    Karen Thompson

    January 19, 2012 10:16 am

    I agree with Nick. Would love to know the simplest way of pushing WordPress posts out to social media, rather than the other way around. If clients could post to WordPress and have their social media updated seamlessly without having to follow another step, that would be awesome!

    • 8

      Kevin Muldoon

      January 19, 2012 2:19 pm

      I can understand the need for this from a client point of view. It really only takes seconds to install RSS graffiti for facebook and you can login to twitterfeed using your google account (or many other applications) and set up twitter updates in a minute or two.

  3. 9

    This post popped up exactly when I needed it to – talk about luck and time-saving! Thanks!

  4. 10

    Nice post Kevin, basic and userfull !!

  5. 11

    Some nice tips and more importantly code there – especially the simple RSS Twitter code. Thanks

  6. 15

    Ah yes… the holy grail: I post on my blog and it automatically posts to G+, Facebook, and Twitter. How do I achieve such a lofty goal?

  7. 18

    Thanks Kevin for the goodliness!

    PS Love the new site design.

  8. 20

    My favorite plugins for these integration:

    Simple Facebook Connect – Has all what you need. FB OG Meta Data, FB Login, FB Comments, FB Like Buttons, FB Like Box etc.

    Simple Twitter Connect – Has all what Twitter Anywhere has to offer… Hovercards, Twitter Connect and much more.

    For recent tweets, nothing beats the Seaofclouds jQuery script.

    For Google+ – still in beta SImple Google Connect.

    All plugins are by same author Otto (very smart guy)…

    Don’t try to manually do everything when a powerhouse plugins like above can take care of it all for you.

  9. 21

    Awesome post, this is the type of quality content I like to see on Smashing. Am I the only one who thinks people DON’T like the facebook comment system and would rather use a screen name? What is this site using I like it :)

  10. 22

    Kevin Muldoon

    January 19, 2012 2:21 pm

    Glad you all enjoyed the post. Make sure you stay subscribed to Smashing Magazine as I have a good post on social media plugins coming soon :)

  11. 23

    Awesome post Kevin, you’ve made my day! :)
    I found a little mistake in the twitter example you’ve posted.
    There’s a missing “d” in first line: “ata-text” must be “data-text”. :)

  12. 25

    Very helpful and timely article as I’ve been struggling with this for a couple months now, trying to figure out the best way to integrate Facebook into my site. Also, the recommendation in the comments section regarding RSS Graffiti will help a lot.

    • 26

      Kevin Muldoon

      January 19, 2012 5:32 pm

      I believe there are few options available Steve however I’ve not had any problems with RSS Graffiti so I recommend trying that out first and if it doesn’t do what you want to do look for something else.

  13. 27

    Anyone found a nice way to add your google plus posts to wordpress ? or your google plus shares ? I’m trying to bring in my google reader shares on my wordpress blog.

  14. 28

    I made a pretty simple little twitter feed class last year that I use on websites. Basic and has some simple functionality to add specifics…

    Greta post by the way. I’ll be looking at uses a few of the suggested plugins above :) Thanks!

  15. 29

    Hey, great article, maybe you forgot “;” after the permalink() in the facebook comment section.


  16. 31

    Henry Hoffman

    January 20, 2012 1:12 am

    Thanks for the post – I’ll bookmark this as reference, as there seems to be so many solutions it’s often hard which to choose.

    I also use the Most Shared Posts plugin, which automatically counts post shares, then adds them as meta data, allowing me to alter the loop to sort by that meta value. Really useful for sorting posts by shares.

  17. 32

    Great article.Really niec work.Keep good working.Thank you for sharing.

  18. 33

    Thanks for this article which is up to Smashing’s usual high standards.

    But having read the headline I was hoping this would be the article that finally tells me how to unify logins between Facebook/Twitter/Google+ and WordPress.

    I have thousands of registered users on my WordPress site and would like them to be able to connect their Facebook/Twitter/Google+ accounts with them.

    This would allow them to be automatically logged in to their accounts on my site when they visit, and have the option of cross-posting their comments to whichever social platforms they choose.

    I’m sure if Smashing were to tackle the subject of this kind of deep integration you’d have a very successful and popular article on your hands. And one very grateful reader!

    • 34

      Kevin Muldoon

      January 20, 2012 7:50 am

      Hi Notpoppy,

      I’ll send an email to Smashing Magazine about this. I’d be happy to tackle this subject and look into the plugin solutions available for WordPress that let users connect using social media websites.


      • 35

        Quick update. Smashing Magazine want me to proceed with this article. Thanks for the suggestion. I’ll be working on the article over the weekend so hopefully it will be published over the next week or so :)

      • 36

        Now that’s what I call listening to your users! Look forward to seeing it, thanks Kevin. If I can be of any assistance do drop me an email.

  19. 37

    Great article! Thanks

  20. 39

    Many many thanks! I have just started to mess around with themes so all this info was a real treat!


↑ Back to top