?
Solved

Custom Facebook Fan Box Choices/Code

Posted on 2011-03-24
3
Medium Priority
?
673 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Some of the SEO trends we might expect in 2017.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
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

801 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