« PREV: Enter The Social...
Lovesac Speedrun... :NEXT »

How to Customize the Facebook Comments Social Plugin on a Static FBML Tab

How to Customize the Facebook Comments Social Plugin on a Static FBML Tab

Adding the Facebook Comments Social Plugin to your Static FBML tab is a slick way to add a level of interaction to your custom tabs. However just like all of Facebook’s Social Plugins the original styling just doesn’t match up with the unique style of most custom tabs. This tutorial will teach you step by step how to customize the Facebook Comments Social Plugin to match your tab’s custom Static FBML design. After completing this tutorial you should be able to play around with the code and make modifications that you see fit to change the styling to suit your own needs.

Step 1: Get Your FBML Comments Social Plugin Code

First things first you need to get the code for your Facebook FBML Comments Social Plugin from Facebook. Your code should look similar to the code below but may look different depending on your settings; for this tutorial we have used the most basic settings. You should also note that the width setting does not work inside of Static FBML and instead Facebook Comments are displayed as a block element.

<fb:comments xid="143389245671476" numposts="10"></fb:comments>

Step 1: Get Your FBML Comments Social Plugin Code

Step 2: Wrap Your Plugin Code with a Container DIV

Now that you have your FBML Comments Social Plugin code you will need to wrap it in a container div to allow for easier custom styling. If you are using multiple comment plugins on the same tab you should use class instead of id.

<div id="comments">
  <fb:comments xid="143389245671476" numposts="15"></fb:comments>
</div>

Step 3: Styling the Container DIV

The next step is to position and add some basic style to the container DIV which will be passed onto the Facebook Comments. You may need to adjust the positioning of the DIV or add some padding/margin to it based on your layout. By setting the font-family and font color as well as the a:href link color on the container DIV we have just passed these styles onto the Facebook Comments, this means almost all text and links will inherit these styles.

#comments { 
width: 100%; 
float: left; 
font-family: Arial, Helvetica, sans-serif; 
color: #ff6600; 
}
#comments a { color: #ff6600; }

Step 3: Styling the Container DIV

Step 4: Styling the Add a Comment Button

When using the Facebook Comments Social Plugin inside of Static FBML it adds a comment button instead of automatically showing the comment form. One thing we didn’t like about the button was that it didn’t fully stretch across the available width. The following code will fix the button alignment as well as style it. Lines 1–15 will adjust the alignment of the comment button. Lines 16-24 will style the actual comment button. After applying this code you will notice that the comment form alignment is off, don’t worry that’s perfectly normal at this point, we will fix that in the next step.

#comments .wallkit_form { 
padding: 0 0 15px 0; 
margin: 0 0 10px 0; 
border-bottom: 1px solid #ff6600; 
}
#comments .wallkit_form .composer { padding: 0; }
#comments .pas { padding: 0; }
#comments .uiBoxGray { 
background: none; 
border:0; 
}
#comments .toggleform { 
margin: 0; 
padding: 0; 
}
#comments .toggleform a { 
display: block; 
font-size: 14px;
color: #fff; 
font-weight: bold; 
text-transform: uppercase;
background: #ff6600; 
padding: 10px 0; 
}

Step 4: Styling the Add a Comment Button

Step 5: Styling the Comment Form

The next step is to fix and add some style to the comment form. Lines 1-8 will adjust the alignment of the form as well as style the form’s textarea. Lines 9-14 will style and adjust the check box for posting the comment to the user’s profile. After applying this code the comment form will now be perfectly aligned with the user’s avatar.

#comments .wallkit_form div.text_spacer { padding-left: 60px; }
#comments .wallkit_form textarea { 
display: block; 
height: 42px; 
color: #ff6600; 
margin: 0; 
border: 1px solid #ff6600; 
}
#comments div.connected input { margin: 5px; }
#comments div.connected label { 
font-size: 11px; 
color: #ff6600; 
vertical-align: text-top; 
}

Step 5: Styling the Comment Form

Step 6: Styling the Comment Form Post Button

The next step is to style the ‘Post’ button; this step is a little bit difficult because there are many different classes and states being applied to the button. All of the code below is used to style the button and after applying this code your ‘Post’ button should now be styled.

#comments .uiButton, 
#comments .uiButtonSuppressed:active, 
#comments .uiButtonSuppressed:focus, 
#comments .uiButtonSuppressed:hover { 
background: none; 
padding: 4px 10px; 
}
#comments .uiButtonConfirm{ 
background: #ff6600 !important; 
border: 0; 
}
#comments .uiButton .uiButtonText, 
#comments .uiButton input { 
text-transform: uppercase; 
padding:1px 0 2px 2px; 
}
#comments .wallkit_frame .inputsubmit-disabled { 
background: none; 
border: 0; 
color: #ff6600; 
}

Step 6: Styling the Comment Form Post Button

Step 7: Styling the User Comment

Now that our comment button and comment form are custom styled, the next step is to move onto styling the actual user comments. This step is very simple since we have already applied a base for our custom styling to the container DIV in Step 3. Lines 1-4 will adjust the color of the comment’s bottom border as well as adjust its margin. Lines 5-7 will style the user’s comment date.

#comments .wallkit_post { 
border-bottom: 1px solid #ff6600; 
margin: 10px 0 5px; 
}
#comments .wallkit_post .wallkit_postcontent h4 .wall_time { 
color: #ff6600; 
}

Step 7: Styling the User Comment

Step 8: Styling the Comment Navigation

Now that our comment button, comment form and user comments are all custom styled the final step is to style the comment navigation. Lines 1-3 will style the comment navigation information and lines 4-12 will style the actual comment navigation links. In order to see all aspects of the comment navigation you must make sure that there are enough comments in order for the navigation elements to be displayed. Try adding a few test comments and adjust the number of comments to show just for testing purposes, you can delete the test comments and reset your comment number after testing is complete.

#comments .wallkit_subtitle { padding: 3px 0; }
#comments .wallkit_subtitle .post_counter { margin: 0 0 0 5px; }
#comments .wallkit_subtitle .pager { padding-left: 5px; }
#comments .pagerpro .current .pagerpro_a {
color: #ff6600; 
border-bottom: 2px solid #ff6600; 
}
#comments .pagerpro .pagerpro_a:hover { 
background: #ff6600; 
border-bottom: 1px solid #ff6600; 
text-decoration: none !important; 
}

Step 8: Styling the Comment Navigation

Complete CSS Code

Below is all of the css code from Step 3 – Step 8 combined together.

#comments { 
width: 100%; 
float: left; 
font-family: Arial, Helvetica, sans-serif; 
color: #ff6600; 
}
#comments a { color: #ff6600; }

#comments .wallkit_form { 
padding: 0 0 15px 0; 
margin: 0 0 10px 0; 
border-bottom: 1px solid #ff6600; 
}
#comments .wallkit_form .composer { padding: 0; }
#comments .pas { padding: 0; }
#comments .uiBoxGray { 
background: none; 
border:0; 
}
#comments .toggleform { 
margin: 0; 
padding: 0; 
}
#comments .toggleform a { 
display: block; 
font-size: 14px;
color: #fff; 
font-weight: bold; 
text-transform: uppercase;
background: #ff6600; 
padding: 10px 0; 
}

#comments .wallkit_form div.text_spacer { padding-left: 60px; }
#comments .wallkit_form textarea { 
display: block; 
height: 42px; 
color: #ff6600; 
margin: 0; 
border: 1px solid #ff6600; 
}
#comments div.connected input { margin: 5px; }
#comments div.connected label { 
font-size: 11px; 
color: #ff6600; 
vertical-align: text-top; 
}

#comments .uiButton, 
#comments .uiButtonSuppressed:active, 
#comments .uiButtonSuppressed:focus, 
#comments .uiButtonSuppressed:hover { 
background: none; 
padding: 4px 10px; 
}
#comments .uiButtonConfirm{ 
background: #ff6600 !important; 
border: 0; 
}
#comments .uiButton .uiButtonText, 
#comments .uiButton input { 
text-transform: uppercase; 
padding:1px 0 2px 2px; 
}
#comments .wallkit_frame .inputsubmit-disabled { 
background: none; 
border: 0; 
color: #ff6600; 
}

#comments .wallkit_post { 
border-bottom: 1px solid #ff6600; 
margin: 10px 0 5px; 
}
#comments .wallkit_post .wallkit_postcontent h4 .wall_time { 
color: #ff6600; 
}

#comments .wallkit_subtitle { padding: 3px 0; }
#comments .wallkit_subtitle .post_counter { margin: 0 0 0 5px; }
#comments .wallkit_subtitle .pager { padding-left: 5px; }
#comments .pagerpro .current .pagerpro_a { border-bottom: 2px solid #ff6600; }
#comments .pagerpro .pagerpro_a:hover { 
background: #ff6600; 
border-bottom: 1px solid #ff6600; 
text-decoration: none !important; 
}

#comments .wallkit_subtitle { padding: 3px 0; }
#comments .wallkit_subtitle .post_counter { margin: 0 0 0 5px; }
#comments .wallkit_subtitle .pager { padding-left: 5px; }
#comments .pagerpro .current .pagerpro_a { 
color: #ff6600;
border-bottom: 2px solid #ff6600; 
}
#comments .pagerpro .pagerpro_a:hover { 
background: #ff6600; 
border-bottom: 1px solid #ff6600; 
text-decoration: none !important; 
}

Please Note:

After applying the last and final step, your comments should now be completely styled to match your custom tabs styling. Please note that in order to simplify this tutorial and avoid confusion we have applied basic styling to the comments. Please do not leave comments asking how to achieve more complex styling, if you need more complex styling please contact us here in order to receive a quote.

This tutorial will only work when using the Facebook Comments Social Plugin inside of a Static FBML tab on a Facebook fan page.

Troubleshooting

If you are trying to edit the css and no changes are showing up, make sure that you do not have any other overriding styles attached to the container DIV.

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still can not get it to work please leave us a comment below and we will respond as soon as possible.

Updates

10/28/2010 – Step 4 – Line 8
Facebook changed css class .gray_box to .uiBoxGray

Posted In

Tutorials

48 Comments

  1. Rob September 11, 2010

    nice job man..thanks!

    Reply
  2. Pingback: Lovesac Speedrun Custom Facebook Design | Daddy Design

  3. Aaron September 25, 2010

    Thanks s o much for the great post! I’m really into social media marketing, especially Facebook marketing and FBML. It’s hard to keep up with this fast changing topic so I like to read and learn all I can. I use http://www.facebook.com/thefanpagefactory and posts like yours to keep up. I found these resources to be the best by far. Thanks again. Enjoy!

    Aaron

    Reply
  4. Marius October 3, 2010

    Hi, i have just finished my static fbml box for fan page with fb:comments inside. Everything looks perfect and working well, except one thing – i can comment just with my personal account and can’t like fan page admin. Searching for the solution all day, but can’t find anything…

    Thanks,

    Marius

    Reply
  5. gary October 7, 2010

    can we get the comments to be displayed above the comment box

    Reply
  6. adi October 10, 2010

    Hey Guys,

    I really liked the post however, I’m having problems modifying other changes like adding free text that would appear on the side of the image i’m adding.
    Can you help me with that?

    Tnx,
    Adi

    Reply
  7. daddydesign October 26, 2010

    @Gary, you should be able to accomplish it by using some padding at the bottom and absolute positioning of the comment box.

    Reply
  8. daddydesign October 26, 2010

    @Adi, not too sure what you’re trying to ask, this tutorial is only to help you customize the comments inside of a Facebook tab anything beyond that and you can contact us for a quote.

    Reply
  9. Pingback: EARN Custom Facebook Design | Daddy Design

  10. Rafael December 27, 2010

    I tried everything and could not get working, I am new to FBML. I copied the step 3-8 and added to a external css file and tried this:

    I also tried to put the css directly into the page, also did not work. Can someone help me. thanks

    Reply
  11. Paul V. January 4, 2011

    @rafael

    the best way is to use the css direct in the code:

    If you do it this way Be sure to remove all “#comments” from the Daddydesign css file.

    ps. everytime you make changes to the css you have to change the value after the “?”
    ex. http://yoursite.com/css_orange.css?1
    http://yoursite.com/css_orange.css?2
    http://yoursite.com/css_orange.css?3 etc
    Hope i helped u out.
    Btw i am developing a plugin for Joomla Sites which implements FB comment&Like to Articles/Categories/Section with Custom Styling.
    anyone intresting on having a piece pm here:darkskybot@gmail.com

    Reply
  12. Paul V. January 4, 2011

    this is the code:
    <– –>

    Reply
  13. domz January 18, 2011

    my only problem in this tutorial is that the loggin as label doesnt appear correctly they overlap with the image

    Reply
    • daddydesign February 7, 2011

      @domz, can you please supply a link to your page so we can see the issue.

      Reply
  14. Jaime Cruz January 21, 2011

    How can I get a quote to do this on a website, not a facebook tab?

    Thanks,

    Jaime

    Reply
    • daddydesign February 7, 2011

      @Jamie, unfortunately at this point and time it is not possible to style the comment system on a website, there is no CSS stylesheet linking and no way to make changes to the code inside of the generated Iframe.

      Reply
  15. Kasun January 27, 2011

    firstly I added a style to the share button.and then i added a style to comment post button.but it is not working correctly..the post button looks like the share button.how to fix it?Thanks

    Reply
    • daddydesign February 7, 2011

      @Kasun, not exactly sure what you’re meaning. Please explain in more detail and provide a link.

      Reply
  16. Kuper January 27, 2011

    Doesn’t work, because all elements inside iframe – to which aren’t present access, the bad and inveracious article

    Reply
    • daddydesign February 7, 2011

      @Kuper, if you would have read the intro to this tutorial you would have noticed that this tutorial is only for Static FBML tabs and not for adding the widget to your website.

      Reply
  17. Tex February 15, 2011

    nice thanks for that. but its really bad. i have tryed all what i can to get that option that you can moderate the comments , delete or something but no way. Its aviable only to message a user who posted a comment.

    Is there a way to fix that ??

    Reply
    • daddydesign February 17, 2011

      Not sure exactly what you’re trying to ask.

      Reply
      • Tex February 20, 2011

        I mean when some members add a comment , The page admin has no the administration to managing the comment, to delete it or something, there is only a Message link under the comment.. Understand now my question ??

        Im ask is it posible to get a nice FB Comment with all acces, to delete comment if someone spamm with links etc–

        Reply
        • daddydesign February 21, 2011

          To our knowledge, you cannot manage or delete a comment. Even as the admin. Unless someone else knows a way?

    • icute June 24, 2011

      theres a good plugin for this feature, its called Integrate Facebook Comments into your WordPress Site, ive been using it and i can moderate the comments.

      Reply
  18. Tasneem February 18, 2011

    Hi,

    Its working on Google chrome but not in IE, isn’t it strange !

    please check my page

    Reply
    • daddydesign February 18, 2011

      This is because you have the CSS in the fbml. You must link to the css file (must place .css into your web server and point to that file).

      Reply
  19. Tasneem February 21, 2011

    thank you very much, its working perfectly :)

    Reply
  20. Ahmed March 1, 2011

    This is incredible! i really like the out come of this CSS code.. great job

    I tried to use it but i am still new to FBML formatting with CC and i didn’t know where to place the adjustments of the colors and fonts of the comments, is it inside ? or right after it?

    is there any thing to be removed from the code when i use it >> i saw “#comment” and in one of your replies you said that it must be removed..

    sorry for the question it may look stupid but i am new to this and i am eager to know ^^

    all what i need to know is how to use the CSS code

    Thanks

    Reply
  21. Filip April 8, 2011

    Hello,

    first of all thank you for your tutorials, they are really helpfull. I’ve already used the one with styling the likebox and it’s great!

    Now i am trying to use something similar to style facebook comments on my wordpress blog.

    I tried to link to an external css (like with the likebox) but nothing happens. (i am using the question mark for fb cache)

    If you can give me a hint, i would very much apreciate it.

    Thak you again!

    Reply
    • daddydesign April 9, 2011

      HI, to our knowledge, you cannot style the regular facebook comments anymore. If anyone knows how to, please share here.

      Reply
      • Filip April 11, 2011

        i think you’re right…

        i’ve realised that if i add the href tag, i cannot link the css… and if i don’t add the href tag, i can link the css but i get the same comment box on every article… that means i shoud get an app for each post… wich is useless…

        anyway i hope facebook will allow us this in the future… thanks again for your useful articles

        Reply
      • icute June 24, 2011

        no wonder no matter what i did it cant be style up, thanks for this info

        Reply
      • HomeBiss September 6, 2011

        Daddy Design,

        Facebook Comments 2.0 doesn’t allow us to do this any more. That’s what they say but it has been months now and I was just wondering, have anybody out there found a way to custom style it now?

        Reply
  22. Dinesh Verma August 23, 2011

    Thanks for the help brother.

    Reply
  23. Vu Xuan Cuong October 20, 2011

    Sorry, this is not working anymore.

    Reply
  24. jana March 10, 2012

    Hi, I just saw a message in FB developer section stating that FBML is depreciated and in future if am going to develop application I should go for JavaScript JDK and HTML, so do you think this FBML comment plugin still works?

    Reply
    • daddydesign March 13, 2012

      Hi, I don’t think anything using FBML will work after June 1st but we are not sure.

      Reply
      • Gavin July 3, 2012

        Hi, in current facebook version, How can we coustomize the facebook comment style?

        Reply
        • daddydesign July 5, 2012

          hi, we dont think you can do too much styling on that comment system. Please let us know if you find out different..

  25. Hemant September 27, 2012

    This does not works when we use the HTML 5 version. Can you give a fix for this

    Reply
    • daddydesign September 30, 2012

      This tutorial was for a FBML tab, which is no longer available.

      Reply
  26. Jody Burgess November 14, 2012

    Is there any way to add default text for the user into the comments field?

    Reply
    • daddydesign November 18, 2012

      Don’t think so and I think Facebook has gotten rid of all FBML now :(

      Reply
  27. otobong December 23, 2012

    Thanks man I owe you one! :)

    Reply
  28. Syair Cinta January 7, 2013

    Ya, poor facebook comments box now as it’s now in XBFML, impossible to style an iframed content.

    Reply
  29. rojitha August 16, 2013

    Can you make an update for the new comments box plugin
    XFMBL

    Reply
  30. HCC September 7, 2013

    As a non-programmer, this is beyond me, and I wonder if anyone has created a nice, convenient PLUGIN to do this?

    Reply

Leave a Reply

Your email is never published nor shared.
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>

Notify me of followup comments via e-mail. Or subscribe without commenting.