Current mood:	accomplished
Entry tags:	layouts: media, layouts: media: facebook

Layout: Facebook news feed

A mockup of a Facebook news feed was requested earlier, and... yeah, I can't resist interesting coding like that. I've made it as simple as possible to modify (each post is a table row, each comment is a self-contained table), but it still does take a little bit of effort to set up. Still, hopefully it can find some use. :) Also, I may have been reading too much Alpha Flight recently. Best dysfunctional-yet-somehow-effective Canadian superteam ever.

News Feed Top News • Most Recent  8
	Heather Hudson has joined the group Where the heck is High River??. 1 hour ago Michael Twoyoungmen likes this.
	Jean-Paul Beaubier and Peter Rasputin are now friends. 3 hours ago Aurora Beaubier qui est-ce?? 2 hours ago Marrina Smallwood The X-Man? MR BEAUBIER! ♥ 2 hours ago Jean-Paul Beaubier Don't get excited, Marrina. You'll hurt yourself. 2 hours ago
	James Macdonald Hudson Budget meeting went well. More federal dollars = more training robots, team! 3 hours ago Jean-Paul Beaubier Wonderful. We'll have even more of Canada's most expensive piles of scrap metal. 3 hours ago Heather Hudson Don't get cocky, Northstar. Mac's got some really good plans this time. 3 hours ago
	Walter Langkowski has changed his profile picture. 6 hours ago Aurora Beaubier likes this.
	Eugene Judd likes Running of the Bulls - Pamplona. 9 hours ago James Macdonald Hudson Toro! 6 hours ago Eugene Judd No, Jimmy, that's matadors. 6 hours ago
	Walter Langkowski has changed his profile picture. 9 hours ago Eugene Judd Meep meep, eh? 9 hours ago Heather Hudson LOL! 9 hours ago Walter Langkowski Very funny, Jean-Paul. I'm changing it back. 6 hours ago Jean-Paul Beaubier You think I care about you enough to hack your page? Don't flatter yourself, Langkowski. 5 hours ago Aurora Beaubier don't snap at walter, brother dear. you are sounding jealous. 5 hours ago Jean-Paul Beaubier Jealous? Please. I would sooner have Guardian than your beau. 5 hours ago James Macdonald Hudson Should I be flattered or offended by that, Jean-Paul? Can't tell. 4 hours ago
	Anne McKenzie likes Royal Canadian Mounted Police. 12 hours ago
	Jean-Paul Beaubier has joined the group Dear Lord, may Taylor Lautner never find his shirt again. Amen.. 18 hours ago Heather Hudson and Marrina Smallwood like this.
	Marrina Smallwood and Namor Imperius Rex are now engaged. 21 hours ago Heather Hudson Congratulations! When's the wedding? 21 hours ago Namor Imperius Rex Next year by the Atlantean calendar. But you mere humans will not be able to attend. 21 hours ago James Macdonald Hudson Don't tell me you're holding the wedding underwater, Marrina? 20 hours ago Marrina Smallwood Of course! ♥ you're still invited Dr. Hudson! 20 hours ago
	Walter Langkowski Gravitation cannot be held responsible for people falling in love. 1 day ago Heather Hudson and James Macdonald Hudson like this. Jean-Paul Beaubier Dislike. 1 day ago

CODE AND INSTRUCTIONS:

0. a) Remember to check the Disable Auto-Formatting button on the entry, or your spacing will be all weird and not-pretty. (This also means that if you have other stuff in the same entry, you'll have to manually put in the line breaks.)
b) Upload your characters' icons to your webspace. They should be 50 by 50 pixels. I'd suggest uploading them all to the same folder and naming them things like "newsfeedjane" and "newsfeedhenry", so that all you have to do if you copy and paste lines is replace the character's name.

1. Table setup and title area:
<center><lj-cut text="Facebook News Feed"><table width="530" border="0" cellpadding="5"><tr><td colspan="2" valign="bottom" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedlogo.png" style="vertical-align:text-center"> <font face="tahoma" size="3"><b>News Feed</b></font> <div style="float:right;"><font face="tahoma" size="2"><b>Top News</b> • <font color="#6D84B4">Most Recent</font> <span style="background-color: #6D84B4"><font color="#ffffff"><b> 8 </b></font></span></div></td></tr>

2. For each item on the news feed, copy and paste the appropriate section. Each item will be a new row in the main table.

WALL POST:
<tr><td width="50" valign="top" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="PICTURE"></td> <td style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><font face="tahoma" size="2"><font color="#6D84B4"><b>Name</b></font><br>Text text text.<br><font color="#999999">[time] ago</font><br><br> </td></tr>

JOIN A GROUP:
<tr><td width="50" valign="top" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="PICTURE"></td> <td style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><font face="tahoma" size="2"><font color="#6D84B4"><b>Name</b></font> has joined the group <font color="#6D84B4">Group name</font>.<br><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedgroup.png"> <font color="#999999">[time] ago</font><br><br> </td></tr>

RELATIONSHIP STATUS:
<tr><td width="50" valign="top" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="PICTURE"></td> <td style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><font face="tahoma" size="2"><font color="#6D84B4"><b>Name 1</b></font> and <font color="#6D84B4">Name 2</font> are now [dating/engaged/married/"It's Complicated"].<br><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedheart.png"> <font color="#999999">[time] ago</font><br><br> </td></tr>

BECOME A FAN:
<tr><td width="50" valign="top" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="PICTURE"></td> <td style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><font face="tahoma" size="2"><font color="#6D84B4"><b>Name</b></font> likes <font color="#6D84B4">Page name</font>.<br><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedfan.png"> <font color="#999999">[time] ago</font><br><br> </td></tr>

CHANGE PROFILE PICTURE:
<tr><td width="50" valign="top" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="PICTURE"></td> <td style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><font face="tahoma" size="2"><font color="#6D84B4"><b>Name</b></font> has changed his/her profile picture.<br><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedpicture.png"> <font color="#999999">[time] ago</font><br><br> </td></tr>

NEW FRIEND:
<tr><td width="50" valign="top" style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><img src="PICTURE"></td> <td style="border-style:none none solid none; border-width:1px; border-color:#cccccc"><font face="tahoma" size="2"><font color="#6D84B4"><b>Name</b></font> and <font color="#6D84B4">Name</font> are now friends.<br><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedfriends.png"> <font color="#999999">[time] ago</font><br><br> </td></tr>

3. For each sub-comment under a post, insert the following code before the </td></tr>. Each sub-comment is its own table.

"LIKE":
<table width="480"><tr><td bgcolor="#edeff4"><img src="http://i59.photobucket.com/albums/g311/Callirhoe/newsfeedlike.png" style="float: left; padding: 1px 3px 1px 1px;"><font face="tahoma" size="2"><font color="#6D84B4">Name</font> likes this.</font></td></tr></table>

TEXT COMMENT:
<table width="480"><tr><td bgcolor="#edeff4"><img src="PICTURE" width="32" height="32" style="float: left; padding: 3px 5px 3px 3px;"> <font face="tahoma" size="2"><font color="#6D84B4"><b>Name</b></font> Text text text.<br><font color="#999999">[time] ago</font></font></td></tr></table>

4. Don't forget to finish off the table:
</table></lj-cut></center>

NOTES:
1. It would be nice if you could upload the itty-bitty icons to your own webspace, for the sake of preventing me from running out of bandwidth and causing headaches. Thank you!
2. Modify to your heart's content. If you have problems with it or find any errors in the coding, please let me know.
3. A link back to rp_tutorials somewhere so other people can find this if they like it would be awesome.
4. If you use it, feel free to comment here with a link and I'll post it up as an example.