Posted by: Will Strohl
8/14/2010 10:01 PM 

Someone on the DotNetNuke Forums asked recently how to add a Like Button for Facebook to their blog.  They mentioned something that I had also found out – the Windows Live Writer plugin that’s supposed to do it, but doesn’t work.  So how can us DotNetNuke users add a Facebook Like Button to our blogs?

What is a ‘Like’ Button?

A Like Button is an interactive button provided by Facebook, which allows you to instantly “like” a page, and reflect this in your Facebook profile for all of your friends to see.  These buttons look something like the image below.

Clicking “like” shows that you liked the page, and who and how many other people have.  Facebook allows anyone with a web page to be able to add this as an element on their site.

Get the Like Button Code Code

Use the form Facebook provides to generate the base code needed for your button.  It allows you to change a few of the options that are available to you, making the button work like you want.  When you generate your button, leave the URL blank.

You should end up with something like this:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" 

    scrolling="no" frameborder="0" 

    style="border:none; overflow:hidden; width:450px; height:80px;" 

    allowTransparency="true">iframe>

Alter the Code

The default code won’t work for any site or any page though.  The URL in the SRC attribute of the resulting IFRAME points to an imaginary page.  However, this gets slightly more complicated.  In a dynamic site, you need to be able to change the value of the URL on-the-fly, per page load.  We need to make room for that.

First, add an ID attribute to the IFRAME.  In my example, I named the IFRAME “ifFacebook” in the ID attribute.  (If your implementation is going to have this code snippet appear on the page more than once, use a CLASS attribute instead.)

This ID attribute will allow us to manipulate this specific IFRAME element on the page with the greatest of ease.

Next, remove the “href” key/value pair from the URL that’s in the SRC attribute.  Add “&href=” to the end of the remaining URL.  Your code should look similar to the following now.

<iframe id="ifFacebook" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" 

    scrolling="no" frameborder="0" 

    style="border:none; overflow:hidden; width:450px; height:80px;" 

    allowTransparency="true">iframe>

Lay Down Some jQuery

jQuery is the most convenient and easiest way to dynamically change the IFRAME element to work, by adding the current URL that the element is on.  What makes it even more awesome, is that it comes prepackaged with DNN!

We need a snippet of jQuery that automatically injects the URL of the current page into the Facebook IFRAME we have.  Something like this will do:

var currentURL = encodeURIComponent(location.href);

jQuery(document).ready(function(){ 

    jQuery('#ifFacebook').attr('src', jQuery('#ifFacebook').attr('src') + currentURL); 

});

The above snippet first URL-encodes the current URL, and then appends it to the end of the existing value in the SRC attribute of the IFRAME.

Putting It All Together

Now that we have the two pieces of the code that we need, this is what it looks like when you put it together:

<iframe id="ifFacebook" src="http://www.facebook.com/plugins/like.php?show_faces=true&width=450&action=like&colorscheme=light&height=80&href=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true">iframe>
<script language="javascript" type="text/javascript">
    var currentURL = encodeURIComponent(location.href);
    jQuery(document).ready(function(){ jQuery('#ifFacebook').attr('src', jQuery('#ifFacebook').attr('src') + currentURL); });
script>

Your code might look slightly different, depending on the Like Button options you chose, and how you implemented the ID and/or CLASS attributes in the IFRAME tag.

Add the Code to Your Page

The final act to this tutorial is to add the code to your site.  There are numerous ways to do this, some good and some bad.  Probably the best way to do this is to use a module like PageBlaster to inject the code to your site, at will, anywhere that you’d like.  It’s very flexible.

What I did was closer to being the wrong thing to do though.  I actually put the code into the ViewEntry.ascx user control of the Blog Module.  This isn’t a big deal to me, because I always have a forked version of the Blog Module.  If you are not comfortable altering and maintaining a fork of the Blog Module, do this another way...

I injected my code snippet into the aforementioned file, just above the chicklets.  If you like the placement, look for the “ShareBadgePRO_Toolbar” DIV, and put the code snippet above it.

I also made it a bit prettier in my site, by adding a small bit of CSS to remove some of the padding from the footer of the blog entry.

.BlogFooter { padding-bottom: 20px; }

That’s it!  As you can see below, I have a Like Button at the bottom of each of my blog entries.  If you LIKE this post, make sure you click the Like Button at the bottom of this post! :)

Trackback Print

Tags:

Categories: Development

Location: Blogs Will Strohl