A few years ago I sold all my stuff to explore the world, creating 12 startups in 12 months and building $1M+/y companies as an indie maker such as Nomad List and Remote OK. I'm also a big pusher of remote work and async and analyze the effects it has on society. Follow me on Twitter or see my list of posts. My first book MAKE is out now. Contact me
Subscribing you...
Subscribed! Check your inbox to confirm your email.
levels.io

How to add shareable pictures to your website with some PhantomJS magic

Automation, Tech, Tutorials
Jun 15, 2016

Filipe Carmona (@filcarmona) asked me:

@levelsio these img summaries you added to nomadlist https://t.co/OJpPO10uIJ, which lang/lib did you use to form it? i'm trying smth similar

— Filipe Carmona (@filcarmona) June 15, 2016

Good question, Jack! Oh your name isn’t Jack! Well, anyway let me get your John Hancock and let’s get down to brass tax here, Charlie.

When websites get shared on social media like Facebook and Twitter, they’re quickly opened by Facebook and Twitter’s robots. Let’s say you open up San Francisco on Nomad List:

Screenshot 2016-06-15 22.58.59

The robots will scour the page looking for these HTML tags to find an image they can use to show with this tweet or Facebook post. And if you don’t have an image set, it’ll just look like this:

Screenshot 2016-06-15 23.27.23

Pretty boring, right? Who shares this?

So you need an image! But how are you going to generate a picture for that page? Many sites simply show a screenshot of the page (like Product Hunt does when you share something). But for Nomad List, I wanted something more eye-catching and visual. So I made this:

xUntitled-3

It’s almost the same as what you see on the main page of Nomad List, a little box full of data about the city with the city’s name clearly in the center.

I could make this in HTML, but how the hell do I make this in a PNG or JPG file?

I was thinking of generating it dynamically with Imagemagick, as in like pseudo-code this:

load image San Francisco
draw image San Francisco at x=0 y=0
draw text San Francisco at x=0 y=150 but center (oh fuck this is never going to work)

So INSTEAD….I used PhantomJS.

What is PhantomJS

Well, PhantomJS is great! It’s like your own browser. But then you can use it as a robot. It runs JavaScript and to make a screenshot of page just write this into a file called “script.js”:

var page = require(‘webpage’).create();
page.open(‘http://levels.io’, function() {
page.render(‘levelsio.png’);
phantom.exit();
});

Then you run PhantomJS:

phantomjs script.js

And there’s a file called levelsio.png:

Screenshot 2016-06-15 23.05.39

But HEY! This isn’t what we wanted. We wanted not to have a screenshot, but instead have our own little dynamic image based on data from our page. You know, so people could share it.

Let’s make it

We make a page first with the background spanning the entire HTML page. It doesn’t matter if it looks the wrong size, as the background will expand to the size of your browser window.

Screenshot 2016-06-15 23.09.05

It’s simply a

with this:

position:fixed;
background-image: url(‘/assets/img/cities/san-francisco-ca-united-states-1500px.jpg’);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;

It’s “fixed” in position, so it doesn’t move if it scrolls. Because we don’t really want this page to be scrollable. The size is 100% so it extends to the whole browser. And it’s stuck to the top:0 and left:0, so top-left. The z-index is 2.

Now let’s add some data from the city page. I use PHP to open my database to get my data, and then fill it in. First starting with the cost of living in the bottom right:

Screenshot 2016-06-15 23.09.53

Then I add the internet speed. The little WiFi icon is from Font Awesome.

Screenshot 2016-06-15 23.10.17

Then let’s add the weather:

Screenshot 2016-06-15 23.10.37

And finally instead of the city’s ranking in the top left (as I do on the Nomad List site), I put the logo of my site. Because I know this will be shared on other sites, so it’d good to make some recognizable branding:

Screenshot 2016-06-15 23.10.51

And then finally the city name and country:

Screenshot 2016-06-15 23.11.02

It’s all just very simple plain CSS. I host this page at https://nomadlist.com/generate/cards/san-francisco-ca-united-states publicly. But we want this as an image, not a site!

Let’s render it with PhantomJS as a picture

So now for the fun part! Let’s generate it with PhantomJS. To do more advanced screenshots of pages, PhantomJS made a sample script called “rasterize.js” which I use.

I execute it like this:

phantomjs rasterize.js “https://nomadlist.com/generate/cards/san-francisco-ca-united-states” san-francisco.png 1024*512px 1

It will open the page, make a screenshot of it in 1024×512 at zoom level 1. You can adjust the zoom level to 0.5 or 2 or whatever you want, to make sure you generate the right view of your image page.

It then generates a file called san-francisco.png:

xUntitled-3

HTML

Now you have to put this in HTML, so that all the sites know where to find your share image:

There’s a lot of repetition but that’s how it works. Most sites use “og:image” to find the shareable image of the site. Twitter uses “twitter:image:src”. And as a last back up the more “standard” way to set it is “image_src”.

Which on Facebook looks like this:

Screenshot-2016-06-15-23.23.16

And on Twitter:

Screenshot-2016-06-15-23.25.58

Much better!

A few more details on the practicalities.

When do you start PhantomJS to generate pics?

I used to schedule it to generate new images every day. I used a simple cron scheduler on my server to open up a PHP script which for each city launched PhantomJS and generated a pic.

A better way to do it is to make the “og:image”, “twitter:image:src” and “image_src” dynamic. That means, instead of putting an actual image in the URL, just write a page that’s a script. Then let that script check if the image for that page is not old yet (stale, as they call it) and show that one. If it is old and out-dated (like 7 days old), show the old image but launch PhantomJS to refresh it for the next time it’s loaded!

It doesn’t work on Twitter!

Sometimes Twitter is difficult with what pictures it will show. To see what’s going wrong, use the Twitter Card Validator.

It doesn’t work on Facebook

Same here, use the Facebook Sharing Debugger to figure out why it doesn’t work.

Conclusion

I hope this helped! Because it’s a bit unfair to see all these cool sites have cool pics, but you being left out! Have fun, good luck 🙂

P.S. I'm on Twitter too if you'd like to follow more of my stories. And I wrote a book called MAKE about building startups without funding. See a list of my stories or contact me. To get an alert when I write a new blog post, you can subscribe below:

Subscribing you...
Subscribed! Check your inbox to confirm your email.

2022
18 Sep
This House Does Not Exist
2022
14 Jul
Sam Parr + Shaan Puri asked me about bootstrapping, open startups and lifestyle inflation (My First Million Podcast)
2022
16 May
Thinking and doing for yourself (Life Done Differently Podcast)
2022
10 May
Relocation of remote workers (Building Remotely Podcast)
2022
26 Jan
Money, happiness and productivity as a solo founder (Indiehackers Podcast)
2022
20 Jan
Bootstrapping, moving to Portugal and setting up Rebase (Wannabe Entrepreneur Podcast)
2021
25 Mar
Why I'm unreachable and maybe you should be too
2021
25 Mar
The next frontier after remote work is async
2021
19 Mar
List of all my projects ever
2021
08 Mar
Why coliving economics still don't make sense
2021
14 Feb
Inflation Chart: the stock market adjusted for the US-dollar money supply
2021
10 Jan
I did a live 4+ hour AMA on Twitch w/ @roxkstar74
2020
20 Dec
No one should ever work
2020
10 Dec
Normalization of non-deviance
2020
05 Dec
Copywriting for entrepreneurs: explain your product how you'd explain it to a friend
2020
30 Nov
Entrepreneurs are the heroes, not the villains
2020
12 Nov
The future of remote work: how the greatest human migration in history will happen in the next ten years
2020
05 Nov
Will millions of remote workers become location independent in 2021?
2020
11 Apr
5 years in startups with Abadesi
2020
11 Jan
Twitter giveaways can be hacked to win every time
2019
16 Oct
Lorn - The Slow Blade ✕ Hong Kong
2019
28 Sep
Most decaf coffee is made from paint stripper
2019
12 Sep
The odds of getting a remote job are less than 1% (because everyone wants one)
2019
08 Sep
In the future writing actual code will be like using a pro DSLR camera, and no code will be like using a smartphone camera
2019
29 Aug
Instead of hiring people, do things yourself to stay relevant
2019
28 Aug
Nobody cares about you after you're dead and the universe destroys itself
2019
28 Aug
The only real validation is people paying for your product
2019
05 Aug
Monitoring Bali's undersea internet cable
2019
29 Jul
Nomad List turns 5
2018
29 Jan
I'm Product Hunt's Maker of the Year again!
2018
28 Jan
Why Korean Jimjilbangs and Japanese Onsens are great
2018
24 Jan
Turning side projects into profitable startups
2018
03 Jan
What I learnt from 100 days of shipping
2017
28 Dec
As decentralized as cryptocurrency is: so will be the people working on it
2017
22 Oct
How to 3d scan any object with just your phone's camera
2017
09 Aug
In a world of outrage, mute words
2017
03 Aug
How to pack for world travel with just a carry-on bag
2017
26 Jul
Building a startup in public: from first line of code to frontpage of Reddit
2017
24 Jul
Facebook and Google are building their own cities: the inevitable future of private tech worker towns
2017
21 Jul
The TL;DR MBA
2017
12 Jul
We did it! Namecheap has introduced 2FA
2017
08 Jun
It's about time for a digital work permit for remote workers
2017
23 May
Using Uptime Robot to build unit tests for the web
2017
08 May
Namecheap still doesn't support 2FA in 2017 (update: they do now!)
2017
03 May
Taipei is boring, and maybe that's not such a bad thing
2017
16 Apr
What we can learn from Stormzy about transparency
2017
17 Feb
The ICANN mafia has taken my site hostage for 2 days now
2017
10 Feb
Most coworking spaces don't make money; here's how they can adapt to survive the future
2017
11 Jan
A society of total automation in which the need to work is replaced with a nomadic life of creative play
2017
07 Jan
Nomad List Founder
2016
12 Dec
Make your own Olark feedback form without Olark
2016
29 Oct
How to fix flying
2016
19 Oct
Robots make mistakes too: How to log your server with push notifications straight to your phone
2016
17 Oct
Hong Kong Express - 上海 (Shanghai)
2016
17 Oct
Choosing entrepreneurship over a corporate career
2016
13 Oct
"I can't buy happiness anymore. I've bought everything that I ever wanted. There's not really anything I want anymore."
2016
11 Oct
From web dev to VR: How to get started with VR development
2016
05 Oct
What I would do if I was 18 now
2016
22 Sep
Bootstrapping Side Projects into Profitable Startups
2016
27 Aug
Kids
2016
13 Aug
How I cured my anxiety (mostly)
2016
26 Jul
We have an epidemic of bad posture
2016
17 Jul
Fixing "Inf and NaN cannot be JSON encoded" in PHP the easy way
2016
26 Jun
My third time in a float tank and practicing visualizing the future
2016
15 Jun
How to add shareable pictures to your website with some PhantomJS magic
2016
29 May
My chatbot gets catcalled
2016
19 May
From web dev to 3d: Learning 3d modeling in a month
2016
09 Mar
My second time in a sensory deprivation chamber
2016
04 Mar
Day 30 of Learning 3d 🎮 Cloning objects 👾👾👾
2016
02 Mar
Day 29 of Learning 3d 🎮 Glass, reflectives, HD, coloring and more details
2016
29 Feb
Day 27 of Learning 3d 🎮 Details, details, DETAILS!
2016
25 Feb
Day 23 of Learning 3d 🎮 Filling up the street and adding shadows
2016
24 Feb
Day 22 of Learning 3d 🎮 Added rain, blinking lights, sound, textured menu sign and a VR web app
2016
23 Feb
Day 21 of Learning 3d 🎮 High res textures, physical rendering and ambient occlusion
2016
22 Feb
Day 20 of Learning 3d 🎮 Objects and camera perspectives 🙆
2016
19 Feb
My first time floating in a sensory deprivation tank ☺️
2016
12 Feb
Day 10 of Learning 3d 🎮 Making complex objects by combining shapes 🙆
2016
06 Feb
Day 4 of Learning 3d: @shoinwolfe visits the actual street I'm modeling 🏮😎🏮
2016
03 Feb
Day 1 of Learning 3d 🎮 I learnt how to make shapes, move, rotate and scale them + how to texturize, and add colored lights 💆
2016
02 Feb
I'm Learning 3d 🎮
2016
27 Jan
The things I have to do to read an email sent to me by my government
2016
12 Jan
How to use your iPhone as a better Apple TV alternative (with VPN)
2015
23 Dec
Here's a crazy idea: automatically pause recurring subscription of users when you detect they aren't actually using your app
2015
17 Dec
Stop calling night owls lazy, we're not
2015
16 Dec
We are the heroes of our own stories
2015
25 Oct
There will be 1 billion digital nomads by 2035
2015
21 Oct
Tobias van Schneider interviewed me about everything
2015
18 Oct
Why doesn't Twitter just asks its users to pay?
2015
17 Oct
Punk died the moment we learnt that the world WAS in fact getting better, not worse
2015
15 Oct
Stop being everyone's friend
2015
14 Oct
Vaporwave is the only music that fits the feeling futuristic Asian mega cities give me
2015
09 Sep
We live in a world built by dead people
2015
01 Sep
Why global roaming data solutions don't make any sense
2015
26 Aug
How to export your Slack's entire archive as HTML message logs
2015
24 Aug
How to play GTA V on your MacBook (and any other PC game)
2015
14 May
I uploaded 4 terabyte over Korea's 4G, and paid $48
2015
08 May
How I sped up Nomad List by 31% with SPDY, CloudFront and PageSpeed
2015
04 May
My weird code commenting style based on HTML tags
2015
01 May
Now is probably the time to make HTTPS the default on all your sites and apps
2015
17 Apr
Do the economics of remote work retreats make any sense?