5 Simple Ways To Integrate Facebook To Your Weblog Powered By WordPress And Thesis

Facebook is an effective medium of marketing online. Its effectiveness can be evaluated by the traffic boost and marketing efforts employed in making a successful campaign. Its social marketing offerings in the form of social plugins and analytics outweighs the simplicity of Twitter campaign. While in the previous post we had seen four different ways to embed Twitter buttons, here are 5 simple ways to incorporate the Facebook advantage to your WordPress weblog.

  1. Add Official Facebook Like Button
  2. Add Official Facebook Send Button
  3. Add Floating Facebook Like And Send Button
  4. Embed Your Facebook Fan Page In Your WordPress Website
  5. Embed Facebook Comments Box In Your WordPress Weblog

Add Official Facebook Like Button

Facebook Like / Recommend button is the first step to integrate Facebook in your weblog. It enables you to provide a platform to your Facebook users to instantly like and share the content with their Facebook friends. Including the Facebook Like button on your website gives you and your product (content, service or physical product) a social marketing edge. Add the following code to your custom_functions.php (to appreciate the liking experience).


function fb_like()
{
if (is_single()) { ?>
<iframe src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=trebuchet+ms&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
<?php }
}

add_action('thesis_hook_after_post', 'fb_like');

As a general assumption, the users are more likely to like or share the content after scanning through the article. Therefore the above code allows you to place the like button at the end of the post. you can however hook it to any place of your preference. You can also feature the Facebook Like button on some specific posts only. Check out the article titled How to Add Facebook Like Button in selective WordPress Posts on WP Beginner.

Add Official Facebook Send Button

Unlike Like button, the Facebook Send button allows the users to send the content as private message to their friends, even those who do not have account on Facebook. Embedding the Send button is advantageous to you as it lets your content gets popular among the diversified visitors as well, i.e, other than Facebook users.  Add the following code to custom_functions.php to encourage sharing through FB Send button.


function fb_send()
{
if (is_single()) { ?>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="<?php echo get_permalink(); ?>" font=""></fb:send>
<?php }
}
add_action('thesis_hook_after_post', 'fb_send');

The above code places the Send button at the end of the post. You can however hook it at the beginning of the post as well by replacing the last line of code with:

add_action('thesis_hook_byline_item', 'fb_send');

Add Floating Facebook Like And Send Button

Many weblogs / websites feature floating buttons. There is no rocket science to it. It just requires you to add three lines to your stylesheet and you are good to show off your designing skills. If you are willing to add floating Facebook like and send button (to either left or right side), paste the following code to custom_functions.php. This includes the FB button code.


function fb_float()
{
if (is_single()) { ?>
<div class="fbutton">
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:like href="http://www.binaryturf.com" send="true" layout="box_count" width="450" show_faces="true"></fb:like>
</div>
<?php
}
}

add_action('thesis_hook_after_footer', 'fb_float');

To float the buttons you need to add the following code to custom.css. You will find custom.css in the same directory as custom_functions.php.


.custom div.fbutton{
left: 0px;
top: 50%;
position:fixed;
}

The above code floats the Facebook buttons to the left. You can float the buttons to right side by replacing left: 0px with right: 0px.

Embed Your Facebook Fan Page In Your WordPress Website

Facebook is good at providing options for actively promoting your website and Facebook fan page side by side. It offers you the flexibility of embedding your Facebook fan page to your WordPress website. Now this is called the true integration! Embed your Facebook fan page to your weblog to attract and gain more likes for the Facebook page from with the website itself.


function fb_like_box()
{
if (is_single()) { ?>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbinaryturf&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;height=290" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>
<?php }
}

add_action('thesis_hook_after_sidebars', 'fb_like_box');

The above code will enable you to add a teaser of your Facebook page which features a like button along with Facebook profile pictures of your Facebook fans and count of fan-followers.

Embed Facebook Comments Box In Your WordPress Weblog

You can also open up commenting on your WordPress weblog for non-logged in users as well. What better than the Facebook commenting system. Facebook features a social plugin called Comments which allow you to add Facebook comment box to your WordPress website. Add the following code to custom_functions.php to benefit from Facebook commenting system.


function fb_comment_box()
{
if (is_single()) { ?>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments href="http://www.facebook.com/binaryturf" num_posts="2" width="500"></fb:comments>
<?php }
}
add_action('thesis_hook_after_post_box', 'fb_comment_box');

The above code places the Facebook comment box after the post box but before the WordPress comment form.

Learn how to edit custom_functions.php here.

The Facebook advantage doesn’t ends with integration options. It is just the beginning to gain more exposure. Facebook insights are there to serve as the guidance for increasing your fan following. Keep watching this space for an in-depth insight into Facebook Insights (and other Facebook statistics) and how they cam help you in increasing your numbers. Meanwhile, how are you boosting your Facebook numbers?

 

Join 37,807 others and get free tutorials & tips on design & development using Wordpress on Thesis & Genesis!

Need help with Wordpress, Thesis or Genesis?

Are you a designer or a developer looking for a hand with Wordpress, Thesis or Genesis? Or perhaps want to save time with a project? Get in touch and let's get the ball rolling! Check out our Thesis development, PSD to Thesis & other services.

Comments on "5 Simple Ways To Integrate Facebook To Your Weblog Powered By WordPress And Thesis"

  1. says

    Hi love your site thanks for sharing some really good ideas for web development, which fits in great with a simple online marketing strategy. Over the months that have gone by, my partner has been working very smart adapting many of the steps outlined by you…

  2. says

    This is some really good stuff. I remember I had hard time integrating Facebook into my WordPress blog when I was newbie. So, this is really gonna help those newbies out here. Thanks for sharing this.

Comment on 5 Simple Ways To Integrate Facebook To Your Weblog Powered By WordPress And Thesis

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>