Build a realistic Facebook post mockup and download it as a PNG. Set the page name, post text, photo, reaction counts, and comments, then switch light or dark. Free, no sign-up, and everything runs in your browser. For parody, mockups, and design comps only.
For parody, mockups, education, and design comps only. Do not use this to impersonate real people or brands, fake evidence, or mislead anyone about a real Facebook post.
You just designed a post mockup. These free CommonNinja widgets bring your actual Facebook content onto your website, where you own the traffic, no code needed.
Pull your real Facebook posts onto your own website automatically, so the page stays current without you updating it by hand.
Show the reviews people already left you on Facebook, right on the page where visitors decide whether to trust you.
Let visitors discuss on your own site instead of only in someone else’s feed, and keep the conversation attached to your page.
Make it one tap for visitors to share your page. Every share pushes the graphic you just made past your own audience.
Other free tools for social content and mockups.
Build a realistic WhatsApp-style conversation mockup with bubbles, ticks, and timestamps. Download a PNG.
Use Tool →Design a Telegram-style chat mockup in light or dark mode and export it as a clean PNG.
Use Tool →Create a Messenger-style conversation mockup with blue pill bubbles. Free, in your browser.
Use Tool →Mock up a Reddit-style post with votes, awards, and a threaded comment section. Export a PNG.
Use Tool →Create realistic X (Twitter) post screenshots with views, checkmark tiers, and bookmarks. Download a clean PNG.
Use Tool →Build an iPhone text message mockup with blue iMessage or green SMS bubbles, reactions, and a Read receipt.
Use Tool →Design an Instagram post mockup around your own photo, with caption, likes, and comments.
Use Tool →Build an Instagram DM mockup with gradient bubbles, heart reactions, and a Seen label.
Use Tool →Create a Snapchat chat mockup with colored side bars, a snap score, and a status on every row.
Use Tool →Place bold text behind your subject in one click. Automatic cutout, no sign-up, all in your browser.
Use Tool →How It Works
No account, no sign-up, completely free. The mockup renders live and the PNG is generated in your browser, so neither your text nor your image is ever uploaded to a server.
Type the page name, the time and audience line, and the post text. Keep it conversational rather than polished.
Upload an optional photo and profile picture, set the reaction, comment, and share counts, and add a few visible comments.
One click exports a crisp 2x PNG at a fixed feed width, ready for a slide, a client comp, a storyboard, or a meme.
The Details
A convincing feed screenshot is almost never about the colors. On Facebook it comes down to whether the numbers and the content agree with each other.
reactions > comments > shares, and comments you can see
Real posts fall into a rough shape: plenty of reactions, a fraction as many comments, and fewer shares again. Invert that ratio, or claim 86 comments and show none, and the card stops reading as a screenshot.
Facebook also differs from the image-first platforms in a way that helps you. A text-only post is completely normal here, so you do not need a photo to make the mockup look plausible. What you do need is the small structural furniture: the globe beside the timestamp marking the post as public, the stacked reaction icons, and the share count that almost no other feed displays publicly.
One more thing worth naming directly, because it matters more on this platform than most. Facebook screenshots circulate as evidence. A fabricated post attributed to a real business or a real public figure does not stay a design comp for long once it leaves your machine. Believable styling is for design work, and inventing the page in it costs you nothing.
Settings
Seven controls shape the look of the export. This is what each one does and the job it is best suited to.
| Setting | What it does | Best for |
|---|---|---|
| Page or profile name | The bold name at the top, with an optional verified checkmark | Facebook leads with a real display name, unlike the handle-first platforms Most used |
| Time and audience | The "2h ·" line, with the public globe icon added automatically | The globe is the detail most mockups miss. It marks the post as Public Most used |
| Attached photo | A full-width image between the text and the reaction row | Optional on Facebook, unlike Instagram. Text-only posts are completely normal Situational |
| Reaction counts | The stacked like, love, and laugh icons with a total, plus comment and share counts | Facebook is the only major feed that shows a share count publicly Most used |
| Visible comments | Up to six comments in gray pills, each with a name and a like count | What turns an empty card into something that reads like a real thread Most used |
| Action bar | The Like, Comment, and Share row under the post | Keep it for a full screenshot look, drop it for a tighter card in a deck Situational |
| Dark theme | Facebook’s dark gray card rather than a white one | Reels, thumbnails, and slides with dark backgrounds Situational |
Themes follow the common light and dark Facebook palettes as of 2026. This tool is a generic design mockup and is not affiliated with, or endorsed by, Facebook or Meta.
Use It Right
A post mockup is a design asset. These are the everyday jobs it is built for, and the uses that turn it into something else entirely.
| Scenario | What it is | Verdict |
|---|---|---|
| Marketing and campaign comps | Showing a client what their post or ad creative will look like in a real feed | Good use |
| Social team training | Showing staff how to reply to a customer comment, with invented names | Good use |
| Memes and skits | Clearly humorous posts from invented pages and people | Good use |
| Media literacy teaching | Showing students how a misleading post is built, clearly labeled as an example | Good use |
| Fabricating a statement | Inventing a post from a real person, business, or public figure that they never made | Never |
| Misinformation or faked evidence | Presenting a mockup as a genuine post in a dispute, a news story, or a claim | Never |
Avoid These
Four of these are craft. The first two are not negotiable. Read them before you export anything that will leave your own screen.
The one rule that matters more than every design tip here. A mockup is not a record of anything. Facebook screenshots get shared as proof more than almost any other format, which is exactly why fabricating one and letting it travel is fraud, not design.
Never present it as realA real business name, a real logo, or a real politician in the header turns a design comp into a fabricated statement. Invent the page. It costs nothing and keeps the mockup clean.
Invent the pageA real Facebook post shows a small globe or friends icon beside the timestamp. Leaving it out is subtle, but it is one of the first things that looks wrong to anyone who uses the platform daily.
Keep the globeTen thousand reactions with two comments and no shares reads as fake immediately. Real posts land roughly in the range of many reactions, some comments, fewer shares. Keep that shape.
Reactions > comments > sharesA post claiming 86 comments that shows none underneath looks like a card, not a screenshot. Add two or three visible comments so the numbers and the content agree.
Show a few commentsFacebook posts that perform read conversational, not polished. Three tight sentences with a specific detail beat a paragraph of marketing language every time, in a mockup and in a real feed.
Write conversationallyBest Practices
All CommonNinja widgets mentioned below are free to start. Apply these while you write the post and after you place the image.
01
Facebook is the one major platform that leads with a formatted name rather than an @ username. "Riverbend Coffee" is right here, where sam.hartley would be right on Instagram.
02
Reactions are usually the biggest number, comments a fraction of that, and shares smaller again. Getting the ratio right does more for believability than any single number.
03
A question in one comment and a reply in the next reads far more true than two unrelated compliments. It also gives you somewhere to put the point you actually want the mockup to make.
04
Unlike Instagram, plenty of real Facebook posts carry no image at all. If the words are the point, skip the photo and let the mockup be tighter.
05
A white card on a white slide floats, and a dark card on a dark reel disappears. Pick for where the image will live, not for what looks nice in the editor.
06
The Like, Comment, Share row sells a full screenshot but adds clutter inside a slide or a device frame. Turning it off gives you a cleaner card.
07
A mockup is a graphic. An embedded feed is your actual page, refreshing itself on a site you own, so the audience you earned lands somewhere you control.
Add a Facebook feed free →08
If the posts you are mocking up are really about trust, the faster win is putting your existing Facebook reviews on the page where people decide whether to buy.
Add Facebook reviews free →Glossary
Six terms that come up whenever you design a Facebook screenshot. Useful if you make these for a team or a client.
From the Blog
More from the CommonNinja blog. Free, no sign-up, just practical posts on reaching people where they already are.
In this article, we are going to discuss incentives, and learn how to use them to boost engagement on your website.
Read article →In this article, we are going to discuss the top 6 Airbnb Reviews widgets for your website.
Read article →In this article, we are going to discuss the top 5 Amazon Reviews widgets for your website.
Read article →In this article, we are going to explain what website engagement is & how to increase it.
Read article →In this article, we are going to discuss the top ten Google Reviews widgets for your website.
Read article →In this article, we are going to discuss the top ten Facebook Feed widgets for your website.
Read article →