InsaneJournal

Tweak says, "It's only time"

⁝ (drunkenough) wrote in rp_tutorials,
@ 2010-12-28 16:36:00

Entry tags:

layouts: media, layouts: media: facebook

new facebook profile code

I was recoding my characters' old Facebooks to reflect the new Facebook profile and thought I'd share the code here in case anyone else is interested. Larger preview, images, and directions behind the cut! Tested in Safari and Firefox.

Home Profile Find Friends Account


Wall
Info
Photos
Friends
Family
	First Last Relation
	First Last Relation
	First Last Relation


Friends (###)
	First Last
	First Last
	First Last
	First Last
	First Last
	First Last
	First Last
	First Last
	First Last
	First Last

Character Name

Works at Place of Employment (Position) Went to [or 'Studies at'] Name of institution Lives in City, State Married to First Last From City, State Born on Month Day, Year



Education and Work
Employers		Place of Employment Position

College		Name of College Class of YEAR · Degree

High School		Name of High School Class of YEAR

Philosophy
Religious Views		Religious views

Political Views		Political views

Arts and Entertainment
Music
	Music 1	Music 2	Music 3	Music 4
	See More...

Books
	Book 1	Book 2	Book 3	Book 4
	See More...

Movies
	Movie 1	Movie 2	Movie 3	Movie 4
	See More...

Television
	TV 1	TV 2	TV 3	TV 4
	See More...

Activities and Interests
Activities		Activity 1

		Activity 2
	See More...

Interests
	Interest 1	Interest 2	Interest 3	Interest 4
	See More...

	Show Other Pages

Basic Information

About [Name]	About [name]

Sex	Sex

Relationship Status	Relationship Status

Contact Information
Phone	Phone

Address	Address

Screen Name(s)	Screen Name 1 Screen Name 2

Email	Email

Website	Website

Rules & Directions

Please save all images and upload them to your own server!
No credit is necessary, but a link back to rp_tutorials would be nice so others can find the code if they want it.
Let me know if you have any issues or questions about the code, or if you've noticed that I've left something out. I use Facebook profiles for my rp characters, but I'm not a regular Facebook user in real life - the possibility of me leaving something out is very possible! I'll be happy to help with the code or add anything that is missing. XD
You might need to modify some of the text or remove some of the sections depending on where your character is in life. Let me know if you need any additional help with the modifications.
!!! Most importantly: You MUST disable auto-formatting or the code will not display properly.
If you want, link me if you use it and I'll list it as an example!

Note for LiveJournal users: Although this code is compatible on InsaneJournal in both Firefox and Safari (IE & Opera have not been tested yet--but you can let me know if you have any issues!), I've just noticed that there are minor problems with the code in Firefox when used on LiveJournal. The code is compatible with LiveJournal if you use Safari, though. I will work to fix the code so that it's fully compatible with LJ as soon as I have time! Because the issues are minor, it should be pretty easy to straighten out. Sorry for any inconvenience. :)

Fixed! :)

The Code

<center><lj-cut text="facebook profile"></center>
<table bgcolor="#ffffff" width="600" align="center" cellpadding="5" cellspacing="0"><tr bgcolor="#3a589d"><td colspan="1"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/screen-capture-1.png"></td>
<td colspan="1" align="right">Home Profile Find Friends Account</td></tr>

<tr><td colspan="2"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/images-1.png"> Photos </td></tr>

<tr><td colspan="2" style="border-style: none none solid none; border-width:1px; border-color:#cccccc;"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/group-1.png"> Friends </td></tr>

<tr><td colspan="2">Family</td></tr>
<tr><td colspan="1" width="50"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbmale.png" width="50" height="50"></td>
<td colspan="1" width="" valign="top" align="left">First Last 
Relation</td></tr>

<tr><td colspan="1" width=""><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbmale.png" width="50" height="50"></td>
<td colspan="1" width="" valign="top" align="left">First Last 
Relation</td></tr>

<tr><td colspan="2" width="">Friends (###)</td></tr>
<tr><td colspan="1" width=""><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbfemale.png" width="50" height="50"></td>
<td colspan="1" width="" valign="top" align="left">First Last</td></tr>

<tr><td colspan="1" width=""><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbfemale.png" width="50" height="50"></td>
<td colspan="1" width="" valign="top" align="left">First Last</td></tr>
<tr><td colspan="2" style="border-style: none none solid none; border-width:1px; border-color:#cccccc;"> </td></tr></table></td>

<td valign="top" style="border-style: solid solid solid solid; border-width:1px; border-color:#cccccc;">Character Name

<table><tr><td colspan="5" valign="top">
 <img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/work.png"> Works at Place of employment (position) <img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/school.png"> Went to [or 'Studies at'] Name of institution <img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/livesin.png"> Lives in City, State <img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/screen-capture.png"> Married to First Last <img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/home.png">From City, State <img src="http://i310.photobucket.com/albums/kk420/bscgirl10/Tiny%20Icons/bday.png">Born on Month Day, Year</td></tr>

<tr height="15"><td colspan="5" valign="top" bgcolor="#f2f2f2">Education and Work</td></tr>

<tr><td colspan="1" valign="top">Employers</td>
<td valign="top"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbwork1.png" width="50" height="50"></td>
<td colspan="2" valign="top">Place of Employment 
Position</td></tr>
<tr><td colspan="5" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"></td></tr>

<tr><td colspan="1" valign="top">College</td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbcollege.png" width="50" height="50"></td>
<td colspan="2" valign="top">Name of College 
Class of YEAR · Degree</td></tr>

<tr><td colspan="1" valign="top">High School</td>
<td valign="top"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbcollege.png" width="50" height="50"></td>
<td colspan="2" valign="top">Name of High School
Class of YEAR</td></tr>

<tr height="15"><td colspan="5" valign="top" bgcolor="#f2f2f2">Philosophy</td></tr>

<tr><td colspan="1" valign="top">Religious 
Views</td>
<td valign="top"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="50" height="50"></td>
<td colspan="2" valign="top">Religious views</td></tr>
<tr><td colspan="5" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"></td></tr>

<tr><td colspan="1" valign="top">Political
Views</td>
<td valign="top"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="50" height="50"></td>
<td colspan="2" valign="top">Political views</td></tr>
<tr><td colspan="5" style="border-style: none none solid none; border-width:1px; border-color:#cccccc;"> </td></tr>

<tr height="15"><td colspan="5" valign="top" bgcolor="#f2f2f2">Arts and Entertainment</td></tr>

<tr><td colspan="1" valign="top">Music</td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td></tr>

<tr style="border-style: none solid none none; border-width:1px; border-color:#cccccc;"><td></td>
<td>Music 1</td>
<td>Music 2</td>
<td>Music 3</td>
<td>Music 4</td></tr>
<tr><td colspan="1"></td>
<td colspan="4" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"><center>See More...</center></td></tr>
<tr><td colspan="5" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"> </td></tr>

<tr><td colspan="1" valign="top">Books</td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td></tr>

<tr><td colspan="1" valign="top">Movies</td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td></tr>
<tr><td></td>
<td>Movie 1</td>
<td>Movie 2</td>
<td>Movie 3</td>
<td>Movie 4</td></tr>
<tr><td colspan="1"></td>
<td colspan="4" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"><center>See More...</center></td></tr>
<tr><td colspan="5" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"> </td></tr>

<tr><td colspan="1" valign="top">Television</td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td></tr>
<tr><td></td>
<td>TV 1</td>
<td>TV 2</td>
<td>TV 3</td>
<td>TV 4</td></tr>
<tr><td colspan="1"></td>
<td colspan="4" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"><center>See More...</center></td></tr>
<tr><td colspan="5" style="border-style: solid none solid none; border-width:1px; border-color:#cccccc;"> </td></tr>

<tr height="15"><td colspan="5" valign="top" bgcolor="#f2f2f2">Activities and Interests</td></tr>

<tr><td colspan="1" valign="top">Activities</td>
<td colspan="1" valign="top"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="50" height="50"></td>
<td colspan="3" valign="top">Activity 1</td></tr>

<tr><td colspan="1"></td>
<td colspan="1" valign="top"><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="50" height="50"></td>
<td colspan="3" valign="top">Activity 2</td></tr>
<tr><td colspan="1"></td>
<td colspan="4" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"><center>See More...</center></td></tr>
<tr><td colspan="5" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"> </td></tr>

<tr><td colspan="1" valign="top">Interests</td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td>
<td><img src="http://i310.photobucket.com/albums/kk420/bscgirl10/CDJ/Coding/fbblank.png" width="80" height="80"></td></tr>
<tr><td></td>
<td>Interest 1</td>
<td>Interest 2</td>
<td>Interest 3</td>
<td>Interest 4</td></tr>
<tr><td colspan="1"></td>
<td colspan="4" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"><center>See More...</center></td></tr>
<tr><td colspan="5" style="border-style: solid none none none; border-width:1px; border-color:#cccccc;"> </td></tr>

<tr><td colspan="1"></td>
<td colspan="4" valign="top" align="left">Show Other Pages</td></tr>

<tr height="15"><td colspan="5" valign="top" bgcolor="#f2f2f2">Basic Information</td></tr>

<tr><td colspan="1" valign="top">About [Name]</td>
<td colspan="4" valign="top">About [name]</td></tr>

<tr><td colspan="1" valign="top">Relationship 
Status</td>
<td colspan="4" valign="top"> Relationship Status </td></tr>

<tr height="15"><td colspan="5" valign="top" bgcolor="#f2f2f2">Contact Information</td></tr>

<tr><td colspan="1" valign="top">Phone</td>
<td colspan="4" valign="top">Phone</td></tr>

<tr><td colspan="1" valign="top">Address</td>
<td colspan="4" valign="top">Address</td></tr>

<tr><td colspan="1" valign="top">Screen Name(s)</td>
<td colspan="4" valign="top">Screen Name 1 
Screen Name 2</td></tr>

<tr><td colspan="1" valign="top">Email</td>
<td colspan="4" valign="top">Email</td></tr>

<tr><td colspan="1" valign="top">Website</td>
<td colspan="4" valign="top">Website</td></tr></table></td></tr></table></lj-cut>

Examples
example 1
example 2

Images

(Post a new comment)

	advertisemyrp 2010-12-28 09:47 pm UTC (link)
	This looks incredible! Really great work :) (Reply to this) (Thread)

	drunkenough 2010-12-28 09:52 pm UTC (link)
	Thank you!! Glad you like it. ♥ (Reply to this) (Parent)

	wastintime 2010-12-28 09:57 pm UTC (link)
	This is amazing and I wish I had a use for it. (Reply to this) (Thread)

	drunkenough 2010-12-28 11:34 pm UTC (link)
	Thank you! <3 (Reply to this) (Parent)

	nympholepsy 2010-12-28 11:29 pm UTC (link)
	cool, ty! i use fakebooks all the time and wasn't happy with the old codes i had. (Reply to this) (Thread)

	drunkenough 2010-12-28 11:40 pm UTC (link)
	No problem, thanks for commenting! XD Glad you like it and have a use for it. ♥ (Reply to this) (Parent)

	hammertech 2010-12-29 01:39 am UTC (link)
	This is terrific! Very much like this. (Reply to this) (Thread)

	drunkenough 2010-12-29 02:10 am UTC (link)
	Thanks, glad you like! <3 (Reply to this) (Parent)

	burningstars 2010-12-29 02:07 am UTC (link)
	Amazing! Well done! (Reply to this) (Thread)

	drunkenough 2010-12-29 02:12 am UTC (link)
	<3 Thank you! I'm glad so many people seem to be liking it so far. :) (Reply to this) (Parent)

	graciebird 2010-12-29 02:32 am UTC (link)
	i have no idea when i'd use this but just wanted to say, great work! (Reply to this) (Thread)

	drunkenough 2010-12-29 02:34 am UTC (link)
	Hee, thank you sooo much! XD (Reply to this) (Parent)

	bri 2010-12-29 05:23 pm UTC (link)
	Nice job! :) (Reply to this) (Thread)

	drunkenough 2010-12-29 06:25 pm UTC (link)
	Thank you! <3 (Reply to this) (Parent)

	wakingupbroken 2011-02-25 08:47 am UTC (link)
	Using it here: http://wakingupbroken.insanejournal.com/1059.html (Reply to this) (Thread)

	drunkenough 2011-03-07 02:09 am UTC (link)
	Aww, I love the pictures you chose for the top part! Linked as an example. :) Thanks for sharing! (Reply to this) (Parent)

	lennonnotlenin 2011-03-11 01:17 am UTC (link)
	I have a question! I'm currently working on this and I noticed there's this weird gap between the name of the family member and their relationship, as well as above the first picture at the top: Any suggestions? Did I break it?! (Reply to this) (Thread)

	lennonnotlenin 2011-03-11 01:21 am UTC (link)
	I just noticed the weird gaps in the other places too. Hmm, what am I doing wrong? (Reply to this) (Parent) (Thread)

	drunkenough 2011-03-11 01:24 am UTC (link)
	Hey! Hmm, that is weird. Did you check the "Disable Auto-Formatting" option? That's the most obvious solution to come to mind, but if that's not it, let me know! I don't mind helping. :) Which site are you using it on, btw? LJ? IJ? (Reply to this) (Parent)

	drunkenough 2011-03-11 01:25 am UTC (link)
	Um.. just to clarify (because I realized that might have sounded confusing), Disable Auto-Formatting should be checked. (Reply to this) (Parent) (Thread)

	lennonnotlenin 2011-03-11 01:26 am UTC (link)
	Reading comprehension skills, I have them. That fixed it! Thanks so much! And this is awesome, btw. :) (Reply to this) (Parent) (Thread)

	drunkenough 2011-03-11 01:29 am UTC (link)
	Ha, it's easy to miss little things like that. :) You're very welcome! Glad you like it. ♥ (Reply to this) (Parent)

	harrystheone 2011-11-07 12:10 am UTC (link)
	LOVE it. Using it too. On this journal. :) (Reply to this) (Thread)

	drunkenough 2011-11-07 10:16 pm UTC (link)
	Awesome, thanks for commenting. I'm glad you have a use for it! :D (And that rpg looks very interesting! I am reading the timeline and grinning at how everything transfers over. Draco Malfoy attempts to show everyone he can ride a horse and instead falls off. He attempts to have his father sue the farm, but fails. = <3♥ ) (Reply to this) (Parent) (Thread)

	harrystheone 2011-11-08 12:01 am UTC (link)
	You're welcome! (Aha, yes! It is. We haven't started yet but you RP and have a hankering, you should totally come join us.) (Reply to this) (Parent) (Thread)

	drunkenough 2011-11-09 01:28 am UTC (link)
	Ahh, I haven't rp'd in a "normal" rpg in almost a year. I'm not against the idea of getting back into it at some point, but I don't really have any ideas at the moment. :/ Thanks for thinking of me, though! :) (Reply to this) (Parent)

	gotchatwice 2012-01-18 09:03 pm UTC (link)
	Your holeyness might dabble in this, mate. (Reply to this)

	ekalakos 2012-01-23 02:13 am UTC (link)
	I used it here! (Reply to this)

	drjohn 2014-12-26 01:02 am UTC (link)
	I didn't quite use it for facebook, but I've edited it to make a "dating profile" for one of my psls! http://drjohn.insanejournal.com/560.html#cutid1 There it is, if you'd like to have a look at it and see how someone....kind of ruined your thing? I'm probably going to use it as an actual facebook type thing too, eventually. Cause it's just too cool and awesome not to. (Reply to this)