- Create a Facebook App ID For XFBML (and HTML5) Social Plugins
- Add Facebook Open Graph Protocol Meta Tags to WordPress
- Add the Facebook JavaScript SDK to WordPress
- Add Facebook Like Button to WordPress
- Add Facebook Comments Box to WordPress
- Add Facebook Recommendations Plugin to WordPress
- Add Facebook Like Box Plugin to WordPress
By 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.
Post Short Link:
