Add the Facebook JavaScript SDK to WordPress to use the features of the Graph API and access all of Facebook's Social Plugins for Thesis, Genesis, etc.

Add the Facebook JavaScript SDK to WordPress

Written by in Tutorials |

This is part 3 of 7 in the Facebook Social Plugins series:

Facebook Developers LogoBy now you should have your Facebook app ID and the Open Graph protocol meta tags and namespaces added to your themes <head>. If not, check out parts 1 and 2 in the series. We’re going to be adding the JavaScript SDK asynchronously, which means it will load independently of the main flow of the page — it won’t block the loading of other elements. This is important for SEO as well as normal users of your site to ensure everything is as fast as possible.

The JavaScript SDK enables you to access all of the features of the Graph API and Dialogs via JavaScript. It provides a rich set of client-side functionality for authentication and rendering the XFBML versions of our [Facebook] Social Plugins. ~ JavaScript SDK

Add the SDK to WordPress

Be sure to add your Facebook App ID where indicated in red.

For General WordPress Users

Open up your themes single.php or equivalent file and right after the <body> tag add the following:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your_app_id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

For Thesis Theme Users

Open up your custom_functions.php file and add the following:

function add_facebook_sdk() {
	if (is_single()) { ?>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your_app_id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
	<?php }
}
add_action('thesis_hook_before_html', 'add_facebook_sdk');

Notice the if (is_single()). This means that we’re only adding the SDK to single post pages. We can change that to specify any number of pages we want. For instance:

  • if (is_single('43')) — this will target a single post with the ID of 43.
  • if (is_page('about')) — this will target the page with the slug “about”.
  • if (is_archive()) — this will target all archive pages.
  • if (!is_front_page()) — this will target all pages except the front page.

Enjoy this post? Consider sharing it:

  • http://www.shrinkthink.net Kylie Coulter

    Hi there,

    When I go into the single.php page there is no body tag. Where would I then paste this?

    Cheers.

    • http://designpx.com/ Jason Manheim

      Try header.php.

      • chetan

        can i use footer.php? place it before the body tag ends. It could speed up my site.

        • http://designpx.com/ Jason Manheim

          Shouldn’t really make a difference but yes, you can use your footer.php.

  • http://thebalancedlife.co.uk/ Nick

    I’m using Genesis, and I can’t find anywhere to put this! I’ve tried all the .php files etc, and can’t find a single tag, what to do? :(

    • http://www.facebook.com/vajrasar Vajrasar Goswami

      Maybe you can use genesis_before_header hook instead of

      thesis_hook_before_html written here and that will do the trick. I didn’t test it but it may do!