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

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

結論

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

https://twitter.com/[twitter ID]/status/[ランダムな数字]/photo/1

この画像URLはTwitterの画像を右クリックでは直接取得できず、以下のように画像添付した該当ツイートの共有ボタンからツイートのリンクをコピーして、その末尾に/photo/1 や /photo/2 を手動でつけてやる必要があります。

一方で、画像をつけただけではそれを見たTwitterユーザーが次の行動（サイトを訪れる）を取ってくれないので、ツイートにはサイトのリンクも付けねばなりません。

これは下記のようにTwitterのシェアに使うhrefの中に&url=https://という形で付与してやることでリンクがつきます。

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

これらをまとめると、望む動作をしてくれるTwitterシェアボタンのHTMLコードは以下の形になります。

<div class="sns_icon  twitter_back">
    <a class="twitter" href="http://twitter.com/intent/tweet?text=このサイトの診断面白いよ！ https://twitter.com/[twitter ID]/status/[ランダムな数字]/photo/1&url=https://sample.com/test/share-page&via=[twitter ID]&related=[twitter ID]&hashtags=ハッシュタグ1,ハッシュタグ2" rel="nofollow" target="_blank" title="Twitterで共有">
        <img src="/img/social_twitter.png" width="45" alt="twitter">
    </a>
</div>

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

FacebookやLINEでもシェア時に画像を表示させる方法

まずFacebookやLINEでのシェアボタンはサイト側からは画像添付させることができません（Twitterも厳密には「他の人が画像添付したツイートの画像URLを本文に書くと画像添付と同じ見た目のツイートになる」ことを利用しているだけで、画像添付をさせているわけではないです）。

ではどうするかというと、OGP（Open Graph Protocol）の画像が表示されることを利用し、各診断結果ごとに違うページとOGPをそれぞれ用意し、そのページをシェアしてもらうことで、シェア時にOGPとして診断結果画像を表示させます。

Facebookのシェアボタンサンプルコード

// page-shindan_result.php

<?php 
$share_url = get_the_permalink(); // もしかしたら関数違うか、echoいるかも

$fb_share_button_html = 
'<div class="sns_icon facebook_back">
	<a href="https://www.facebook.com/dialog/share?
		app_id=[Facebook App ID]
		&display=popup
		&href='.$share_url.'
		&quote='.$share_title.'	
		&redirect_uri=https://www.facebook.com" title="Facebookでシェア" target="_blank">
                <img src="/img/social_facebook.png" width="45" alt="facebook">
        </a>
</div>'
?>

診断結果のページを生成する際に$share_urlに現在のURLをぶちこみ、hrefに渡しています。

LINEのシェアボタンサンプルコード

// page-shindan_result.php

<?php 
$share_url = get_the_permalink(); // もしかしたら関数違うか、echoいるかも

$line_share_button_html = 
'<li>
　<a class="line btn" href="http://line.me/R/msg/text/?' . $share_title . $share_url .'" target="_blank">
　　<img src="/img/social_line.png" width="45" alt="LINE"></a>
</li>'
?>

LINEの余談

ちなみにスマホで「LINEで送る」ボタンを押すと「友達もしくはトークにメッセージとして送る」という動作になるので、一般的なSNS投稿のシェアとは少し意味合いが違いますね（PCではタイムラインに投稿ができる）。

また、LINEではOGPとして明示的に設定しなくても記事のサムネイル（一番最初の画像？）を勝手に表示してくれるみたいです。

さらに、最近では「いいね」ボタンが登場し、これを設置して押してもらうと「この記事にいいねしました」のような形でタイムラインに投稿されるようです。

参考

• ツイートボタンから画像付きツイートをツイートさせる方法
• ツイートボタンからハッシュタグをつけた上で画像を投稿してもらう方法
• ツイートボタンを押した際にTwitterに画像付きで投稿できるようにするあれこれ
  • ただしこの記事ではSNAP（NextScripts: Social Networks Auto-Poster）というプラグインを活用していましたが、現状このプラグインはうまく動かないようでした。