Solved

Custom Facebook Fan Box Choices/Code

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
Online promotion is consistently becoming more important for all types of businesses. From Facebook ads to search engines to YouTube videos, there are all sorts of channels that can effectively be used to promote a business or product. But how shoul…
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:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

726 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