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:

assets/gen_social_img.php:

<?php
// Generate twitter large card: 1200px x 630px
// Example https://80daystartup.com/wp-content/themes/theme80/assets/gen_social_img.php?string=some%20string&h=md5('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);
imagepng($image);
imagedestroy($image);
?>

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

<head>
  ...
  <meta content="summary_large_image" name="twitter:card" />
  <?php
  $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" />
</head>

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.

Read more