Alp Korpe Berlin · Marketing Ops
Web Tools · Selected work

Ad Mocker

Ad mockup generator for Google Display, Facebook, Instagram, and YouTube ads.

Stack
  • JavaScript
  • jQuery
  • Bootstrap
  • PHP
  • CSS3
Links
Ad Mocker — Ad mockup generator for Google Display, Facebook, Instagram, and YouTube ads.

Ad Mocker shows how an ad will look on the Google Display Network, Facebook, Instagram, and YouTube before it runs. You type the business name, headline, and copy, upload the images, and the preview redraws as you go. It runs in the browser with no account and nothing to install, and it’s live at admocker.com.

It’s meant for the review step of a campaign. A client or creative lead can approve an ad from a preview that looks like the platform itself, instead of from a flat image pasted into a slide.

Google Display ad mockup generator

The Google Display Network page takes the same assets a responsive display ad asks for in Google Ads: business name, headline, description, call to action, logo, a square image, and a landscape image. The preview places them in a 300×250 display unit, the common medium rectangle size.

Each text field has a live character counter and stops accepting input at its limit: 30 characters for the headline, 90 for the description. Images are checked on upload. If the square image isn’t 1200×1200 or the landscape image isn’t 1200×628, the page says so and shows a placeholder at the expected size, so a wrong crop gets caught before the ad goes to review.

Facebook ad mockup generator

The Facebook page renders a feed ad and a story ad from the same inputs: business name, primary text, headline, description, display URL, and image. The call-to-action menu carries Meta’s button labels, from Learn more and Shop now to Book now, Get offer, and Send WhatsApp message, so the preview shows the button the live ad will use.

Counters cap the primary text at 120 characters and the headline at 25, which makes it obvious when a line of copy is too long to read well in the feed.

Instagram ad mockup

The Instagram page renders feed and story placements with separate image uploads for each. The square feed image and the vertical story image are often different files, so they can be checked together instead of one at a time.

YouTube ad mockup

The YouTube page takes a video thumbnail, a Shorts thumbnail, a logo, a headline of up to 50 characters, a description of up to 150, and a call to action. It renders two placements: a standard video ad with the headline, the “Ad” label, and the CTA button under the player, and a Shorts ad with the overlay layout Shorts uses.

How it’s built

Each platform has its own page. jQuery binds the form fields to the preview, Bootstrap handles the layout, and per-platform CSS reproduces each network’s ad layout. Uploaded images are read in the browser with FileReader and object URLs, so creative isn’t sent to a server to build the preview. The site launched on Product Hunt.

AI-Powered Content Engine is the publishing pipeline built to grow Ad Mocker’s organic search traffic through the admocker.com blog.