Adding Full Facebook Integration with the Thesis Theme for WordPress

readme.txt

// All HTML addins

- Add Facebook Like Button -

HTML
<fb:like></fb:like>

ATTRIBUTES
href – this is the page you want liked. If no URL is entered it defaults to the current page.
send – specifies whether to include a Send button with the Like button.
layout – there are 3 different layouts:
standard – displays social text to the right of the button and friends’ profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
button_count – displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
box_count – displays the total number of likes above the button (see example at beginning of this post). Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
show_faces – this toggles the faces on/off for the standard layout.
width – …umm…the width.
action – you can choose whether the button says ‘like’ or ‘recommend’.
font – options are: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, and ‘verdana’.
colorscheme – you can choose ‘light’ or ‘dark’.
ref – for tracking referrals. For instance, the ref on the like button above this post is ‘top’ and below is ‘bottom’. That way I know which button is being clicked more.

- Add Facebook Comments Box Plugin -

HTML
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="YOUR-SITE.com" num_posts="10" width="500"></fb:comments>

ATTRIBUTES
href – this is the URL for the comments plugin. Any news feed stories posted on Facebook will link bac to this URL.
width – the width of the comments box. Minimum is 500px.
num_posts – number of comments to show. The default is 10.


- Add Facebook Recommendations Plugin Shortcode -

Shortcode
[fbrecommend]

HTML
<fb:recommendations></fb:recommendations>

Attributes
site – the URL the plugin will base its recommendations on.
width – the width of the plugin box. Default is 300px.
height – the height of the plugin box. Default is 300px.
header – whether to show the “Recommendations” header.
colorscheme – like all Facebook plugins, the options are ‘light’ or ‘dark’.
font – ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, or ‘verdana’.
border_color – this option should be available to all plugins but sadly, it is not.
filter – you can filter which recommendation URLs to show by listing a term. It will search for your term in the first two path parameters of the URLs.
ref – for tracking referrals.

- Add Facebook Like Box Plugin Shortcode -

Shortcode
[fblb]

HTML
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

Attributes
href – the URL of the Facebook Page you want Liked.
width – the width of the plugin box. Default is 300px.
height – the height of the plugin box.
colorscheme – like all Facebook plugins, the options are ‘light’ or ‘dark’.
show_faces – show/hide profile photos of people who have Liked your Page. Default is true.
stream – show/hide a stream of the latests wall posts from the Page.
header – show/hide the Facebook header.

custom.css

/* Facebook Like Box */
.fb-like {
	float: right;
	margin: 0 0 5px 15px;
}

/* Facebook Comments Plugin */
.fb-comments {
	margin-top: 20px;
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	padding: 8px 10px;
}
.fb-count {
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: 400;
	color: #888;
}
.fb_comments_count {
	font-weight: 600;
	color: #333;
}

/* Facebook Recommendations Plugin */
.fb-recommendations {
	float: right;
	margin: 0 0 3px 15px;
}

/* Facebook Like Box Plugin */
.format_text .fb-likebox {
	border: 9px solid #eee;
	padding: 2px 2px 0 2px;
	margin-bottom: 15px;
}
.custom h3.join-fb {
	font-family: Georgia, serif;
	text-align: center;
	font-style: italic;
	color: #D7D7D7;
	font-size: 28px;
	margin: 0 0 -7px 0; /* you may have to tweak the negative margin */
	padding: 0;
	text-shadow: 1px 1px 0px #F1F1F1;
}

custom_functions.php

<?php

// Add Facebook Language Attributes

add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
  return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
  return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}

// Add Facebook Open Graph Tags

function add_facebook_open_graph_tags() {
	if (is_single()) {
	global $post;
	$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
	if (!$image)
		$image = 'http://YOUR-WEBSITE.com/YOUR-IMAGE.jpg';
	?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="<?php echo $image; ?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "thesis_description", true)); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:admins" content="YOUR-FACEBOOK-USER-ID"/>
<meta property="fb:app_id" content="YOUR-FACEBOOK-APP-ID"/>
<meta property="fb:page_id" content="YOUR-FACEBOOK-PAGE-ID"/>
	<?php }
}
add_action('wp_head', 'add_facebook_open_graph_tags', 99);

// Add Facebook SDK

function add_facebook_sdk() {
	if (is_single()) { ?>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'YOUR-FACEBOOK-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');

// Add Box Count Like Button to Right of Post (See CSS file for styling.)

function fb_like() {
	if (is_single()) { ?>
		<div class="fb-like"><fb:like layout="box_count" show_faces="false" send="false" width="55"></fb:like></div>
	<?php }
}
add_action('thesis_hook_before_post', 'fb_like');

// Add Facebook Comments (See CSS file for styling.)

function add_facebook_comments() {
	if (is_single()) { ?>
<div class="fb-comments"><fb:comments href="<?php the_permalink(); ?>" num_posts="20" width="580"></fb:comments></div>
	<?php }
}
add_action('thesis_hook_after_post', 'add_facebook_comments', '99');

// Add Facebook Recommendations Plugin Shortcode (See CSS file for styling.) - Adjust width and height as necessary.

function fb_recommendations() {
	return '<div class="fb-recommendations"><fb:recommendations site="http://zachbrowne.com/" width="300" height="300" header="true" font="" border_color="#d1d1d1"></fb:recommendations></div>';
}
add_shortcode('fbrecommend', 'fb_recommendations');

// Add Facebook Like Box Plugin Shortcode (See CSS file for styling.)

function fb_likebox() {
	return '<h3 class="join-fb">Join Us On Facebook</h3><div class="fb-likebox"><fb:like-box href="http://www.facebook.com/zbpage" width="578" show_faces="true" stream="false" header="false"></fb:like-box></div>';
}
add_shortcode('fblb', 'fb_likebox');