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.

Leave a Reply

Your email address will not be published. Required fields are marked *


Read more

Skills you need to bootstrap a SaaS startup
Name + domain
The initial stages of a SaaS product
Features: from core to bullshit
On competition and disruption
What are we going to build: The Idea
Honing in on an app idea
Startups are all about constraints
Bad Ideas: What Not To Build
Not all Startup ideas are created equal
Generating Twitter/Social Cards for shared posts
Hello World!
Custom WordPress theme
Creating 80daystartup.com

Post archive

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