Actions

Work Header

Facebook Post Work Skin

Work Text:

I made this skin for one of my fics on my main AO3 account, so the resulting design is pretty simple. However, I thought I'd put it here in case anyone else is just dying to write Facebook posts into their own works—please feel free to leave a comment if you have any questions or want to add anything to it! ^___^

WHAT IT SHOULD LOOK LIKE

Hanyang University Confessions
#5245
does anyone know if 1st year kang XX from the medicine department has a girlfriend? he’s super cute...

😲👍❤️ Park Jiwoo and 42 others

Kim Jinah
lol why is everyone going crazy in the comments??? what does he look like

Park Jiwoo
Jinah https://www.instagram.com/kangmini.02/

Kim Jinah
Jiwoo .......i'd like to request a refund on behalf of the computing department

Ham Yujin
i have morning bio lecture with him ㅠㅠ seriously how can someone look that good at 8am...

View more comments (21 of 50)


HOW TO USE WORK SKINS

If you don't know how to use work skins, refer to this handy-dandy AO3 guide. All you have to do is create a new work skin, copy paste the CSS code on this page, and then apply it to whatever fic draft you're working on.

DESIGN NOTES

This design is based on how Facebook currently looks on my desktop as of 2021. It isn't an exact match because I'm partial to designs that "integrate" into fics well and I wanted to achieve a balance between minimalism and exact replica (and also I was lazy), but it should do the job. Of course, if you have any CSS/HTML knowledge and would like to tweak this to your liking, do whatever you'd like! This skin should also still be presentable with Creator's Style off.

REACTIONS

Unfortunately the Facebook "care" emoji isn't really feasible with this design style (again, feel free to replace the emojis with images if you'd really like to! It was a personal design choice to just use default emojis), but you can emulate the rest easily. Emojis shouldn't be giving you trouble on AO3 anymore, so you should be able to just paste these in directly:

👍❤️🤣😲😡

CODE

You need both CSS and HTML to get this skin to work; the CSS can be pasted as-is and tweaked to your liking, while the HTML is your actual content. See below:

CSS

Again, this is the stuff that goes directly into your work skin. Just copy-paste and don't worry about it unless you want to make your own tweaks. The "comment" class refers to the main comments under a post, while the "reply" class refers to replies to the comments themselves.

#workskin .fb {
  margin: auto;
  max-width: 500px;
  color: #050505;
  font-size: 14px;
  font-family: 'Helvetica', sans-serif;
  background-color: #fff;
  padding: 1px 20px;
  border-radius: 10px;
}

#workskin .fb a {
  color: #1876f2;
}

#workskin .fb-comment {
  border-radius: 20px;
  background-color: #f0f2f5;
  padding: 10px 15px;
}

#workskin .fb-reply {
  border-radius: 20px;
  background-color: #f0f2f5;
  margin-left: 40px;
  padding: 10px 15px;
}

#workskin .fb-name {
  font-size: 13px;
}

#workskin .fb-grey {
  color: #65676b;
}

#workskin .fb-hashtag {
  color: #1876f2;
}

HTML

This is the stuff that goes into your actual "Work Text" section when you're posting fic. Make sure you're in the HTML tab and paste in this template. Then replace anything in brackets (including the brackets) like [Text] with your actual content! Also replace the emojis with whatever you'd like.

<div class="fb"><p>
    <b>[Facebook Name]</b><br />
    [Facebook status text goes here] <span class="fb-hashtag">[#hashtag]</span>
</p>

<p>
    <span class="fb-grey">🤣😢❤️ [Name] and [10] others</span>
</p>

<p class="fb-comment">
    <span class="fb-name"><b>[Comment name]</b></span><br />
    [Comment content]
</p>

<p class="fb-reply">
    <span class="fb-name"><b>[Comment Reply name]</b></span><br />
    [Reply text]
</p>

<p class="fb-reply">
    <span class="fb-name"><b>[Comment Reply name]</b></span><br />
    <b>[Name to @]</b> <a href="[Actual link]" rel="nofollow">[Link to be shown]</a>
</p>

<p class="fb-reply">
    <span class="fb-name"><b>[Comment Reply name]</b></span><br />
    <b>[Optional name]</b> [reply text]
</p>

<p class="fb-grey">
    <b>View more comments ([17] of [27])</b>
</p></div>

This is all pretty simplified and minimalist, but I hope this helps! If I ever make a better emulation of the Facebook look that I feel is still templateable, I'll do my best to add another chapter or update the code here n___n

03/01/21 edit: Added some code to support various site skins (styled white background that will only show up on site skins with differently colored background). Make sure your HTML code doesn't have extra br tags inside the div block so the styling doesn't look off!