カスタムな共有ボタンで(https://twitter.com/intent/tweet)を使ってツイートするやつから画像も投稿することはできません!!!!
上記は
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent.html
に詳しい仕様が乗っています.通常時はこれを使えば画像のつかないツイートを提供できます.
さて画像を添付したい場合についてです.
適当なサイトの画像URLをツイートに入れてもURLが表示されるだけで画像は表示されません…
ちゃんとツイートで画像を表示してもらうには
- metaタグでogpを使う(SNSから参照してもらって画像を読み込んでもらう.Twitterのカード)
- 用意したサーバーでuploadしてつぶやく (ブラウザはもちろんCORSで弾かれるので、サーバでtwitterのサーバにアップロードします.アップロード後にそのアドレスをユーザに送ってツイートに含めることで表示されます)
- 画像を保存して、それをツイートに添付してツイートしてもらう.
このどれかが必要.
色々なサイトを読んだけどパッとできたものがなかったので上記にまとめました.
カスタムな共有ボタンでも画像が添付できればいいんですけどね…
できないので、twitter本家でツイート準備て画像を添付してもらう必要があります.
1番目のmetaタグを使う場合は画像を一旦どこかにあげる必要があります.
今回のようにgithub.ioのページに置きたい場合は、スタティックなWebページなので
画像を一旦どこかにアップロードすることができません…
なのでgithub.ioで取れる作戦は3だけです…
2番目のupload方式についての仕様は以下に記されています.
https://developer.twitter.com/en/docs/media/upload-media/api-reference/post-media-upload.html
この方法をとった場合は、別のサーバを用意してそこでtwitterサーバにリクエストと画像を投げるとそれをアップロードして生成されたidを受け取ります.
twitterにアップロードされたURLを使えばツイート中に適切に画像が表示されます.
ちなみにCORSで弾かれると以下のような文言をえます.これはブラウザではできないので、サーバを用意する必要があります.
ccess to XMLHttpRequest at ‘https://upload.twitter.com/1.1/media/upload.json’ from origin ‘https://urusulambda.github.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
