Solved

Custom Facebook Fan Box Choices/Code

Posted on 2011-03-24
3
660 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
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 250 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
online reputation management 1 46
Standard for Web Development 3 38
tag title an image 13 30
hosting images 4 27
A great marketing strategy is diverse.  Read about the not so popular, yet effective, marketing tactics you can start using today!
In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

813 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

17 Experts available now in Live!

Get 1:1 Help Now