How to Mimic Social Media in an AO3 Work

This is in response to MANY questions from fans of Call Me Home, asking how I managed to mimic social media posts in chp 5.
For those wondering how to mimic text messages/iMessages and email windows, please see the AO3 Tutorials series by La_Temperanza.

(See the end of the work for more notes and other works inspired by this one.)

Work Text:

First, go to your Work Skins. If you are not already using one, use the option to create a new one. If you already have one that you have been working from, you will need to add the below code to that skin's CSS. This is required because you can only use one Work Skin per AO3 work/fic.

In the CSS box, you will copy-paste the following:

TO MIMIC TWITTER POSTS/TWEETS:

#workskin .tw {
max-width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: table;
margin: auto;
}

#workskin .twBody {
overflow: hidden;
background-color: #ffffff;
border-style: solid;
border-width: .1em;
border-color: #dddddd;
border-radius: .3em;
float: left;
min-width: 100%;
position: relative;
padding: 1em;
margin-left: -1em;
}

#workskin .twImage {
width: 111%;
height: auto;
margin: -1em 0em 1em -1em;
}

#workskin .twAvatar {
width: 40px;
height: auto;
float: left;
margin: 0em 0.3em .3em 0em;
border-radius: 5px;
}

#workskin .twIcon {
width: 17px;
height: auto;
}

#workskin .twFollow {
position: relative;
top: -1.7em;
width: 17px;
height: auto;
display: inline-block;
float: right;
color: #5EA9DD;
}

#workskin .twReplyIcon {
width: 17px;
height: auto;
}

#workskin .twRetweetIcon {
width: 22px;
height: auto;
margin-right: .1em;
}

#workskin .twHeartIcon {
width: 13px;
height: auto;
margin-right: .1em;
}

#workskin .twUserName {
position: relative;
top: -.2em;
font-size: 18px;
font-weight: 500;
}

#workskin .twUserHandle {
position: relative;
top: -.5em;
font-size: 16px;
font-weight: 300;
color: #697882;
}

#workskin .twText {
display: inline-block;
}

#workskin .twTimeStamp {
display: inline-block;
font-size: 14px;
width: 100%;
font-weight: 300;
color: #697882;
padding: .5em 0em .5em 0em;
}

#workskin .twRetweet {
font-size: 14px;
color: #697882;
margin: 1em 1em 1em 1em;
}

#workskin .twLike {
font-size: 14px;
color: #697882;
}

#workskin .twLink {
color: #2C7BB8;
text-decoration: none;
}

TO MIMIC LIVEJOURNAL AVATARS:

#workskin .ljavatar {
float: right;
}

Hit "Submit," and you're done creating the Work Skin. Now you need to use it.

Go to your fic, and look for the box labeled "Associations." On the field labeled "Select Work Skin" use the drop-down box to select your newly created Work Skin.

Now go to the Work Text box and make sure that "HTML" is selected. Choose the social media post you want to mimic from the options below, and then continue with this tutorial:

TWITTER POSTS/TWEETS

Post the following HTML code for every single tweet you want to mimic. Yes, every single one. I know it's long.

<div class="tw">


<img class="twAvatar" src="THIS IS WHERE YOU WILL ADD AN IMAGE LINK FOR A TWITTER AVATAR" />

THIS IS WHERE YOU WILL ADD A TWITTER USERNAME 
THIS IS WHERE YOU WILL ADD A TWITTER @ HANDLE
<img class="twFollow" src="http://imgur.com/p6lbN22.png" /> 

<a class="twLink" rel="nofollow">THIS IS WHERE YOU CAN MIMIC A LINK TO ANOTHER TWITTER @ HANDLE</a> THIS IS WHERE YOU WILL PUT THE TWEET TEXT

##:## AM/PM - # MONTH YEAR


<img class="twReplyIcon" src="http://imgur.com/9dwkilY.png" />
<img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" />
THIS IS WHERE YOU WILL MAKE UP THE NUMBER OF RETWEETS

<img class="twHeartIcon" src="http://imgur.com/67stmhs.png" />
THIS IS WHERE YOU WILL MAKE UP THE NUMBER OF LIKES
</div>

So, what does it look like? See below for an example:

Aeryn
@aerynevenstar
The cake is a lie. 2:25 PM - 1 May 2017 0 32

LIVEJOURNAL BLOG POST

<img class="center" src="http://logonoid.com/images/livejournal-logo.png" width="150" /><img class="ljavatar" src="INSERT IMAGE LINK HERE" width="150" /> 
USER'S ACTUAL NAME (<img src="https://l-stat.livejournal.net/img/userinfo_v8.svg?v=17080?v=174" />USERNAME ) wrote, 


####-##-## ##:## (INSERT DATE AND TIME)
<h4>POST TITLE</h4>


INSERT BLOG TEXT HERE


<img src="https://ginabacconi.com/skin/frontend/default/milano/images/new-icons/heart.svg" width="15" /> INSERT NUMBER OF LIKES | ###,### shares | ###,### comments

So, what does it look like? Here's an example:

Aeryn (aerynevenstar ) wrote,
2017-05-01 19:29

I have an amazing title

You're darn right I do.

1.2M | 875,239 shares | 114,371 comments

THE FRONT PAGE OF REDDIT

Post the following in the Work Text of your fic and repeat as many times as needed to achieve the look you want.

<img src="https://cdn.worldvectorlogo.com/logos/reddit-1.svg" width="40%" />



<img src="https://i.imgur.com/hKmxWZm.jpg" width="70" /> <a class="twLink" rel="nofollow">r/SUBREDDIT</a>


<img src="http://www.stickaz.com/3086-3970-large/upvote-downvote.png" width="15" />[CATEGORY] POST TITLE (LINK) 
submitted X minutes/hours ago by <a class="twLink" rel="nofollow">USERNAME</a> 
<img src="https://i.imgur.com/vFBDvvH.jpg" width="15" /> X Comments share report

So, what does it look like? See below:

r/AmazingSubreddit

[VIDEO] The most amazing video you've ever seen (youtu.be)
submitted 5 hours ago by Videophile
1.3M Comments share report

[GIF] The funniest GIF ever (i.imgur.com)
submitted 14 hours ago by GIFhunter
5K Comments share report

[MISC] I don't even know (care.org)
submitted 10 hours ago by MiscDude
39.7K Comments share report

[DISCUSSION] I SHIP IT (i.redd.it)
submitted 2 hours ago by ishipitliketitanic
4.2K Comments share report

[ART] AMAZING ART (by this amazing person) (i.redd.it)
submitted 40 minutes ago by artfan
650 Comments share report

Archive of Our Own^beta

Actions

Work Header