Facebook Share Dialog Mockup
Last Updated on August 3, 2026 by Editorial Team
Today we post a new Facebook mockup, but this time with their share dialog design. It was created by Loïck and is available in .Sketch format.
Happy downloading!
What makes this Facebook share dialog mockup so useful is that it captures the exact pop-up window people see the moment they click “Share” on a link, a photo, or an article.
You get the full chrome: the dark blue header bar with the Facebook logo, the “Share on Your Timeline” dropdown, the profile avatar and name field, the “Say something about this…” prompt, and the privacy selector and posting buttons at the bottom.
In the preview, that structure frames a travel post about La Muralla Roja in Spain, with its pink geometric architecture and blue pool set against the coastline, showing exactly how a link preview card renders inside the dialog once a title, description, and source URL are pulled in.
That framing detail matters more than it might seem. Anyone designing for blogs, travel sites, editorial content, or product pages needs to know how their thumbnail and headline will actually look once shared, and this mockup lets you test that before anything goes live.
If you write meta titles and descriptions for a living, or you design Open Graph images for articles, this is a fast way to preview how a headline will wrap, whether a description gets truncated, and whether an image reads well when cropped to that wide horizontal ratio.
Where This Facebook Mockup Comes In Handy
Content marketers and bloggers can use it to check how a new post’s featured image and title will look the moment someone shares it to their timeline.
Social media managers pitching a campaign can drop a client’s photo and copy into the frame to show, realistically, what a sponsored share or a UGC-style post will look like before it goes out.
Portfolio and case study designers can use it as a supporting visual to demonstrate a social sharing feature they built, since it reads instantly as “Facebook” without needing extra labeling.
Product teams working on Open Graph tags or link preview cards can use it the same way, as a lightweight visual proof of concept.
Editing it is straightforward. Swap the profile photo and name for your own or your client’s, replace the shared image with your actual thumbnail or hero image, and update the title and description text to match your real headline and meta copy.
Because the layout mimics Facebook’s actual proportions, it’s worth testing a few different image crops to see which composition holds up best inside that wide preview thumbnail, the same way you would optimize any Open Graph image.
Keep the surrounding UI elements, the buttons, the dropdown, the avatar circle, untouched so the mockup still reads as an authentic Facebook interface rather than a custom design.
Pair it with your other social proof or marketing collateral, like Instagram post mockups or browser window mockups, when you’re assembling a slide deck or case study that needs to show a piece of content across multiple platforms.
Since it’s a flat vector-based file, colors, corner radii, and text can all be adjusted quickly to match a different link preview or a slightly different Facebook UI state, like a video share or a photo album share, if you want to extend the concept further.
