Modify the widget fan page box Facebook


Back to css.


moderator    (2010-04-08)

moderator

Modify the widget fan page box Facebook

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.



(more options below)

*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 | Facebook
facebook > note.php?note id=101644039821&amp;comments

 Blogger Widgets : Create a Facebook Fan Page for your Blog | Facebook
facebook > 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 Development
kimwoodbridge > 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 Organizations
diosacommunications > facebookbestpractices.htm

 Facebook Fan Box Widget For your Site
saadkamal > 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 Mapping
iandavidchapman > 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 Designs
evolutionarydesigns > 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 Widget
shoutmeloud > 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 widgets
widgetbox

 Facebook Fan Page Box Widget | Evolutionary Designs
evolutionarydesigns > 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 Store
bigcommerce > 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.com
mytechopinion > 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-profits
johnhaydon > 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 | Cardeo
cardeo > 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) | TechShali
techshali > 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 Widget
longest > 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 demande
bloggerplugins > 2009/10/facebook fan page for blogger blogs

 Facebook Widgets: Embed Your Facebook Content Anywhere
mashable > 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 designs
daddydesign > 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 | CoPress
copress > 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.Net
snipe > 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...



Response  
 

Guest name   (option)     Register
Please sum : 2017 + three  




Trackbacks : If you talked about this article in your blog or website, you may instantly get a backlink 
There's no trackback at the moment.