How To Integrate Facebook, Twitter And Google+ In WordPress

Advertisement

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.

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

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.

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

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 IntenseDebate2 and Disqus3 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 Mods4 at the end of September, I looked at a few solutions. I followed a great tutorial by Joseph Badow5 and tried a few plugins, such as Facebook Comments For WordPress6. The reality, though, is that the official Facebook comment plugin7 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

To use Facebook comments on your website, create a new comment application for your website on the Facebook Application8 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 Protocol9).

Create Facebook App10

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 plugin11 automatically inserts them into the code that you need to add to your website.

Create Facebook Application12

2. Add the Code to Your Website

Next, go back to the Facebook Comments plugin13 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 Facebook14

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 Code15

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); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
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 Comments16

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 tool17 page.

Show Your Latest Tweets In The Sidebar

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

I have tried a few manual solutions for showing tweets on my websites, and my favorite comes from Chris Coyier of CSS-Tricks18. His RSS fetching snippet19 is a quick and effective way to show the latest tweets from your account. The RSS address of your Twitter20 account is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx (where xxxxx is your Twitter user name). For the tweets that you favorite, use http://twitter.com/favorites/xxxxx.rss. For example, the RSS for the latest tweets from Smashing Magazine is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag; and to display only the favorites, https://twitter.com/favorites/smashingmag.rss. Once you’ve got your Twitter RSS address, simply add it to Chris’ PHP snippet.

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>

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

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

Display Your Latest Tweets Using the Official Twitter Widget

The official Twitter profile widget23 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 Widget24

Display Your Latest Tweets Using a WordPress Plugin

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

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 Mods35 and on popular blogs such as Mashable36.

Social Media Sharing Buttons Example37

Facebook

Facebook’s Like button38 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 Facebook39

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="http://www.facebook.com/smashmag" 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 page40.

Google+

Google+4133 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+42

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 = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

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

Twitter

Twitter4434 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 Twitter45

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="https://twitter.com/share" 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];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

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 Button46

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

Summary

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 Twitter48 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 RSS49, Twitter50, Facebook51 or Google+52 to get the latest articles delivered directly to you.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2012/01/19/facebook-twitter-google-wordpress/
  2. 2 http://intensedebate.com/
  3. 3 http://disqus.com
  4. 4 http://www.wpmods.com/facebook-comments-added-to-wpmods/
  5. 5 http://wp.tutsplus.com/tutorials/add-facebook-comments-to-your-wordpress-theme/
  6. 6 http://wordpress.org/extend/plugins/facebook-comments-for-wordpress/
  7. 7 http://developers.facebook.com/docs/reference/plugins/comments/
  8. 8 https://developers.facebook.com/apps
  9. 9 http://developers.facebook.com/docs/opengraph/
  10. 10 https://developers.facebook.com/apps
  11. 11 http://developers.facebook.com/docs/reference/plugins/comments/
  12. 12 https://developers.facebook.com/apps
  13. 13 http://developers.facebook.com/docs/reference/plugins/comments/
  14. 14 http://developers.facebook.com/docs/reference/plugins/comments/
  15. 15 http://developers.facebook.com/docs/reference/plugins/comments/
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2012/01/facebook-comments.png
  17. 17 http://developers.facebook.com/tools/comments
  18. 18 http://css-tricks.com/snippets/wordpress/display-rss-in-wordpress/
  19. 19 http://css-tricks.com/snippets/wordpress/display-rss-in-wordpress/
  20. 20 http://seo-alien.com/tips-and-tricks/find-twitter-rss-feed/
  21. 21 http://tutorialzine.com/2011/08/display-favorite-tweets-php-css/
  22. 22 http://tweet.seaofclouds.com/
  23. 23 https://twitter.com/about/resources/widgets/widget_profile
  24. 24 https://twitter.com/about/resources/widgets/widget_profile
  25. 25 http://wordpress.org/extend/plugins/cardoza-twitter-box/
  26. 26 http://wordpress.org/extend/plugins/floating-tweets/
  27. 27 http://wordpress.org/extend/plugins/latest-twitter-sidebar-widget/
  28. 28 http://wordpress.org/extend/plugins/my-twitter-ticker/
  29. 29 http://wordpress.org/extend/plugins/tweet-blender/
  30. 30 http://wordpress.org/extend/plugins/twitter-plugin-for-wordpress/
  31. 31 http://wordpress.org/extend/plugins/twitter-widget-pro/
  32. 32 http://developers.facebook.com/docs/reference/plugins/like/
  33. 33 http://www.google.com/webmasters/+1/button/
  34. 34 https://twitter.com/about/resources/buttons
  35. 35 http://www.wpmods.com
  36. 36 http://www.mashable.com
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2012/01/social-media-index.png
  38. 38 http://developers.facebook.com/docs/reference/plugins/like/
  39. 39 http://www.google.com/webmasters/+1/button/
  40. 40 http://developers.facebook.com/docs/reference/plugins/like/
  41. 41 http://www.google.com/webmasters/+1/button/
  42. 42 http://www.google.com/webmasters/+1/button/
  43. 43 https://developers.google.com/+/plugins/+1button/
  44. 44 https://twitter.com/about/resources/buttons
  45. 45 https://twitter.com/about/resources/buttons
  46. 46 https://twitter.com/about/resources/buttons
  47. 47 https://dev.twitter.com/docs/tweet-button
  48. 48 https://twitter.com/about/resources/widgets/widget_profile
  49. 49 http://rss1.smashingmagazine.com/feed/
  50. 50 http://twitter.com/smashingmag
  51. 51 http://www.facebook.com/smashmag
  52. 52 https://plus.google.com/116812091267698107544

↑ 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.

Advertising
  1. 1

    Good morning. I followed your procedure and it works perfectly Facebook in each posts. However I see a little problem. On Google SEO tools I noticed a red indicating a synchronous script facebook too greedy. What do you think? Thank you for your response.

    1
  2. 52

    gratest tutorial! how we can make a wirget to show the latest facebook comments??? thax a lot!

    0
  3. 103

    Hi Kevin, I am a newbie and I wonder if it is possible to use these solutions in a multilingual multisite environment. Thanks for the great post.

    0
  4. 205

    I cannot argue with the excellent content your blog has to supply and for that reason I desire to say thanks

    1
  5. 256

    Vladimir Prelovac

    February 15, 2012 7:13 am

    Great post Kevin! What plugins help you add twitter and like buttons to your RSS feed?

    1
    • 307

      Thanks Vladimir :)

      Feedburner natively adds Facebook, Digg and a few other sharing links (not Google+ though). If you login to your Feedburner account you’ll find an option under publicize/socialize that allows you to connect your twitter account too.

      0
  6. 358

    Something I have to remind myself of: When things don’t go as expected, go back and re-read the instructions to find the step I missed. Thanks for this post.

    -2
  7. 409

    Bit disappointed that there was no optimization techniques for the sharing buttons.. Especiallt twitter/ widgets.js.. it kills loading time on large traffic sites

    1
  8. 460

    Wonderful article, it is very helpful to have this type of tutorial focused, concise and to the point.

    I noticed that Jonas commented above about using the API to utilize your own custom buttons, instead of the default ones provided. Does anyone know of a good place to learn about using the API for this? I have a situation where for a client’s site, I am working with a designer who would most likely love to use their own custom graphics for the FB and Twitter share functions. I know from Google searches that the share functionality has been deprecated by FB – it seemed one used to be able to simply place some code in the a href tag, and use the sharer.php functionality. Now, it is more complicated and I can’t seem to find a quality tutorial on how to proceed down this more customized path. (Hint: maybe another good follow up tutorial for Smashing Magazine :) ).

    Thanks again for this article, it will promptly be placed in my bookmark list.

    0
  9. 511

    Hi Kevin,
    Thank you for posting this wonderful tutorial and i have some doubts can you please show me how to add the COVER PHOTO in newly created page and in newly launched FB page version? I saw in help but I Could not find that option here is the reference link -How-do-I-add-a-cover-photo-to-my-Facebook-Page? ” If you know the answer please mail me or post it here itself. it will be a great help for me.
    Thank You

    0
  10. 562

    I put the facebook comment system in place on our new site last night and I’m having one issue. When a person comments on the post, it gives the main URL to the website via Facebook, not the URL of the post. It seems inconvenient to think that people will have to try to locate the post a friend commented on after clicking a link on Facebook. Is there a remedy for this? The blog is http://www.collisioncm.com/blog. Any advice on this issue would be amazing!

    0
  11. 664

    Hi Kevin Muldoon.

    This was a great tutorial. Really helpfull.
    Now I have the social buttons well integrated in my site. With no problems, working in categories, single post and whatever. Thank you for this

    0
  12. 715

    @Ryan There’s an option just under the large cover photo that lets you change it. You should see it just above your comment area on your page.

    0
  13. 766

    Thanks Kevin,

    The way you have written the article with supporting images, I really appreciate. I am going to try adding Google+ and Twitter widget on my sidebar as per your article.

    Thanks.

    0
  14. 817

    Hi, I need a help in my website. I want to show my facebook username in my website weather its logged in or not. Is it possible. Please give suggestions. I need the same to other social media twitter and google plus. Thanks is advance

    -1
  15. 868

    While using the facebook comment mechanism, the major drawback is that you are not the owner of those comments. The comments are being hosted in Facebook.

    I have enabled facebook comments on my website http://theopennews.in . Is it possible to get those comments to my website, if i chose to stop using the facebook comment mechanism ?

    0
  16. 919

    Thanks for the article. The supporting images are easy to understand and I love the way you have organized them.I am going to integrate Facebook comments on my website.

    1
  17. 970

    Great post, Kevin. Thanks for the foolproof instructions!

    0
  18. 1021

    Facebook recently released their own WordPress plugin… works like a charm!

    1
  19. 1072

    I assume this post is pretty old but did anyone noticed that the twitter official widgets create a code that is not working?
    https://twitter.com/about/resources/widgets/widget_profile
    I went to create a simple widget for my website, copied the code provided, put it in my HTML website and it is not showing the twitter stream!

    This is the code provided by twitter by the way:

    Tweets by @any-account
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);

    Does anyone have the same issue? can anyone help?
    Thanks, Gil

    0
  20. 1123

    I have enabled the twitter side with my latest posts with a widget, is there a plugin for the facebook comments? I just need home buyers to post comments on homes they have seen for sale. Editing the code directly after the tag in the editor I am worried that something would mess up.

    0
  21. 1174

    Hi
    I’ve been using the simple twitter feed for a while now and its been fine but the site is now breaking and im getting an error on all the sites I have used it on.

    Fatal error: Call to undefined method WP_Error::get_item_quantity()

    Any one have any idea? thanks in advance.

    Great post btw, very useful well written!

    0
  22. 1225

    I don’t know if this is possible. I want to embed/integrate my book gallery (the books I have added that I have read and recommend) on my facebook page…… into my wordpress.org site as a plug in on a separate page in wp if possible?

    Can anyone advise? I see lots of help for adding likes, photo gallery and adding posts into wp but I can’t see how one would add their books, or their films?

    0
  23. 1276

    I set up the FB App and installed the comments using a plugin, Facebook Comments Notifier.

    However, it’s ugly. My site is medium blue, the comments box can only be geared to “light” or “dark”. The dark is closest to my site, but the big charcoal-colored box in the middle of my all-blue site is not very nice to look at.

    Can’t understand why plugin developers don’t include a way to let you match the comments box & text, etc., to your own web site.

    I’m sufficiently annoyed by this that I will probably delete it, if I can’t find an easy solution to this “ugly” app.

    Thanks for your time.

    -2
  24. 1327

    WP Social Press is a great theme that you can use for any blog or business website that’s both easy to use and setup even if you’re new at internet marketing.

    1
  25. 1378

    thanx for the guide to FB app

    1
  26. 1429

    “Eocean is a leading Mobile Value added Services company that provides comptetitive edge to enterprises by blending the power of mobile communication technology with mobile/web applications.” http://www.eocean.pk/

    1

↑ Back to top