Comments Box Like button CSS

Reading Time: 3 minutes

There are some litel work around for FBML Pages to include a Like button. The normal Like button dont work on FBML pages often you import Blogs via RSS or Note and would like to have the nice LIKE button there too. A work around is to use the Like button from the Comment Box and hide with CSS all the other stuff you dont need . Specialy on Facebook landing pages you could embed these Button so the new Fan can use it right inside your leyout and desing and dont need to go to the Page Top to click to get a Fan.

What we whant to get is a like button linked to a existing Facebook Page on a FBML Page.

Add a Static FBML App to your  Page from Facebook. Some html  a image some Flash or something else . Add the Facebook Comment code

 

 

How to get a Like Button that links to your Existing Facebook Page

You have to use the returnurl the url of your Facebookpage, fb detect the page and show all your Fans count and the Face thumbs. The same like button you could also add to your Blog too . As these like button will Render on a Canvas page to it will render also if you import your Blog via RSS into the Facebook Notes. For WordPress Blogs there are several Plugins to include a Like button but these dont link to your existing Facebook Fanpage. These work around will work on FBML Pages and Blogs how to include it in a Blog i will explain on one of the next posts. Now the Like Button for your Static Fbml Page. To get the Comment Box/ Like Button linked to your FB Page you need a return url like these example

<code>fb:comment parameter  : returnurl="http://facebook.com/FILMPRODUCERS"</code>

 

Build a Comments Box

 

 

The FB:comment (XFBML) code :

 

Parameter:

  • XID: Identiviy your Comments you can use any combidnation ven exitisng or used ones
  • canpost: ture/fals
  • numposts=”4″ how many post you would like to show
  • simple: 1/0 show the round bords or not so it fits your desing
  • css: links to your external style sheet , the numbers ?1234 are needet as FB cache your css for a very long time so change it every time you mod your css.

If you need more parameter you find in the FB wikis

Now we have a standard Facebook comment box lets now hide all the stuf exept the like button. We want to hide the comment Box, the Fan Thumbs, and the Facebook Social Plugin footer.

There are 2 way to add style external or inside the Static FBML the second option is more bultet profe as the external css could not load. Unfortunately you cant specify a css file but you can write inline css . As Facebook is changing there Apps all time it hard to know when they change some code or how it works. Thats often also the reason why a App brake that works before.

Style with CSS your Facebook Comment :

These is a part of the Comment css with that you can show the parts you need from the comment box.

/* HIDE THE LIKE BUTTON */

div.like {display:none;}

/* HIDE THE HOVER PAGE LIKE TITEL*/

div.connect_widget_confirmation  {display:none;}

/* HIDE THE COMMENTS FORM */

div.wallkit_form {display:none;}

/* HIDE THE COMMENTS DISPLAY */

div.wallkit_posts {display:none;}  

HIDE THE COMMENTS PAGING AND COUNTING FOOTER */

div.wallkit_subtitle {display:none;}  

/*HIDE THE FANS PROFILES PIX */

div.connect_widget_sample_connections {display:none;}

Formaly you could link  a css style file for that these dont work when you add a return Url.  You have to code it into the FBML page. For Editing you can use any Text Editor. If you use Firebug for Firefox (free ) you can read any Css parameter and change them too color size ect. what about a huge mega Like button 🙂 (That you could share on your wall )

Hope that helps a bit too get your like button where you like it and how you like it .

 

Next:

How to Admin and delet Comments on the FB.Comment box ?

72
SAY HELLO

avatar
44 Comment threads
28 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
12 Comment authors
Irfan AzharGill Lapuz DavidFelipe SilvaJay P CeeSteven Darjuan Carina Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Irfan Azhar
Guest
Irfan Azhar

how to hack like status?

Irfan Azhar
Guest
Irfan Azhar

how to hack like status?

Irfan Azhar
Guest
Irfan Azhar

how to hack like status?

Irfan Azhar
Guest
Irfan Azhar

how to hack like status?

Irfan Azhar
Guest
Irfan Azhar

how to hack like status?

Gill Lapuz David
Guest

/* HIDE THE LIKE BUTTON */.
div.like {display:none;}
/* HIDE THE HOVER PAGE LIKE TITEL*/.
div.connect_widget_confirmation {display:none;}.
/* HIDE THE COMMENTS FORM */.
div.wallkit_form {display:none;}
/* HIDE THE COMMENTS DISPLAY */.
div.wallkit_posts {display:none;}
HIDE THE COMMENTS PAGING AND COUNTING FOOTER */.
div.wallkit_subtitle {display:none;}
/*HIDE THE FANS PROFILES PIX */.
div.connect_widget_sample_connections {display:none;}

Gill Lapuz David
Guest

/* HIDE THE LIKE BUTTON */.
div.like {display:none;}
/* HIDE THE HOVER PAGE LIKE TITEL*/.
div.connect_widget_confirmation {display:none;}.
/* HIDE THE COMMENTS FORM */.
div.wallkit_form {display:none;}
/* HIDE THE COMMENTS DISPLAY */.
div.wallkit_posts {display:none;}
HIDE THE COMMENTS PAGING AND COUNTING FOOTER */.
div.wallkit_subtitle {display:none;}
/*HIDE THE FANS PROFILES PIX */.
div.connect_widget_sample_connections {display:none;}

Gill Lapuz David
Guest

/* HIDE THE LIKE BUTTON */.
div.like {display:none;}
/* HIDE THE HOVER PAGE LIKE TITEL*/.
div.connect_widget_confirmation {display:none;}.
/* HIDE THE COMMENTS FORM */.
div.wallkit_form {display:none;}
/* HIDE THE COMMENTS DISPLAY */.
div.wallkit_posts {display:none;}
HIDE THE COMMENTS PAGING AND COUNTING FOOTER */.
div.wallkit_subtitle {display:none;}
/*HIDE THE FANS PROFILES PIX */.
div.connect_widget_sample_connections {display:none;}

Gill Lapuz David
Guest

/* HIDE THE LIKE BUTTON */.
div.like {display:none;}
/* HIDE THE HOVER PAGE LIKE TITEL*/.
div.connect_widget_confirmation {display:none;}.
/* HIDE THE COMMENTS FORM */.
div.wallkit_form {display:none;}
/* HIDE THE COMMENTS DISPLAY */.
div.wallkit_posts {display:none;}
HIDE THE COMMENTS PAGING AND COUNTING FOOTER */.
div.wallkit_subtitle {display:none;}
/*HIDE THE FANS PROFILES PIX */.
div.connect_widget_sample_connections {display:none;}

Gill Lapuz David
Guest

/* HIDE THE LIKE BUTTON */.
div.like {display:none;}
/* HIDE THE HOVER PAGE LIKE TITEL*/.
div.connect_widget_confirmation {display:none;}.
/* HIDE THE COMMENTS FORM */.
div.wallkit_form {display:none;}
/* HIDE THE COMMENTS DISPLAY */.
div.wallkit_posts {display:none;}
HIDE THE COMMENTS PAGING AND COUNTING FOOTER */.
div.wallkit_subtitle {display:none;}
/*HIDE THE FANS PROFILES PIX */.
div.connect_widget_sample_connections {display:none;}

Felipe Silva
Guest

Irado

Bia Corrêa
Guest

Manda uma música relaxante aí Felipe….rsrsrs

Felipe Silva
Guest

Irado

Bia Corrêa
Guest

Manda uma música relaxante aí Felipe….rsrsrs

Felipe Silva
Guest

Irado

Bia Corrêa
Guest

Manda uma música relaxante aí Felipe….rsrsrs

Felipe Silva
Guest

Irado

Bia Corrêa
Guest

Manda uma música relaxante aí Felipe….rsrsrs

Felipe Silva
Guest

Irado