Twitterシェアボタンで画像添付&リンク付きでシェアツイートしてもらう方法

先日Web上で行える診断システムを構築させていただいたのですが、診断結果の画像付きでユーザーにシェア(ツイート)してもらいたい、というケースがありました。OGPでサムネイル付きのリンクを表示するのではなく、タイムライン上で大きく画像が表示される画像添付ツイートをしてもらうためのHTMLコードの書き方が中々載ってなかったのでメモしておきます。

結論

ツイート時に添付してもらいたい画像を、先に公式アカウントで全て画像添付してツイートしておきます。そのツイートの画像URLは以下のようになっており、この画像URLを他のツイートのテキスト内に記載してやれば(画像添付しなくても)画像添付のツイートになります。

https://twitter.com/[twitter ID]/status/1124179577570381826/photo/1

一方で画像付きだけだと、それを見たユーザーが次の行動(サイトを訪れる)を取れないのでサイトのURLリンクも付けたいですよね。これは下記のようにTwitterのシェアに使うhrefの中の&url=に付与してやります。

<a class="twitter" href="http://twitter.com/intent/tweet?text=このサイト面白いなう&url=https://sample.com/test/share-page" rel="nofollow" target="_blank" title="Twitterで共有">

これらをまとめると最終的に以下の形になります。

<div class="sns_icon  twitter_back">
    <a class="twitter" href="http://twitter.com/intent/tweet?text=このサイトの診断面白いよ! https://twitter.com/[twitter ID]/status/1124179577570381826/photo/1&url=https://sample.com/test/share-page" rel="nofollow" target="_blank" title="Twitterで共有">
        <img src="/img/social_twitter.png" width="45" alt="twitter">
    </a>
</div>

他にも&via=を付ければ@で指定のTwitterアカウントにメンションさせられますし(自分のアカウントに通知が来る)、&hashtags=タグ1,タグ2,タグ3 のように記載してやれば指定のハッシュタグ付きでツイートさせることができます。

参考リンク

https://decoy284.net/tweet-button-image/

この記事ではSNAP(NextScripts: Social Networks Auto-Poster)というプラグインを活用していましたが、現状このプラグインはうまく動かないようでした。