Change number of likes on a Like Button

like-for-freeDid you ever need to edit the number of likes that is present next to a like button? Did you know you can do that with CSS? If you really quickly need to have a like button with whatever count you want, go like this:

1. Take this like button code (you need to include the Facebook Javascript SDK on your page after the body tag first):

<style type="text/css">#fake-like-rapper{display: inline-block;margin:0;padding:0;}#fake-like-rapper div{float:left;margin:0;padding:0;}#like-fake div.connect_widget_button_count_including, td.connect_widget_simple_including{margin:0;padding:0;}#like-fake td, td.label{font-size: 11px;text-align: left;margin:0;padding:0;}#like-fake{font-size: 11px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;color:#333;line-height:1.28;text-align: left;direction: ltr;margin-top: 1px !important; margin-left: -2px!important;position: relative;float:left;}#like-fake .uiGrid{border: 0;border-collapse: collapse;border-spacing: 0;}#like-fake .connect_widget_button_count_count{background: white;border: 1px solid #9197b3; border-radius: 2px;float: left;font-weight: normal;height: 16px;margin-left: 1px; margin-top: -2px; min-width: 17px;padding: 2px 2px 1px 2px;text-align: center;line-height: 14px;white-space: nowrap;}#like-fake .connect_widget_button_count_nub s, #like-fake .connect_widget_button_count_nub i{border: solid transparent;border-right-color: #D7D7D7;top: 9px;display: block;position: relative;border-width: 4px 5px 4px 0;}#like-fake .connect_widget_button_count_nub i{left: 2px;top: -7px;border-right-color: white;}#like-fake .connect_widget_button_count_nub {float: left; position: relative; height: 0; width: 5px; top: -5px; left: 2px; }</style><div id="fake-like-rapper"><div class="fb-like" data-href="" data-send="false" data-layout="button_count" data-width="48" data-show-faces="false" data-font="arial" style="width: 48px; height: 20px; overflow: hidden;"></div><div id="like-fake"><div class="connect_widget_button_count_including"><table class="uiGrid" cellspacing="0" cellpadding="0"><tbody><tr><td><div class="thumbs_up hidden_elem"></div></td><td><div class="undo hidden_elem"></div></td></tr><tr><td><div class="connect_widget_button_count_nub"><s></s><i></i></div></td><td><div class="connect_widget_button_count_count">5 million</div></td></tr></tbody></table></div></div></div><br><br>

2. Find this code <div class="fb-like" data-href="" and change this website address to your website address (or use PHP or what you are currently using to get it dynamically)

3. Find this code <div class="connect_widget_button_count_count">5 million</div> and replace 5 million with whatever phrase you want to appear in the count box.


Voila. Now you have a button like this. Click to see it in action!

5 million

Source: Like For Free

About me

Iinstructor of robotics (LEGO Mindstorms), computer teacher, IT support, web dev, currently studying cyber-physical systems engineering.

If you found a solution here, would you consider donating $25,000 for my next project?

Just kidding, 1$ would do fine.

Hope you found what you needed. Thanks for stepping by.