Credits to
Amir Faryar Zahedi

Spoiler:

Let's start :)

• Once Only Bonus
$10,000,000

Spoiler:

$5,000,000

Spoiler:

$1,000,000

Spoiler:

$30,000

Spoiler:

$25,000

Spoiler:

• Log in Bonus
The login bonus is $250,000 every 6 hours. That is $1,000,000 per day.

---

HTML HELP
Designing with HTML is not that difficult but it has to be done one step at a time. You make one change, then another and before long, your page changes completely. Start by formatting the text or adding single images. I will be happy to answer your queries and help you regarding HTML and how to customise and decorate your page.
Facebook's POST script removes many tags, therefore there are limitations on what could be included. Editing is done in the About ME section which you access by clicking on the Edit Description.
• Do not post codes directly in a wall post for me to check as they can not be seen as code.

• Applying Style
Facebook uses XHTML Strict and for better compatibility, XHTML tags should be used. In XHTML all formatting is done in the style="".But, basic tags like <b>bold</b>, <i>italic</i>, are allowed. Underline (<u>underlined</u>) is deprecated since it gets confused with links.
You can add the style to msot tags like: <div></div> or paragraph <p></p>

• Start Here
This is the basic starting point that I usuaully use.

Code:

<div style="color: purple; font-size: 1.5em; padding: 10px; text-align: center;">

To start, I am going to explain how to style the entire About Me. You can apply the styling to sections of it too, once you understand the process.
First Step: Insert <div style=""> right at the start of your About Me and </div> right at the end. It is VERY important that you don't forget the end part or else you may break the HTML of the whole page. At this point, there is no change to the display until you add the required style to the style="" part of the <div style="">
• Center Text and Images: text-align: center;
There is no need to use the <center></center> as everything will be centered.
• Change Font Size: font-size: 1.5em;
Size 1.5em basically means 1.5 times whatever it was.

• Change Text Color: color: blue;
The default color is black, so no need to use color: black; unless you have changed it and want to revert back.

• Change Font: font-family: serif;
Changing font is a bit trickier, because if you use a font that the viewer does not have, it will revert to standard font. It is usually not a good idea to specify fonts, in my view. However, you can specify Generic font families (serif, sans-serif, cursive, fantasy, monospace)

• Adding Padding: padding: 10px;
A little padding would prevent the text or images touching the edges of the container which I think looks nicer. You can use pixels or 'em' values (meaning as much space as letter 'm' occupies) for padding, like: padding 5px; or padding 1.5em;. This would add a uniform padding inside the container. You may also introduce various padding to each side i.e. top, right, bottom and left (in that order) buy using shorthand padding: 10px 5px 10px 5px;

• Adding Width: width: 200px;
Unless you want the container to be narrower than the About Me section, there is no point in adding width parameter. Let the container fill the whole About me width.

• Adding border: border: 1px solid red;
You can also set borders separately (border-top, border-right, border-bottom, border-left) i.e. border-top: 1px solid black;

• Adding Background Colour: background-color: black;

• Adding Background Image: background-image: url(http://..................);
In this example, an image is assigned to the background. It is a good idea also to include a background colour so if the image does not load for any reason, or if the image is not repeated, there is a colour instead.

• Adding Shorthand Background:
background: black url(http://..................) no-repeat right bottom;

• Background Explanation:
background-color: This is the background colour which like previous section could be name, hex, RGB, etc. It could also be set as transparent.
background-image: The location of the image on the Internet.
background-repeat: Sometimes you want the image to be repeated i.e. like tiles, or you don't want to repeat it, or you only want to repeat it vertically or horizontally. Usual values: repeat | repeat-x | repeat-y | no-repeat
background-attachment: This is to set if the background scrolls or not. Usual values: scroll | fixed
background-position: This will set where the image is placed. It can be in percentage, length or set words. Usual values (first the vertical and second the horizontal): top | center | bottom & left | center | right
If any of these attributes are not set, the default value will be used which is: repeat top left scroll

• Background for the whole Page:
Due to inconsistent support for the CSS properties (z-index), especially with Internet Explorer, such coding should not be attempted. The page will become unusable for IE users.

• Example with some of above:

Code:

<div style="color: navy; font-size: 1.5em; padding: 10px; text-align: center; background-color: #f0f8ff; background-image: url(http://backgroundsarchive.com/images/pub/2/2100xqgjbnba0q.jpg); border: 1px solid #dcdcdc;">

--- all your content ---

• HTML Line Breaks
Use the line break tag so that your text/image etc would move to the next line. Use Two break tags, one for break and the second for a line gap/space if you want it.
Break Tag: <br />

• Adding Links
Link Example:

Code:

<a href="Link to the page">Text that people can click</a>

• Adding Images
To add images, you simply use the image tag. If you wish to add a link also, you enclose the image tag with the link tag. Depending on the browser you use, to find the location of the image, just right click on the image, choose property and copy the address (or copy image location in Firefox).
Note: It is a bad idea to upload images that are available on facebook to 3rd party image sites. FB caches images and they load a lot faster. I have seen some pages that are a meter long. In my view, any page that requires more than 3 scrolls, is too long.

Blank Image Example:

Code:

<img src="" alt="" />

Blank Image plus Link Example:

Code:

<a href=""><img src="" alt="" title="" /></a>

Explanation:
href= Link to the person's page
src= location (URL) of the image on the internet
alt= Text that will be displayed if image could not be loaded, could be left blank, or put the name of the person
title= Text that would be displayed when people move their mouse over the image, could be left out, or put the name of the person

• Removing Links/Junk from Images
Look at this example:
<a href="http://www.glitter-graphics.com"><img src="http://dl9.glitter-graphics.net/pub/931/931169jw9yrqqaf6.jpg" width=307 height=432 border=0></a><br><a href="http://www.glitter-works.org" target=_blank>glitter-graphics.com</a>

All you really need is the part in BOLD
Blank image code + image url

Put it inside the code:

Code:

<img src="http://dl9.glitter-graphics.net/pub/931/931169jw9yrqqaf6.jpg" alt="" />

• Adding Picture and Link to your FFS Friends
You can use a <div></div> tag or <p></p> tag to place the images and links inside.
I centre the contents inside it, but if you are going to have text inside, it is better to use a paragraph tag and centre that too. I add a little padding so things don't get stock to the edges which I think is ugly. Without the scrollbars, 7 images will line nicely, with them maybe six. Therefore put a Line Break after every 7 sets.
I prefer to use the small thumbs, but you can use any image size that you wish. FB images come in 4 usual formats: (200 x **), (100 x **), (50 x **) and (50 x 50).
If you want the small thumb, just find the location of the images that are put next to wall comments.

Filled Example:

Code:

<a href="http://apps.facebook.com/friendsforsale/users/show/122627927"><img src="http://profile.ak.fbcdn.net/v22941/1950/11/n1263598424_7551.jpg" alt="Ghia Heyy" title="Ghia Heyy" /></a>

Due to New CSS changes to FFS, there is a limit to where you can place images outside the about me.

• Placing Images Outside About Me Section
To place images outside, the Absolute Positioning of HTML/CSS is used. Absolute positioning, is relative to the box container that it is placed in. The offset amount can be adjusted to fix the position of the image relative to its container (which is the About Me section). It does not really make any difference where inside the About Me section you enter the code, unless if you place it inside another container, but it is best to put them right at the start.
Blank Image Example:

Code:

<img src="" style="position: absolute; left: 515px; top: -80px;" alt="" />

Example:

Code:

<img src="http://sl.glitter-graphics.net/pub/722/722723zjzkg1lj8s.gif" style="position: absolute; left: 470px; top: -160px" alt="" />

Explanation:
left: This property specifies how far a box's left content edge is offset to the right of the left edge of the box's containing block. top: This property specifies how far a box's top content edge is offset below the top edge of the box's containing block . A negative figure would mean higher than the edge.
right: This property specifies how far a box's right content edge is offset to the left of the right edge of the box's containing block.
bottom: This property specifies how far a box's bottom content edge is offset above the bottom of the box's containing block.
Now, if you increase the negative 'top'..it goes up; decrease it and it goes down, so top: -400px is higher than top: -350px
If you increase the 'left' it goes right, if you decrease it, it goes left. So left: 300px will be more to the right than left: 200px. Depending on the width of the image, value bigger than left: 700px would put the image outside the page.
N.B.1 Absolute Positioning is best suited to positioning in a general area. Exact pixel-perfect positioning should not be attempted. Internet Explorer shows the image higher than Firefox and Opera.

N.B.2 Please note that covering our sponsor ads and/or your pets with graphics is a violation of our TOS, please remove the images that are covering the top banner and any images that might be covering your pets.

• Adding Scrollbars
There are times that the section is becoming too long. Like what you see on this page, I have added scrollbars since the FFS Help and HTML Help sections are very long.
In order to have compatibility with older browser that do not support overflow-y which is CSS3, I have added the overflow: auto; and made overflow-y !important;
On the examples on my page, I only set the height since I wanted the width to fill the entire section. It is possible to set the width too, if desired.
Example:

Code:

<div style="height: 400px; overflow: auto; overflow-y: scroll !important;">

--- the scrolling section ---
</div>
In this example, the total height of the section is fixed at 400 pixels and since it contains text which will automatically wrap, there would not be any horizontal scrolling. It is possible to strings a set of images without spaces which would result in horizontal scrolling. The use of horizontal scrolling is more limited and it is generally considered to be ugly.
Scroll-bar Colours:
Scrollbar colours are not standard HTML/CSS and they are not fully supported by all browsers. I personally don't use them.

• How to make a Table
Start a Table (centred): <table style="text-align: center; margin: auto;">
Start a Row: <tr>
Start/End a number of Cells: <td>....</td><td>....</td>.......
finish the first row: </tr>

Start a 2nd row: <tr>
Start/End a number of Cells: <td>....</td><td>....</td>.......
Finish the 2nd Row: </tr>
..
..
..
Start the last Row: <tr>
Start/End a number of Cells: <td>....</td><td>....</td>.......
Finish the last row: </tr>

Finish the Table: </table>
To set the width, add it as a style i.e. <td style="width: 100px;">. Remember that once you set a width for a cell, all cells under it (the column) will have that width. So you only have to set it for the <td> of the FIRST row.

• Gift Wall
Note: With so many gifts available now, the gift wall will soon become very bulky and be affected by the About Me Bug.
It is not a good idea to copy and paste the source code from the gift section of the FFS as they use floats to position items. Using floats on ONE item is fine, but using them on multiple items are very complicated and if not closed properly, they would run out of the About Me and over the minifeed section. The easiest way is to use a table and you can easily get 5-6 in a row. Once you get more, you add another row. Don't forget that since this table (for example) has 5 columns, for the next row, you need to have 5 columns too and if you don't have enough roses, you must add blank cells <td>&nbsp;</td> to make up for the missing ones. I have used an alternative image which has a transparent background. Same principle can be followed for Hearts, Tiaras and anything else.
Here is an example of a Rose Wall that you can fill and carry on the next rows:

Code:

<table style="text-align: center; margin: auto;">
<tr>
<td style="text-align: center;"><img src="http://img107.imageshack.us/img107/5510/roselz6.png" alt="" /><br />
<a href="">Name of the Person</a></td>

<td style="text-align: center;"><img src="" alt="" /><br />
<a href=""></a></td>

<td style="text-align: center;"><img src="" alt="" /><br />
<a href=""></a></td>

<td style="text-align: center;"><img src="" alt="" /><br />
<a href=""></a></td>

<td style="text-align: center;"><img src="" alt="" /><br />
<a href=""></a></td>
</tr>
</table>

• Combined Ring & Rose + Picture
Here is an example that you can fill and carry on the next rows. Replace my picture/link with a /t version picture and my name with the name of the giver

<table style="margin: auto; text-align: center;">

<tr>
<td style="vertical-align: bottom;"><a href="https://apps.facebook.com/friendsforsale/users/show/100729935"><img src="http://profile.ak.facebook.com/v229/625/56/t1457104438_6465.jpg" alt="Amir Faryar Zahedi" title="Amir Faryar Zahedi" /></a></td>
<td style="vertical-align: bottom; color: red; font-size: 1.5em; padding-right: 20px;">
<img src="http://67.228.233.11/images/gifts/engagement-ring.png" alt="" height="35" /> x1<br />
<img src="http://67.228.233.11/images/gifts/rose2.png" alt="" height="35" /> x5
</td>

<td style="vertical-align: bottom;"><a href=""><img src="" alt="" title="" /></a></td>
<td style="vertical-align: bottom; color: red; font-size: 1.5em; padding-right: 20px;">
<img src="http://67.228.233.11/images/gifts/engagement-ring.png" alt="" height="35" /> x2<br />
<img src="http://67.228.233.11/images/gifts/rose2.png" alt="" height="35" /> x10
</td>

<td style="vertical-align: bottom;"><a href=""><img src="" alt="" title="" /></a></td>
<td style="vertical-align: bottom; color: red; font-size: 1.5em; padding-right: 20px;">
<img src="http://67.228.233.11/images/gifts/engagement-ring.png" alt="" height="35" /> x3<br />
<img src="http://67.228.233.11/images/gifts/rose2.png" alt="" height="35" /> x20
</td>
</tr>

</table>

• Proper XHTML Embedding of Flash for FFS
Faebook replaces the object/embed code with its own JavaScript and ignores some parameters. The code must be in a certain format for the FB script to understand.
Please note that from <object ....... to ... </object> must be on one line.
Example (from YouTube)(Note the bold sections):

<object width="425" height="344"><param name="movie" value="https://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Code to use:

<object type="application/x-shockwave-flash" width="425" height="344"[b] data="[b]https://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1"><param name="movie" value="https://www.youtube.com/v/9a72wLT91Xg&hl=en&fs=1" /><param name="wmode" value="transparent" /></object>[/code]

Auto-play/Auto-start
YouTube: Add &autoplay=1 to the end of youtube URL
Other sites: You have to check their FAQ
Other flash ie mixpod:
Study the youtube example. If the flash has a embed src="SRC" and flashvars="FLASHVARS" element, you need to append a question mark ? and the flashvar to the end of the embed URL value so it will be SRC?FLASHVARS

• Marquee, Blink, JavaScript & <style></style>
These tags are not allowed and will be stripped by Facebook script.

Have fun and enjoy

so amazing thankz for help :)

thx for this :)

whew. harder tan i thought

dali lang nian :)
commonsense lng ang kailangn hahahha XD

thx

the ten million one is not work!

ye :)

tiffany_ann2001 wrote:

the ten million one is not work!

once lang yan nag wowork . ithink na click mo na yan dati pa XD

---

yung bonus for 1st time FFS player lang . yung ngayon plang mag lalaro ng FFS

thankz. ghiaa.

hahah. tama. common size cx

https://apps.facebook.com/friendsforsale/?s=sidenav BUY ME NAMN

thanks for the info. :D

thanks for this.