Share tweet with image from my web app


#1

When user clicks “Share on Twitter” button on my site, I’d like to prepopulate that tweet with an image (let’s assume that image is served from my server). It would be great if I could do it with Twitter’s web intent, but that’s apparently not possible: Tweet intent with image

It seems like I could use Twitter’s POST media/upload API, but in that case I would have to implement 3-legged oAuth authorization? It also seems that is not possible to do it directly from the client (due to CORS issues and I’d have to expose my app’s secret key in JavaScript code).

So I guess for this to work I’d need to have some server as middleman between the client running my API and Twitter’s oAuth provider?

Is there any service that you could recommend that takes care of it - I found about oAuth.io, I guess they act as a described middleman?

The third possible approach I found would be via Twitter Cards. Is it possible to make it work since I dynamically generate the content via AJAX calls? This lit a beam of hope in me, but I’m not totally sure what it means yet: Crawler AJAX/escaped fragment support?

My actual situation: I’m developing an Angular app that displays Highcharts charts and I’d like my users to be able to share their screenshots. My current high-level idea is: Highcharts’ export feature sends request to their server to generate the image, it creates an image and serves it there for 30 seconds - and I’m given it’s link in a callback on client.

Now I can store that image somewhere else (my or Twitter’s server?) and then we come to the problem described above.

I’d be grateful on any advice how to do this in a most elegant way that would also be as frictionless as possible for the users. (e.g. oAuth require that they authorize the app to post on their behalf)


#2

The Tweet Web Intent does not support media uploads from its composer or passed via a URL. A site can expose an image or video through the link preview displayed as part of Twitter Cards.

A Twitter Card extracts data from the shared URL, applying extracted fields to a specified Twitter Card template. The shared URL would need to return a HTML meta element visible to a Twitterbot request for the shared URL.

If your shared URL used a link shortener you may be able to return Twitter Card markup to the Twitterbot User-Agent or Twitter’s IP blocks while redirecting all other requests. A request to chart.tld/abc serves the indexable card data and would be exposed through a share option on mychartsite.com.


#3