Solved

Custom Facebook Fan Box Choices/Code

Posted on 2011-03-24
3
653 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 250 total points
Comment Utility
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 250 total points
Comment Utility
Here is what Facebook provides: http://developers.facebook.com/docs/plugins/
0
 
LVL 7

Author Comment

by:weikelbob
Comment Utility
Great. Thanks guys.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Digital marketing agencies have encountered both the opportunities and difficulties that emerge from working with a wide-ranging organizations.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

743 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now