Tweets as an Image
Tags: twitter, githubreadme, canvas, puppeteer
Published: 2020-08-17 17:32:24

After GitHub allows us to use README.md to showcase our portfolio on our GitHub profile many cool README generator projects came up, and I thought of adding the latest Tweet of any User will be a nice addition to it, so I started figuring out multiple ways to do so, and developed the [project](https://github.com/starkblaze01/Tweets-as-an-Image) using Canvas, Puppeteer, and Twitter API.


## First Version:

### How I made it:

I used Puppeteer to open a headless Chrome at the server-side, then I am creating a Canvas over which I will be writing down the Tweet's Text. 
I used Tweet API: `https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=`, fed in the user's handle and a nice get request will simply deliver the user's activity info. By fetching the last Tweet's id I made another API call and gets a sweet response which I needed. 
After getting the response I am simply putting the text response on the canvas I earlier and taking a snapshot of it and sending it back as an Image whenever you request to the API end-point this project provides you with a Twitter handle in the Query part.

### API for Version 1: 

`https://tweets-as-an-image.herokuapp.com/?twitterHandle={your_twitter_handle_here}&count={number_of_tweets_you_want_to_fecth}`

### Sample Image from Version 1 response:

![Sample Image for version1](https://dev-to-uploads.s3.amazonaws.com/i/rahrs8drypak6x68dnkz.png)


Since I have the text here, I can do a lot of things, changing fonts, colours, adding designs, borders. But then I ran into a problem. The response I was getting was not a complete text, it was adding `...` at the end of the Tweet's text was long. Isn't it a bit weird? As the number of characters is already limited of a Tweet. 

So, I started looking for a different way and came across the `oEmbed` format. It's a simple yet powerful API that allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly. And then there was a...

### Version 2:

Steps are pretty much similar to Version 1, but here instead of creating a canvas I am feeding in the HTML file to the Puppeteer and taking the snapshot of it. Here's the `oEmbed` URL for Twitter which I used: `https://publish.twitter.com/oembed?url=https://twitter.com/`

### API for version 2:
`https://tweets-as-an-image.herokuapp.com/tweet?twitterHandle={your_twitter_handle}&id={your_tweet_id}&theme={light_or_dark}&maxwidth={max_width_of_your_tweet_image}&height={height_of_the_image}&lang={language}`

### Sample Image from Version 2 response:

![Sample Image for Version 2](https://dev-to-uploads.s3.amazonaws.com/i/86taulcxzyfhh8i03m8g.png)


There are many other query params that you can include like language, width, height, etc.



_You can find the details for the same along with the steps to deploy your version of this project here in my [GitHub repository REAMDE.md](https://github.com/starkblaze01/Tweets-as-an-Image)._

Also, this one's worth noting that I am keeping the browser open at the top to reduce the response time(it will take time at the first call but the consecutive calls will have less response time):


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tt3sqgi5unuewwxwuvv.png)

Since I am using a free version of Heroku Dyno, so it might in sleep mode and you may not get any response on the first try, so please try again after a few minutes when you make your first call. Everything should work fine :) 

P.S. Cheers! Keep Learning!