Chapter Text
This is a tutorial(ish) on how to recreate the look of an Instagram post in your fic via a workskin. Here in Chapter 1 there's four examples of Instagram posts that showcase the different variations and options you can change out or add. Chapter 2 has the CSS and HTML.
therealjhudora • Follow
5.6K
103
therealjhudora Hehe.. soon the whole of #Faerieland will be under MY control! @queenfyora will be mad when she finds out what I am doing...
View all 103 comments
illudoraftw u tagged her, fyoras gonna find out like right away
darkfaeriedreams i've been #teamjhudora from the start!
battledome4lyfe meh. j-pots are outclassed these days and wodf isn't that hard to counter lbr.
usukigrl2000 @earthtoillusen come get your gf
February 13, 2022
This example is based on the Instagram mobile site, while logged out. In all four examples, the overall layout will be similar, so for this one, the notable things here are the "Follow" link behind the username on top, the lack of Repost icon, and not being able to see the number of shares.
linkvrainsofficial
12.6K
1.9K
438
5,117
Liked by aqua_dolphin and others
linkvrainsofficial Something new will be rushing here soon. Stay tuned... #rushduel
View all 1,928 comments
bravemax link vrains is getting rush duels??
frustratedcelticguardian who cares we need a banlist NOW
zarcmas gg. @soltechnologies has officially run out of ideas.
ignister oh boy i can't w-ai-t
kattobing39 YOOO @gohacorporation IS THIS LEGIT
king_of_gaymes let's gooooooo it's about dang time
believeinnexus overrush rares look so good fr
1 day ago
This example is based on the Instagram app, while logged in. I added the blue checkmark in this example, but it can be added to the previous "not logged in" example post too. The main differences here is that the blank Like and Save icons are switched out for ones that are filled. The Repost icon is now visible, as are the Repost and Share numbers. There's also three smaller friend avatars to show who else liked the post.
jonathan_harker
8
2
Liked by minamurray
jonathan_harker Looking forward to my trip to the Carpathians. Delighted to try the local fare. #carpathians #travel #food
View all 2 comments
p_hawkins l'm sure you'll have a wonderful time.
minamurray Have fun and take care!
46 minutes ago
This example is somewhat mimicking the Instagram app, with full width images across the post. And there's an Instagram Stories multicoloured ring around the avatar. This is also to show an example of a less popular post, by removing the numbers of Shares, Reposts etc and showing just its icons, as well as one friend liking the post.
pokemonresort
♫ The Beach Boys - Wouldn't It Be Nice
75.7K
3K
925
8,351
Liked by conciergeharu and others
pokemonresort Spend your days relaxing with your partner #Pokémon! Whether you're catching some waves or enjoying the sights, it's sure to be an unforgettable experience. #pokemonresort #funinthesun #holiday
View all 3,018 comments
snomnomnom had the time of our lives there, can't wait to go back this year with my family
hydreigal3 We've just booked our stay! My Deino is so excited!
sandslashsand oh btw @oshawotchout this is the place I was talking about
lord_helix been thinking of a good time to visit
September 4, 2025
This example is similar to the previous with full width images, but now there's three images to flip between. You can also interact with the Like and Save icons. Click/tap on them to try out!
The credit for that part of the code is from mystyrust's really cool fic, chat, is this real?, specifically from the Spotify Wrapped section, that I adapted to this Instagram workskin. Honestly, the code wizardry behind it is beyond my ability to explain, which is why it's at most three images here, same as in that fic. There is an earlier part, the Snapchat section, that switches between more images, which may be able to be adapted to this too, but I had limited free time to work on this workskin and ran out of time.
Other than that, this example also has the space to include text under the username, which can be used for an artist and song name, or for a location.
Some limitations to take note:
I've tested viewing this on desktop as well as mobile Firefox and Chrome on Android. Desktop is ideal, but mobile works great too, though depending on the size of your phone screen, for example 4, the images may get stretched vertically and the text for the music gets shifted.
Where things start going a little screwy is mobile Chrome on Android with desktop mode activated, while the phone is in portrait mode. It's still readable but the text size gets wacky and some elements get out of alignment. To fix this, the phone needs to be in landscape mode.
Credits for resources used, with my own modifications:
- Repository: Work Skins by gadaursan, for overall structure
- Contemporary Arts by ANGELSandAIR, for overall structure
- chat, is this real? by mystyrust, for flipping between multiple images
- Overlapping images, for multiple overlapping friend avatars
- Linear gradient background, for the instagram stories ring
- CSS Gradient, same as above
- Scrollbox, for displaying the code in chapter 2
- Special thanks to amphibianauthor's resource gdoc
- And of course, W3Schools
- Images: [1], [2], [3], [4], [5], [6], [7], [8], [9], [10], [11], [12], [13], [14], [15], [16], [17], [18], [19], [20], [21], [22], [23], [24], [25]
- Icons: [1], [2], [3], [4], [5], [6], [7]
Code:
Graphics: