RSS

Category Archives: Facebook

Facebook Share

The Share button has been deprecated in favor of the Like button, and will no longer be supported.Please use the Like button whenever possible to drive maximum traffic to your apps.

Implementing Facebook Share

You can render the Facebook Share button in an anchor (<a>) tag that takes the following attributes:

  • name: You must specify fb_share for this attribute.
  • type: The type of Share button or link to render, with or without a count included. Specify one of box_count, button_count, button, icon_link, or icon. The box_count and button_count options displays a count of the total number of times the page was shared on Facebook, how many comments were added to the story shared on Facebook, and how many times friends Liked the shared story. If you don’t specify a type, then this attribute defaults to button_count.
  • share_url: The URL for the page you want to share. If you don’t specify a share_url, then this attribute defaults to the current page.

To put a Facebook Share button on your site, copy and paste the following code into the page you want to share:

<a name="fb_share"></a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script> 

Because you didn’t specify the type and share_url attributes, the button defaults to the button_count type and shares the URL of the page where you placed it.

You need to include the script tag only once, no matter how many Share buttons you put on the same page. Place it after the first anchor tag on the page. If you can’t place it there, you should put it high up on the page to ensure fast loading (in the page head works well).

Note: You cannot share pages on the facebook.com domain.

WordPress Plugin

You can integrate Facebook Share using this WordPress plug-in.


Styling Your Share Button

If you want, you can choose from a variety of styles for your Share button.

Using this code… Renders this button… Of this size…
<a name="fb_share" type="button" share_url="YOUR_URL"> 56×18 pixels
<a name="fb_share" type="icon_link" share_url="YOUR_URL"> 51×15 pixels
<a name="fb_share" type="icon" share_url="YOUR_URL"> 18×15 pixels

Translating Your Share Button

If your site is written in another language, you can easily customize the Share button so it appears that language. To do this, simply wrap the text you want to appear within the anchor tags. For example, if your site is written in Spanish, you could specify your Share button like this:

<a name="fb_share" type="icon_link" share_url="YOUR_URL">Compartir en Facebook</a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script> 

Sharing Rich Media

You can share rich media like images, audio, and video from your page. To do this, you need to include meta tags in the <head> element in your HTML code.

Configuring Meta Tags for Facebook Share

You can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user’s profile and when a user tries to share it. You do this with <meta> tags.

Facebook Share passes along the URL of your page to our servers, which in turn looks up certain HTML tags within it. Those tags are used to display a preview of the page. In order to provide this preview, we always look for the title of the page, a summary of the main content and an image. If there’s media content on the page, those media files are also important to identify.

Basic Tags

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta property="og:title" content="title" /> <meta property="og:description" content="description" /> <meta property="og:image" content="thumbnail_image" /> 

So an example news story could have the following:

<meta property="og:title" content="Smith hails 'unique' Wable legacy" /> <meta property="og:description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " /> <meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" /> 

As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.

The title and description tags are the minimum requirements for any preview, so make sure to include these two.

The og:image is the URL to the image that appears in the Feed story. The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.

Specifying a “medium” Type

You may also specify the type of content being shared by using the following tag:

<meta name="medium" content="medium_type" /> 

Valid values for medium_type are audioimagevideonewsblog, and mult.

Specifying Multimedia Tags

By default, Facebook Share assumes that the page being shared is a full page, and a link or URL will be shared in the user’s Feed.

If you specifically want to share audio or Flash content that renders and plays inline on Facebook, you need to specifically tag your page to identify the Flash content.

The ideal way for you to connect video and media files to the share link is to make the URL in the link point to a Web page that contains the <meta> tags described above (title, description, image) along with some additional <meta> tags:

Audio (required)

<meta property="og:title" content="page title" /> <meta property="og:description" content="audio description" /> <meta property="og:image" content="audio image url (eg. album art)" /> <meta property="og:audio" content="audio url (.mp3 only)" /> 

Audio (optional)

<meta property="og:audio:type" content="Content-Type header field" /> <meta property="og:audio:title" content="audio title (eg. song name)" /> <meta property="og:audio:artist" content="audio artist name" /> <meta property="og:audio:album" content="audio album name" /> 

Flash (required)

In order to embed Flash content with Facebook Share, you must add a few additional meta tags along with title and description from above:

<meta property="og:title" content="video title" /> <meta property="og:description" content="video description" /> <meta property="og:image" content="video screenshot image url" /> <meta property="og:video" content="video url (.swf only)"/> 

Flash (optional)

<meta property="og:video:height" content="video height" /> <meta property="og:video:width" content="video width" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> 

Notes

  • Facebook supports embedding video in SWF format only.

Video Example

Here is an example of embedded Flash video:

http://www.example.com/player.swf 

For that video, the appropriate metadata would look like this:

<meta property="og:video" content="http://www.example.com/player.swf?video_id=123456789"/> <meta name="og:video:height" content="200" /> <meta name="og:video:width" content="300" /> <meta name="og:video:type" content="application/x-shockwave-flash" /> 

Using Facebook Share on a Facebook-enabled Website

If you have already implemented the Facebook JS SDK on your website, we recommend you migrate to the XFBML version of the Like button.

Alternatively, you add your own link, which when clicked, invokes stream.publish or stream.share from the FB.ui()method of the Facebook JS SDK.

We no longer support the XFBML version of the Share button.


Creating Your Own Share URL

However you implement Facebook Share, it always uses the following URL format to display the preview to the user.

https://www.facebook.com/sharer.php?u=<url to share>&t=<title of content> 

Feel free to create your own implementation based on this. Make sure you URL encode the u and t parameters — use the JavaScript function “encodeURIComponent(). For example:

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.sadtrombone.com%2F&t=Sad%20Trombone 
 
Leave a comment

Posted by on June 18, 2012 in Facebook

 

How to Customize your Facebook Fan Box

With the addition of a facebook fan box to your website you’re not only benefiting your end users but also yourself. The fb fan box allows users to directly view how many friends you have on your facebook page and also allows them to become a fan with just one click. The only potential downsides to adding a fan box to your page is that it is not easy to customize or the original styling just doesn’t match up with the unique style of your site. Well not anymore, in this tutorial we are going to teach you how to customize your very own facebook fan box.

This tutorial will teach you step by step how to customize your facebook fan box to look like ours. After completing this tutorial you should be able to play around with the code and make modifications that you see fit to change the styling to your own needs.

4/29/10 – This tutorial has been updated to allow full customization of the Facebook Fan Box and positioning of the new “Like” button.

Setting Up Your Widget

Step 1 – Get Your Facebook Fan Box Code

First things first you need to get the code for your facebook fan box from facebook, your code should look something similar to the code below.

2 <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
3 <fb:fan profile_id="34572893685" stream="0" connections="10" logobar="0" width="300"></fb:fan>
4 <div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/North-Miami-FL/Daddy-Design/34572893685">Daddy Design</a> on Facebook</div>

facebook fan box default styling

Step 2 – Linking Your CSS

The second step is to set up the linking to your css code and adjusting your facebook fan box code to allow for the customization you’re about to start. The div associated at the end of the original fan box code is only a link back to your facebook page, we decided to remove it, however you may choose to leave it. Items that we have changed in our code are the width from 300 to 240 and connections from 10 to 8, your width and number of connections may change depending on the space available for your fan box. Items we have added are height at 200 (also subject to change) and the line of code to link to our css stylesheet. Please view the updated coded below.

2 <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
3 <fb:fan profile_id="34572893685" stream="0" connections="8" logobar="0" width="240" height="200" css="http://www.yoursite.com/stylesheet.css?1"></fb:fan>

One important item to take notice of is ‘?1’ which appears at the end of the css link, this item is the cache level for the facebook fan box, every time you make changes to the css inside your stylesheet and upload to your server you must change the number after the question mark to correspond with the number of edits you have made.

Here’s another handy tip, if you are using wordpress you can insert your code to look like the code below, this will link straight to your wordpress stylesheet. (Make sure you edit the ‘?1′ accordingly.)

css="<?php bloginfo('stylesheet_url'); ?>?1"

Styling Your Widget with CSS

Step 1 – Styling the Main Widget

The first step in customizing the css is to fix link hover issues and to remove any unneeded styling from the main widget. Check the first set of css modifications below.

1 .fan_box a:hover{
2   text-decorationnone;
3 }
4 .fan_box .full_widget{
5   height200px;
6   border0 !important;
7   backgroundnone !important;
8   positionrelative;
9 }

In lines 1 through 3 of the code we have removed the underline hover effect for all links inside the fan box to avoid any type of conflicts. In lines 4 through 9 of the code we have removed the border from around the full fan box widget, set the height to match our widget height, removed the background, and positioned it to allow for the moving of the “Like” button. One thing to keep notice of is the usage of ‘!important’, this is a css trick that will override the already used css code inside of the widget, anything that we change that currently has any values associated with it must use this code or else the original code will still take priority.

facebook fan box - step 1

Step 2 – Styling the Widget Header

The second step in customizing the css is to adjust the fan box header. Check the second set of css modifications below.

01 .fan_box .connect_top{
02   backgroundnone !important;
03   padding0 !important;
04 }
05 .fan_box .profileimage, .fan_box .name_block{
06   displaynone;
07 }
08 .fan_box .connect_action{
09   padding0 !important;
10 }

We are basically going to be getting rid of everything in the widget header except for the “Like” button, which we will position to the bottom of our widget later. In lines 1 through 4 we have gotten rid of the light blue background color for the header and removed all of the headers padding. In lines 5 through 7 we have completely removed both the main profile name and image. In lines 8 through 10 we have removed padding associated with the “Like” button that was not needed.

facebook fan box - step 2

Step 3 – Styling Fan Connections

The third step in customizing the css is to adjust the actual fb fan connections. Check the third set of css modifications below.

01 .fan_box .connections{
02   padding0 !important;
03   border0 !important;
04   font-familyArialHelveticasans-serif;
05   font-size11px;
06   font-weightbold;
07   color#666;
08 }
09 span.total{
10   color#FF6600;
11   font-weightbold;
12 }
13 .fan_box .connections .connections_grid {
14   padding-top10px !important;
15 }
16 .fan_box .connections_grid .grid_item{
17   padding0 10px 10px 0 !important;
18 }
19 .fan_box .connections_grid .grid_item .name{
20   font-family"lucida grande",tahoma,verdana,arial,sans-serif;
21   font-weightnormal;
22   color#666 !important;
23   padding-top1px !important;
24 }

In lines 1 through 8 of the code we adjusted the padding surrounding the fan box connections, removed the border at the top, and adjusted the font for the line of text that displays “X people like Profile Name”. In lines 9 through 12 of the code we have adjusted the color and font weight of the number of fans displayed. In lines 13 through 15 of the code we have adjusted the padding between the line of text and the actual fan connections. In lines 16 through 18 of the code we have adjusted the padding between the actual fan connections. In lines 19 through 24 of the code we have adjusted the actual fan name, make sure that you DO NOT change the font family, if changed it may cause alignment issues with the connections.

facebook fan box - step 3

Step 4 – Positioning the “Like” Button

The fourth and final step in customizing the css is to position the “Like” button. Check the fourth and final set of css modifications below.

01 .fan_box .connect_widget{
02 positionabsolute;
03 bottom0;
04 right10px;
05 margin0 !important;
06 }
07 .fan_box .connect_widget .connect_widget_interactive_area {
08 margin0 !important;
09 }
10 .fan_box .connect_widget td.connect_widget_vertical_center {
11 padding0 !important;
12 }

With the addition of this block of code the “Like” button will now appear at the bottom right of our fan box widget. How does this work? It works because earlier we used relative positioning on the main widget div in Step 3, whenever relative positioning is used on an element you can then use absolute positioning to position another element anywhere inside of the main element. The way to position the element is by using the attributes top, bottom, left, and right depending on where you want to move the element. In our situation we wanted it to be at the bottom right of our widget so we used the attribute bottom with a position of 0 and right with a position of 10px. The reason we used 10px for right instead of 0 is because we had added 10 pixels of right padding to each of our fan connections, this way the button and fan image will line up correctly. Lines 1 through 6 of the code are used to position the actual div to the bottom right of the widget. In lines 7 through 12 of the code we have removed padding and margin associated with the “Like” button and its surrounding table data so that it will align properly.

facebook fan box - step 4

Complete CSS Code

Below is all of the css code from the previous 4 steps combined together.

01 .fan_box a:hover{
02   text-decorationnone;
03 }
04 .fan_box .full_widget{
05   height200px;
06   border0 !important;
07   backgroundnone !important;
08   positionrelative;
09 }
10 .fan_box .connect_top{
11   backgroundnone !important;
12   padding0 !important;
13 }
14 .fan_box .profileimage, .fan_box .name_block{
15   displaynone;
16 }
17 .fan_box .connect_action{
18   padding0 !important;
19 }
20 .fan_box .connections{
21   padding0 !important;
22   border0 !important;
23   font-familyArialHelveticasans-serif;
24   font-size11px;
25   font-weightbold;
26   color#666;
27 }
28 span.total{
29   color#FF6600;
30   font-weightbold;
31 }
32 .fan_box .connections .connections_grid {
33   padding-top10px !important;
34 }
35 .fan_box .connections_grid .grid_item{
36   padding0 10px 10px 0 !important;
37 }
38 .fan_box .connections_grid .grid_item .name{
39   font-family"lucida grande",tahoma,verdana,arial,sans-serif;
40   font-weightnormal;
41   color#666 !important;
42   padding-top1px !important;
43 }
44 .fan_box .connect_widget{
45 positionabsolute;
46 bottom0;
47 right10px;
48 margin0 !important;
49 }
50 .fan_box .connect_widget .connect_widget_interactive_area {
51 margin0 !important;
52 }
53 .fan_box .connect_widget td.connect_widget_vertical_center {
54 padding0 !important;
55 }

Troubleshooting

If you are trying to edit the css and no changes are showing up, make sure you are adjusting the cache level at the end of the css link in the widget code.

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still can not get it to work please leave us a comment below and we will respond as soon as possible.

Note

4/20/10 – Facebook has currently just changed the “Become a Fan” button to the new “Like” button. We are awaiting any further changes to the Fan Box and once things appear to calm down we will update this tutorial. Keep checking back…

4/29/10 – This tutorial has been updated to allow full customization of the Facebook Fan Box and positioning of the new “Like” button.

 
Leave a comment

Posted by on May 16, 2012 in Facebook

 

How To Create a Cool Animated Menu with jQuery

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

 

View the animated menu demo

The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users.

View the animated menu demo

Build the Photoshop concept

Create a new document and fill the background with a light beige. Add a subtle 1.5% noise texture by going to Filter > Noise > Add Noise.

Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Adjust the opacity to tone down the distressed effect.

Draw and fill a rectangle to create the base of the label graphic. Press CMD+T to transform the shape, then drag a guide to highlight the centre point.

Use the Polygonal Lasso tool to draw a small triangle. Use this triangle to clip out the bottom edges. Flip the selection horizontally and align with the guide to ensure the clipping is symmetrical.

Begin adding a range of Layer Style effects to bring the label to life. Start with a Gradient Overlay to add a range of dark to light red tones.

Add a thin stroke using a dark red colour selection with settings of 2px width and aligned to the inside.

Set up an Inner Glow using a slightly lighter red with 100% opacity, Normal blending mode, 50% Choke and 3px in size.

Add a soft Drop Shadow aligned to 90 degrees to give the impression of depth. Reduce the opacity to around 20% to tone down the effect.

Finish off the label with a distressed texture using the subtle grunge brushes. Load the selection of the label shape, inverse and delete out the excess. Change the blending mode to Lighter Color at 35%.

All the menu needs now is a series of text links. Set the fonts up with Helvetica Bold and choose a fill colour from the label. Simulate the hover effect by switching the fill to beige on the active link.

Make a selection of the label graphic and export the image as a PNG24 file with Alpha transparency.

The demo file uses just three images: A textured background image, the red label graphic and a repeating noise texture.

Create the basic HTML structure

View the HTML code

The basic menu system first needs to be laid out as a HTML skeleton. Begin the page with a Doctype, followed by page title and a link to the CSS stylesheet. Write out the menu itself as a good old Unordered List element, with each <li> item containing an anchor.

Style up the design with CSS

View the CSS code

Next, the CSS brings the design to life. Begin the CSS file with a quick reset to remove any default browser styling, then set up the surrounding page design by adding the repeating noise background texture to the page body. Centre up the <ul> with margin: auto; and text-align: center; and clear the element using overflow: hidden;.
Float each <li> item to the left to place each nav item side by side. The rest of the styling can then go directly onto the anchors. Each anchor needs to have the exact dimensions of the label graphic, taking into consideration any padding used to position the text into place. Replicate the font styling from Photoshop using the same bold Helvetica styling, and use the CSS3 text-shadow property to recreate the Photoshop Drop Shadow. Finally, add the label graphic as a background image and set the position to -149px so it is hidden off screen until the mouse hovers the nav item.
Set up the styling for the :hover effects by moving the background back into position and alter the colour of the font and shadow to ensure they can still be seen when the background colour changes.

A preview of the HTML file so far will show a fully working menu design, albeit with basic CSS styling where the label immediately appears and disappears without any cool sliding effects. It’s important to first develop this basic fall back so users without Javascript enabled will still see a hover effect.

Spice up the effect with jQuery

View the Javascript code

In order to add some fancy Javascript effects we first need to head back to the HTML file and link up some JS files. We’ll require three files: The jQuery library, a handy plugin allowing background position animation, and finally our own blank scripts.js file where we’ll write our own code.

View the jQuery code

The first thing to add to our jQuery code is a simple line to turn off the basic CSS effect. Adding a special ‘.js’ class to the anchor with Javascript allows us to add an extra line of CSS to overwrite the original styling. With this out of the way we can then style the actual sliding hover effect. Add a hover function to the anchors within the menu list. On hover, use .animate() to set thebackgroundPosition to 0 0, then back off screen on hover-out. A speed of 200 keeps things nice and swift. One extra snippet to add is a.stop(true,true) to prevent the effect looping if the mouse passes over the menu quickly.

View the extra jQuery code

A preview of the effect in the browser will show the label sliding in and out on hover. We can add one extra line to really spruce up the effect. Adding an extra animation to move the label by just 5px creates a cool little bounce effect. Similar effects can also be achieved using easing plugins, but to save linking up extra files this little trick works nicely.

The complete HTML, CSS & jQuery code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f5f0e0 url(images/noise.png);
}

#container {
	height: 800px;
	background: url(images/bg.jpg) center top no-repeat;
}

ul#nav {
	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
		float: left; list-style: none;
	}
		ul#nav li a {
			display: block; width: 97px; height: 77px;
			padding: 72px 0 0 0; margin: 0 32px 0 32px;
			font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
			color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

			background: url(images/label.png) 0 -149px no-repeat;
		}
			ul#nav li a:hover {
				background: url(images/label.png) 0 0 no-repeat;
				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
			}

			ul#nav li a.js:hover {
				background: url(images/label.png) 0 -149px no-repeat;
			}

jQuery

$(document).ready(function() {
	$("ul#nav li a").addClass("js");
	$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

The final animated menu design

View the animated menu demo

View the animated menu demo

 
Leave a comment

Posted by on May 16, 2012 in Facebook

 

How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page

Hiding content from Facebook users until they ‘Like’ your fan page is a great way to increase the amount of fans following your page by giving users extra incentive to actually want to ‘Like’ your fan page. By utilizing fb:visible-to-connection a handy piece of built in FBML code we will be able to easily hide content from users until they ‘Like’ your page and become a fan. While this technique is not new and there are already numerous tutorials around on the subject our approach is different. We have simplified our technique in this tutorial to help alleviate some of the confusion we noticed from other tutorials. We have also solved a major issue for page admin’s who cannot see the actual fan content while logged in, however you still must log out in order to test the non-fan content.

PLEASE NOTE: The tutorial below is for FBML only! To learn how to accomplish this for an iFrame, please check out our Fan Gate Reveal Tab Iframe version here:http://www.daddydesign.com/wordpress/how-to-use-a-fan-gate-on-your-iframe-tab-to-hide-content-until-someone-likes-your-facebook-fan-page/

Step 1: Building the Fan Content DIV

The first step is to build the DIV which will house all of your content that will be visible to your Facebook fans. In order for the non-fan content DIV to be able to cover up the fan content DIV when a user hasn’t ‘Liked’ your fan page a specific height must be used, this same height will also be used on the non-fan content DIV in Step 2. Also please note the usage of the attribute z-index; this will be addressed in Step 2.

CSS

1 .fan_content{
2 width: 520px;
3 height: 500px;
4 float: left;
5 position: relative;
6 background: #ccc;
7 z-index: 1;
8 }

XHTML

1 <div class="fan_content">Fan Content Goes Here</div>

Step 2: Building the Non-Fan Content DIV

The next step is to build the non-fan content DIV which will house your image or content telling users in whatever way you choose to ‘Like’ your fan page in order to view the hidden content. In Step 1 we set a specific height for our fan content DIV, we are going to use that same height on our non-fan content DIV in order to make sure we cover up all of the content we want to hide from non-fans. We will also use that same height and apply it as a negative number to our margin-top attribute; this will ensure that our non-fan content DIV covers up our content DIV exactly pixel for pixel. Remember in Step 1 we set our z-index attribute to 1, well on our non-fan content DIV we will set the z-index attribute to 0, this will ensure that when you are logged in as admin you will always see the fan content instead of the non-fan content.

CSS

1 .non_fan_content{
2 width: 520px;
3 height: 500px;
4 float: left;
5 position: relative;
6 background: #666;
7 margin-top: -500px;
8 z-index: 0;
9 }

XHTML

1 <div class="non_fan_content">Non-Fan Content Goes Here</div>

Step 3: Wrapping the Content DIVs

The next step is a relatively simple step and is just a coding preference to keep all of the content contained, it is totally optional. Apply the following CSS and wrap your previous two DIVs with the wrapper DIV. The benefit in doing this step is that by setting the overflow attribute to hidden we guarantee that all of our content stays contained within the wrapper DIV. Please note that if you’ve used any other wrapper DIVs in your code please make sure that none of the code conflicts.

CSS

1 .wrapper{
2 width: 100%;
3 float: left;
4 position: relative;
5 overflow: hidden;
6 }

XHTML

1 <div class=”wrapper”>
2    <div class="fan_content">Fan Content Goes Here</div>
3   <div class="non_fan_content">Non-Fan Content Goes Here</div>
4 </div>

Step 4: Making it Work with FBML’s fb:visible-to-connection

The last and final step is to make it all work using FBML’s fb:visible-to-connection code to show content depending on whether or not the Facebook user has ‘Liked’ your fan page. Basically all that needs to be done is wrap both of your content DIVs inside of the fb:visible-to-connection tag and then wrap all of your non-fan content inside of the fb:else tag. After you have your final code upload it to your Static FBML tab and test it while both logged in and logged out, while logged in your fan content should be visible and while logged out your non-fan content should be visible. It’s that simple!

1 <div class="wrapper">
2   <fb:visible-to-connection>
3     <div class="fan_content">Fan Content Goes Here</div>
4   <fb:else>
5     <div class="non_fan_content">Non-Fan Content Goes Here</div>
6   </fb:else>
7   </fb:visible-to-connection>
8 </div>

Complete Code

CSS

01 .wrapper{
02 width: 100%;
03 float: left;
04 position: relative;
05 overflow: hidden;
06 }
07 .fan_content{
08 width: 520px;
09 height: 500px;
10 float: left;
11 position: relative;
12 background: #ccc;
13 z-index: 9;
14 }
15 .non_fan_content{
16 width: 520px;
17 height: 500px;
18 float: left;
19 position: relative;
20 background: #666;
21 margin-top: -500px;
22 z-index: 0;
23 }

XHTML

1 <div class="wrapper">
2   <fb:visible-to-connection>
3     <div class="fan_content">Fan Content Goes Here</div>
4   <fb:else>
5     <div class="non_fan_content">Non-Fan Content Goes Here</div>
6   </fb:else>
7   </fb:visible-to-connection>
8 </div>

Please Note:

This tutorial will only work for Facebook Static FBML.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still can not get it to work please leave us a comment below and we will respond as soon as possible.

 
Leave a comment

Posted by on January 16, 2012 in Facebook