Facebook Like and Send

In the Artisteer Forum a question came up about the Facebook like and send buttons, the problem was where the code was added to a sidebar and the send dialog is hidden.

This is likely due to the stylesheet setting overflow:hidden, and the dialog box is wider than the sidebars, our sidebars are 220px, so we got thinking about adding a function for Facebook.

Why Bother 

This is the first thing that some people will say, “there are plugins out there that will do this and much more”, this bit of code is for those that would like to build it in, maybe to add value to a theme.

We carried out a quick analysis of what we want for this website and came up with a few options, and we decided to drop in a twitter “tweet” button as well.

On the home Page we want people to be able to just “like” the website and show the “Faces” but no Tweet or Send buttons, so we have a shortcode in the sidebar to cover this.

On pages we want to only add the “Tweet, Like and Send” to specific page content, we want to do this with a shortcode in the post and have no facebook in the sidebar.

On Posts we want the lot, in the post the “Tweet, Like and Send” and in the sidebar the “Like and Faces”, this we want to build into our loop-single.php or content-single.php, we do not have to do this we could just use a shortcode.

We can see the Facebook buttons on this page, so what would be the point of an image here, better have one though! 

facebook-like.php

We have the code in a file that we can add to any theme we want, the file is called facebook-like.php and it will reside in the themes main folder.

The full code is in the download: Facebook Like and Sent (613)

We will just look at the two functions, first the main function that returns the Facebook code.

This function accepts two parameters ($atts) for sidebar true or false and width for the different sidebars, and can be called from the page layouts.

The code will get the url for the home page, a page or post, other pages like search and archive an empty string is returned. 

function drfb_get_like($atts) {
 //Create the url link!
 $link="";
 if ( is_home() || is_front_page() ) $link = get_home_url();
 if ( is_page() || is_single() ) $link = get_permalink( $post->ID );

 //List pages return empty string
 if (!$link) return "";
 //Is it a sidebar
 $sidebar = ( isset( $atts['sidebar'] ) ? $atts['sidebar']  : 'false' );
 //make $atts idiot proof!
 if ( !$sidebar == 'true') $sidebar = 'false';

 //If Sidebar and Page return empty string
 if ( $sidebar == 'true' && is_page() ) return "";

 //Has a width been passed in?
 $width = ( isset( $atts['width'] ) ? $atts['width']  : 450 );
 //make $atts idiot proof!
 if ( !is_numeric($width) ) $width = 450;

 //Set the Defaults change if you want
 $like = "";
 $before = "";
 $after = "";
 if ($sidebar=='true') {
  $send='false';
  $faces='true';
 }else{
  //Add a twitter button first!
  if ( is_page() || is_single() ) {
   $like = $like .'<script src="<a href="http://platform.twitter.com/widgets.js">http://platform.twitter.com/widgets.js</a>" type="text/javascript"></script><div style="float:left; min-width:100px; padding-top:2px;"><a href="'.$link.'">Tweet</a></div>';
   $before='<div style="position:relative; margin-left:110px;">';
   $after='</div>';
  }
  $send='true';
  $faces='false';
 }
 //This bit is the Facebook Code
 $like = $like .$before;
 $like = $like .'<div id="fb-root"><script src="<a href="http://connect.facebook.net/en_US/all.js#xfbml=1">http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like</a> href="'.$link.'" send="'.$send.'"'.$margin.' width="'.$width.'" show_faces="'.$faces.'" font=""></fb:like>';
 $like = $like .$after;
 return $like;
}

 The next little function is the one that gives us the shortcodes, this then calls the first function for the facebook code.

function drfb_like($atts){
 $like = drfb_get_like($atts);
 if (! $like ) return "";
 return stripslashes($like);
}
add_shortcode('fblike', 'drfb_like');
add_filter('drfb_like', 'do_shortcode');

 Adding the File to functions.php

At the end of the themes functions.php we add a call to our file, only if it exists!

Note: if we were adding the file to a child theme the STYLESHEETPATH and not TEMPLATEPATH

/* Add a call to the Facebook Like File */
if (file_exists(TEMPLATEPATH. '/facebook-like.php')) include_once(TEMPLATEPATH. '/facebook-like.php');

single.php (Optional)

For our single posts we could add the code in the loop of our single.php, in Twenty Ten it would be loop-single.php in the latest Artisteer it would be in the content-single.php.

Other themes and older themes will be different, so we can only add a code pointer here and will use the twenty ten file.

We want our “Like and Send” buttons under the title and top post meta in a <div>, here is where we would add it in twenty ten, loop-single.php our call is lines 5-7

</div><!-- .entry-meta -->
     <div style="margin-top:10px;">
     <?php echo drfb_get_like( array( 'sidebar' => 'false' ) ); ?>
     </div>
     <div>

Sidebars Shortcodes

In the sidebar we add a text widget and just add our shortcode, only need the width if display is not right.

Pages or Posts Shortcode

In the Pages we can add a shortcode just to pages we want to share, we would not share the T&C’s page, and we just add our shortcode, only need the width if display is not right.

Facebook Likes

The Like button provides a nice little bit of viral marketing, anyone looking at the activity of someone that liked a page or post on your website will see a link, if they visit and like it can lead to more traffic.

Someone that visits your site and Facebook likes a post or page will likely have contacts with the same interests creating a viral marketplace.

  

Thats all for this one, we did have some problems with Internet Explorer and the Share Button but there is not much we can do about that one.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

3 thoughts on “Facebook Like and Send

  1. Hi David,
    Thanks for the tetorial, and it was very helpful, i would like to know how we can use Google +1 code instated of tweeter or can also combine +1 code in this segment.
    thanks
    Rajesh.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Blog

Read More