DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Adding a Facebook Like Button to Your DotNetNuke Blog

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.

Facebook Like Button

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.

Blog Module: Facebook Button Position

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! :)

Example Facebook Like Button

This post is cross-posted from my personal blog site.

Technorati Tags: ,,,,,,,,,

Comments

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (40)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out