Better Sharing on Product Hunt
This morning we released a new feature on Product Hunt that I’m really excited to share with you. It’s called ShareMeow 😻 and it makes it super easy to share Product Hunt comments on Twitter.
All you need to do is logout & log back into Product Hunt and it will be available for you to use.
We’ve open sourced the code behind it so you can generate sharable images using ShareMeow as well. It’s available on GitHub. 🌟
Every day, the PH community is sharing their thoughts on all the latest tech, podcasts, books & games. We also have crazy impressive guests dropping knowledge on PH LIVE. We wanted to make it even easier to share this content outside of Product Hunt.
At Product Hunt we generally start up new projects with a quick brainstorm. A couple of us will get together and throw out as many ideas as possible.
The idea we kept coming back to: “how can we make sharing comments super easy?” We looked at how some of our favorite products share content on Twitter. We found both Medium and OneShot to be great examples of sharing done right.
An hour after that first meeting we had our first prototype. 😀
The day after creating the prototype, we told Steven Sinofsky about it. He loved the idea, and gave us a name. “You could call it MeowShare.”
Later that same night I was talking about it with a friend. “You should reverse the name, that would be better. ShareMeow. Share. Me. Now.” 😻
How it works
Our comment sharing on Product Hunt is made up of two parts. We have a frontend TweetComposer (built in React.js). This is the interface you see when writing your tweet. It makes use of Twitter’s TwitterText library to accurately count the number of characters in the tweet (highly recommended if you implement your own). When the composer first launches it is pre-filled with a tweet that we generate from our Rails backend.
Image Generation with ShareMeow
The images are generated with ShareMeow. A ruby microservice that we built for turning HTML/CSS into super shareable screenshots that are perfect for Twitter.
It’s built on top of several great open source projects. The key ones being
- wkhtmltoimage and IMGkit for image generation
- Sinatra for building out the web service
- Alex MacCaw’s trevi, to bootstrap/structure the Sinatra app
- GitHub’s gemoji for rendering emoji
With ShareMeow, you define a template (using HTML/CSS), pass it some parameters, and it will generate an image to you. See the example Hello World template here.
The API for ShareMeow is all in the URL. We wanted to create URL’s that would be both cacheable by a CDN and secure (can only be generated if you have a secret key).
Here’s how you’d generate a ShareMeow URL with Ruby:
We’ll be adding code samples in other languages soon. If you beat us to it, feel free to open a pull request. 🌟
Deploy your own ShareMeow
We’ve setup a Heroku Button to make it easy for you to deploy your own instance of ShareMeow. Click here to get started.
If you need any help, or have feedback. Please open up an issue on GitHub or feel free to tweet me @mscccc. 😀