?
Solved

Custom Facebook Fan Box Choices/Code

Posted on 2011-03-24
3
Medium Priority
?
679 Views
Last Modified: 2012-05-11
We're making a facebook fan box for our site www.nlpca.com

I searched and could not find a site that had a bunch of different options. I was wondering if any of you knew where to find different examples of what's possible.

0
Comment
Question by:weikelbob
3 Comments
 
LVL 21

Accepted Solution

by:
Julian Matz earned 1000 total points
ID: 35212972
I'm not sure if this is what you're looking for, but you can use a custom stylesheet to make your fan box look more or less exactly how you want it to. This is the code you'll need to do it:

		<div id="fb-root"></div>
		
		<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

		<script type="text/javascript">
		<!--//

			document.write('<div style="text-align: center"><fb:fan profile_id="PROFILE_ID" width="240" connections="8" stream="false" header="false" css="http://www.example.com/css/facebook.css?41"></fb:fan></div>');
		//-->
		</script>

Open in new window


And attached is some CSS to help you get started. Just remember to always update the number above after "facebook.css?" as Facebook will cache your stylesheet. Increment the number everytime you make a change to the stylesheet.

The other options should be self-explanatory ... "width" is your fan box's width in pixels, "connections" is how many connections it will show, "stream" can be set to false or true and controls whether or not your fan box will display the last couple of streams from the given profile, and "header", if set to true will simply add a header to your fan box that will say something like "Find us on Facebook".

Hope that helps.

.fan_box
{
	color: #3c5995 !important;
}

.fan_box a
{
	font-weight: bold;
	color: #3c5995;
}

.fan_box a:hover {
	text-decoration: none;
}

.fan_box .full_widget{
  height: 200px;
  border: 0 !important;
  background: none !important;
  position: relative;
}
.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
  display: none;
}
.fan_box .connect_action{
  padding: 0 !important;
}

.fan_box .connections
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #3c5995;
	border: 0 !important;
	padding: 0 !important;
}

span.total
{
	font-weight: bold;
	color: #3c5995;
}

.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name
{
	font-family: "Lucida Grande", tahoma, verdana, arial, sans-serif;
	font-weight: normal;
	color: #3c5995 !important;
	padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

Open in new window

0
 
LVL 31

Assisted Solution

by:gwkg
gwkg earned 1000 total points
ID: 35347807
Here is what Facebook provides: http://developers.facebook.com/docs/plugins/
0
 
LVL 7

Author Comment

by:weikelbob
ID: 35450038
Great. Thanks guys.
0

Featured Post

Enhanced Intelligibility Without Cable Clutter

Challenge: The ESA office in Brussels wanted a reliable audio conference system for video conferences. Their requirement - No participant must be left out from the conference and the audio quality must not be compromised.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Ready to get certified? Check out some courses that help you prepare for third-party exams.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses
Course of the Month17 days, 4 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question