Modify the widget fan page box Facebook
| Back to css. moderator (2010-04-08)  |
Because it may interest many webmasters, here is how I managed to integrate the widget fan page box of Facebook to the design of the buzz blog, the idea was to make the box transparent.
First, you have to add a link to a CSS file in the code provided by Facebook, just like this :
<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US"></script><script type="text/javascript">FB.init("XXXXXXXXXXXXXXXXXXXXXX");</script><fb:fan profile_id="XXXXXXXXXXXX" connections="8" logobar="0" width="365" height="155" css="http://www.ficgs.com/styles/widget_facebook.css?<? print rand(0,10000); ?>"></fb:fan>You'll notice a cache-breaker (only during the tests) at the end of the CSS filename, without this you couldn't see your changes in real time, even by reloading the page again and again.
Now here is the CSS file that you can change as you want. Note that it is against the terms and conditions of Facebook to hide all informations but the button itself!
.fan_box .full_widget {
border:0px solid #000000;
display:block;
width:365px;
padding:0px;
margin:0 5px 0 0px;
background:transparent;
color:#000000;
text-align:left;
}
.fan_box div { background:transparent; }
.fan_box .connections {
border-top:0px dashed #FFFFFF;
width:365px;
text-align:left;
padding:10px 0 10px 0px;
color:#000000;
font-size:12px;
position:absolute;
margin:70px 0 0 0px;
}
.fan_box .connections_grid {
padding:10px 0 0px 0px;
clear:both;
position:absolute;
margin:-108px 0 0 0;
width:365px;
}
.fan_box .grid_item {
padding:0;
margin:0 0 0px 0px;
width:58px;
height:70px;
float:left;
}
.fan_box .grid_item img {
border-right:1px;
border-bottom:1px;
padding:2px;
background:transparent;
margin:10px 0 10px 0;
}
.fan_box .connect_button {
padding:0px 0px 0px 0px;
z-index:1000;
}
.fan_box .connect_top,.fan_box .connect_top a {
color:#000000;
font-size:14px;
}
.fan_box .connect_top {
display:block;
padding:0 0 0 0;
position:absolute;
margin:100px 0 0 0;
text-align:left;
z-index:1000;
}
.fan_box .connect_top img {
display:none;
}
.name_block a { display:none; }
.name_block { display:block; }
.connect_span { padding:0 0 0 0; }This code was adapted from another code that I found in this blog, many thanks to his author.
*jonas (2011-01-10 23:31:28)
Help me stamp out male cancer!
Hi Moderator,
I just stumbled upon your great article here, as I am currently on the lookout for someone who can help me with a Fan Box modification that I am having some issues with.
It is for a fully non-profit project, where I am trying to raise money and awareness for male cancer. So unfortunately I cannot pay you any money, and I fully understand if you therefore do not have the time to help me - al though it would make me really happy if you would take a quick look at it.
The modifications are:
1. (the most important)
I would like to hide or remove the ‘XX persons likes this’ at the top of the widget, as I have installed a separate like button underneath – do you know how to do this?
2.
As you can see on my page, I have tried to adjust the widget to the websites grid (sidebar width 220px) – do you have any good tips on how to make the widget exactly the same?
Here is my current code: ht*p://jonasskafte.com/balls/stylesheet3.css
-and here is my page: ht*p://runningforballs.com/
Hoping to hear back from you, and thanks in advance.
//Jonas.
See also
ficgs
More websites
You must register to see these links, as this is a collaborative page, then you may change the order of the links by clicking the icons before the titles.
admin
Other websites
The following links might be less relevant, please change their ranks if you find them useful.
Facebook Pages : New: Fan Box widget – More Fans and More Sharing | Facebookfacebook > note.php?note id=101644039821&comments
Blogger Widgets : Create a Facebook Fan Page for your Blog | Facebookfacebook > notes/blogger widgets/create a facebook fan page for your blog/164908
How to Add the Facebook Fan Page Widget to Your Website | (Anti) Social Developmentkimwoodbridge > how to add the facebook fan page widget to your website
Use WordPress? Collect email signups with Contact Form 7 - Blog -...
Outrageous Photoshopping: Why We Should Keep Talking About...
DIOSA | Communications: Facebook Best Practices for Nonprofit Organizationsdiosacommunications > facebookbestpractices.htm
Facebook Fan Box Widget For your Sitesaadkamal > social media/facebook fan box widget
Don’t want to miss a post? Subscribe to our RSS...
Facebook Releases New “Fan Box” Widget to Turn Website Visitors...
Facebook Pages – How To Add A Facebook Fan Box To Your Wordpress Blog | Holographic Life Mappingiandavidchapman > facebook fan box
How To Block Facebook Applications From Posting On Your...
How To Add Facebook Social Plugins To Your Wordpress...
How to Add a Facebook Fan Page Box To WordPress | Evolutionary Designsevolutionarydesigns > blog/2010/02/17/how to add a facebook fan page box to word
14 Useful Articles for Bloggers, WordPress Users, and Social Media...
Does Your Site have an Error 404 File Not Found...
I think anyone who uses other social medias sites will start using...
How to Customize Facebook Fan Page Widgetshoutmeloud > how to customize facebook fan page widget
Twitter Fan Widget: Showoff your followers in WordPress...
Feed Pauser WordPress Plugin: Stop showing Windows Live writer test...
Why Guest Blogging Enabled Blog Should Give Author Credit within The...
Widgetbox › World's best place to find and make web widgetswidgetbox
Facebook Fan Page Box Widget | Evolutionary Designsevolutionarydesigns > blog/tag/facebook fan page box widget
So How Do I Add a Fan Page for Facebook To My WordPress...
The first thing you need to do is create a fan page on...
How to Create a FaceBook Fan Page and Add the Widget to Your BigCommerce Storebigcommerce > ecommerce blog/how to create a facebook fan page and add the widge
Looking to grow your e-commerce business to 7 figures in the next 12...
Hi Mitchell, I submitted a support ticket about Facebook single login...
I can import the external blog to my personal page, but if I copy and...
Facebook’s Fan Box – The Inside Scoop | MyTechOpinion.commytechopinion > 2009/07/facebook fan box
Real Estate Bloggers: Increase Your RSS Subscribers with...
Is My Facebook Profile Complete? FacebookGrader Has the...
4 Ways To Add An Event Calendar To Your Wordpress...
How to add a Facebook Page Fanbox to your website (and customize it) - Social media and inbound marketing for non-profitsjohnhaydon > 2009/08/add facebook page fanbox website customize
Add A Facebook Fan Box To Wordpress {HOW TO}socialmediaseo > 2010/03/12/add facebook fan box to wordpress
The #1 Most Important Thing About Your Facebook Fan...
73% Of iPhone Users Will Switch To A Verizon iPhone...
Google Cars, Google Is Now Testing Cars That Drive...
How to add a Facebook Fan Page widget to your website | Cardeocardeo > 2009/how to add a facebook fan page widget to your website
all instructions are on the website it is a freeware and i use it...
to have a look if thats what you want and just mail me the page that...
Stay up to date with all the latest news, apps, and tutorials by...
How to Customize Facebook Fan Box Widget? (Basic and CSS Customization) | TechShalitechshali > how to customize facebook fan box widget
How to Customize Facebook Fan Box Widget? (Basic and CSS...
24 Sites to Generate Dummy Text Online (Lorem Ipsum...
Add a Facebook Fan Page Widgetlongest > 2010/01/05/add a facebook fan page widget
Once you have a Fan page and are logged into Facebook simply go to...
Blogger: Une erreur s'est produite lors du traitement de votre demandebloggerplugins > 2009/10/facebook fan page for blogger blogs
Facebook Widgets: Embed Your Facebook Content Anywheremashable > 2009/09/04/facebook widgets 2
I tried embedding a profile badge on my blog ( Blogger) but all I get...
question is, will this draw people away from your blog to facebook or...
How to Customize your Facebook Fan Box | Daddy Design Blogging all of our web, wordpress and myspace designsdaddydesign > wordpress/how to customize your facebook fan box
Man kann mich mögen oder es auch lassen - Portfolio und Blog von...
iNicolas | Comment customiser la Fan-box de Facebook sur votre blog...
Utilizing a Facebook Fan Box widget | CoPresscopress > 2009/08/25/utilizing a facebook fan box widget
Turn WordPress Into a Complete CMS For Newsrooms and Multi-User Blogs...
Tips for HTML5, part 5: A closer look at selected...
Google has released a WordPress plugin that enables a user to mimic...
Static FBML: Not Every Facebook Fan Page Needs An Application | Snipe.Netsnipe > 2009/06/fb fanpages fbml box
I loved the way Hyper Arts had the sub tabs on their page when you...
definitely includes this preview feature in my ideal world, but i...
and it seems like the FBML box only publishes to bxes can I use FBML...
There's no trackback at the moment.
[Games online]
[Last topics]
[Glossary]
[Help]
[Membership]
[About]
[Social network] [Hot news] [Discussions] [Seo forums] [Meet people] [Directory]
[Social network] [Hot news] [Discussions] [Seo forums] [Meet people] [Directory]