Facebook Invite Friends Button

Facebook is rolling out some major changes to how Pages work. Some are good, some not. The good changes include the new layout of facebook Pages with the tabs on the left sidebar instead of at the top, and, starting March 11, 2011, the ability to use iframes, HTML, Javascript and CSS without the FBML App! This is going to totally change how you can develop facebook Pages! Party time!

One of the recent changes in the “not so great” category is facebook’s decision to remove the “Suggest to Friends” link on facebook Pages. Admins of a page can still access this feature in the Edit Page area, but fans cannot. So, we’ve been flooded with requests to add an Invite Friends Tab to facebook Pages.  Here are the steps for how to create the Invite Friends Tab on a facebook Page, but keep in mind that as of March 11, 2011, facebook will be deprecating the FBML App.

1. Go to  Static FBML App and click on Add to Page in the top left corner of the page. You will then see a list of your facebook pages. Click “Add to Page” to add the application.
2. FBML is now added to your page.
3. Go to the facebook Page you’re working on and click Edit Page.
4. Click on Apps.
5. Click on the FBML Apps and click on Go to App.
6. Give the Tab a title like “Suggest to Friends.”
7. Copy and Paste the below code replacing illuminea with your organization.
   Important! The action URL on line 3 of the code MUST be http://example.com and NOT http://www.example.com. No WWW welcome at this party.
   
   If you don’t follow these rules, you will get an error that says “Sorry, your request could not be processed. Please try again.”

<fb:request-form
method="post"
action="http://facebook.com/illuminea"
type="illuminea"
invite="true"
content="Connect with iluminea
<fb:req-choice url=http://www.facebook.com/illuminea label='Go' /> ">
<fb:multi-friend-selector actiontext="Invite your friends to connect with illuminea" rows="3" cols="3" showborder="true" />
</fb:request-form>

Fixed Background Image

This article provides HTML fixed background code – code for fixing the background image of an HTML element so that it doesn’t scroll when its containing block scrolls.

To fix the position of a background image, use the CSS background-attachment property

You can see this exampel;

<div style="background-image:url(/pix/smile.gif);
background-repeat:repeat;
background-attachment:fixed;
overflow:scroll;
width:200px;
height:100px;">
 
</div>

Border-radius-create rounded corners with CSS

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.

The code for this example is, in theory, quite simple:

#example1 {
border-radius: 15px;
}

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

How it Works

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

We will firstly deal with the syntax for the individual border-*-radius properties before looking at how the border-radius shorthand property works.
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).
The Syntax:
border-*-*-radius: [ | <%> ] [ | <%> ]?

Examples:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Embed Special fonts to your web page

Most of you might be having a lot of problem to make your website design look nice because you can not use special fonts to your web page as they are not supported by browsers. Here is what I have found that you can use to embed any type of special fonts to your web page.

/*Written by AJ. Use below code to put it on the top of your CSS page./
 
@charset "utf-8";
@font-face {  
	  font-family: "font/utopia.ttf";  
	  src: url(font/utopia.eot); /* IE */  
	  src: local("font/utopia.ttf"), url(font/utopia.ttf) format("truetype"); /* non-IE */  
	} 
/*Put any of your .ttf font to your font folder and upload it to the server. Fix the path as required. For IE, you need to convert your ttf font to eot. You can do it easily by googling "Convert ttf to eot". You will find plenty of free sites that converts ttf to eot. */