Generating Twitter/Social Cards for shared posts

Okay, bit of an aside, but hey we share what we’re working on, including distractions. While writing our first posts, I thought it would be nice to have some previews show up when posts are posted on Twitter or whatever. So I quickly hacked something into our WordPress blog to automatically generate an image which social media like Twitter will use as a preview for the URL.

The image shows the 80daystartup logo with the title of the post dynamically added into the image. The twitter/social card for this post is:


// Generate twitter large card: 1200px x 630px
// Example'some string'+salt)
$imgPath = '/var/www/html/wordpress/wp-content/uploads/card_base_image.png';

header("Content-type: image/png");
$image = imagecreatefrompng($imgPath);
$color = imagecolorallocate($image, 0, 0, 0);
$text = "Creating A Startup From Scratch in 80-Days With A Long Title";

if (isset($_GET['string'])) {
        $text = $_GET['string'];
        // not super important, but just to prevent everyone making their own ;)
        if (md5($text . "YOURMAGICSALTHERE") != $_GET['h']) {
                $text = "";

$text = wordwrap($text, 25, "\n", TRUE);

$fontSize = 60;
$y = 380;
$angle = 0;
$font = '/usr/share/fonts/truetype/lato/Lato-Black.ttf';

$bbox = imagettfbbox($fontSize, $angle, $font, $text);
$center1 = (imagesx($image) / 2) - (($bbox[2] - $bbox[0]) / 2);

$x = $center1;

// Add the text
imagettftext($image, $fontSize, $angle, $x, $y, $color, $font, $text);

In header.php, each post then dynamically generates a call to gen_social_img.php, which will return the image:

  <meta content="summary_large_image" name="twitter:card" />
  $title = "My title goes here";
  $twitter_image = "/wp-content/themes/theme80/assets/gen_social_img.php?string=".urlencode($title)."&h=".md5($title."YOURMAGICSALTHERE");
  <meta content="<?php echo esc_attr($twitter_image); ?>" name="twitter:image"/>
  <meta content="<?php echo esc_attr($twitter_image); ?>" name="og:image"/>
  <meta content="<?php echo esc_attr($title); ?>" property="og:title" />
  <meta content="<?php echo esc_attr($title); ?>" property="twitter:title" />

Just to end on a note more relevant to today’s topic of looking for startup ideas.. in general, plugins to solve issues you run into and enhance existing software (or other products) are also interesting startup ideas. It’s an existing market and you’re usually not the only one running into a certain issue.

You can follow us on Twitter @jdvhouten and @wcools and look for #80daystartup

Read more

Work/new-life balance
Durable tech
Early user feedback
Spending time to save time
Products want to be platforms
Always be launching
Enjoying the journey
Work-life balance
Recap @ Day 59
Perils of caching
Making sense of contradictions
Trust signals
DIY javascript error logging
Taxes: an automation story
Magical thinking
Start small
High conviction, low conviction
Most deals fail

Post archive