How to add a toolbar to your Medium posts

Follow us on Twitter (@lareservecc) and Facebook

We have recently bootstrapped a new startup and have decided to use Medium as our primary media to communicate on our business, concept and progress.

Medium offers an amazing look and feel for our content but makes it difficult to embed compelling calls to action. We wanted something different from the usual twitter and facebook accounts links hidden inside H2 or quote blocks. We came up with the hack above.

Warning: This hack only works with screens larger or equal to an iPad. With smaller devices, such as the iPhone 6S Plus, the aspect ratio is not respected any longer and it breaks the layout.

If you are using a mobile device, then the social bar below the post title will be broken:

On larger screen, you should get the following result:


How-To create it

Step 1: Create Pictures

When you create a grid of images in Medium, it tries to fit on a max width of 1020px and each picture has a border padding of 5px. If we want to create a media bar of 2 images, then we need to create 2 pictures with the same width: (1020 – (5 x 2)) / 2 = 505px

In our case (twitter/facebook) we took some more precautions and created two pictures on a transparent canvas with a size of 452x48 px:

  • For the twitter picture, we embedded a twitter icon of 32x32 and appended it at the right of the picture
  • For the facebook picture, we embedded a facebook icon of 32x32 and appended it at the left of the picture

For an easy Step 2, we prefixed the pictures with an incremental index (21- and 22-) so that the left picture appears before the right picture in the File selection window and ease the selection process.

Step 2: Create Image Grid

Now we create the image grid:

To create the image grid, select your two images at the same time (click first image, then press Shift key and select the second image), then select open. You should now have a result similar to this:

Step 3: Make Image Clickable

For each picture, execute the following steps:

  • Select the picture so it displays a green border
  • Press Command+K on Mac, Control+K on PC and copy/paste your link:

Example: 3 buttons bar

We have also created an example with 3 buttons which looks good on normal screen but looks terrible on smartphones:


P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the❤ button) so other people can see it.

Icons made by Freepik from http://www.flaticon.com is licensed under CC BY 3.0

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.