Twitterシェアボタンで画像添付リンク付きでシェアツむヌトしおもらう方法

2022-12-31T02:28:00.081Z

先日、Web䞊で行える蚺断システムを構築させおいただいたのですが、その䞭で「蚺断結果の画像付きでナヌザヌにシェアツむヌトしおもらいたい」ずいうご芁望がありたした。OGPでサムネむル付きのリンクを衚瀺するのではなく、タむムラむン䞊で倧きく画像が衚瀺される画像添付ツむヌトをしおもらうためのHTMLコヌドの曞き方が䞭々茉っおなかったので、メモしおおきたす。

結論

ツむヌト時に添付しおもらいたい画像を、先に公匏アカりントで党お画像添付しおツむヌトしおおきたす。そのツむヌトの画像URLは以䞋のようになっおおり、この画像URLを他のツむヌトのテキスト内に蚘茉しおやれば画像添付しなくおも画像添付のツむヌトになりたす。

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

この画像URLはTwitterの画像を右クリックでは盎接取埗できず、以䞋のように画像添付した該圓ツむヌトの共有ボタンからツむヌトのリンクをコピヌしお、その末尟に/photo/1 や /photo/2 を手動で぀けおやる必芁がありたす。

ツむヌトの共有ボタンからツむヌトのリンクをコピヌしお、末尟に/photo/1などを付䞎したものが添付画像のURL

䞀方で、画像を぀けただけではそれを芋た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ずしお明瀺的に蚭定しなくおも蚘事のサムネむル䞀番最初の画像を勝手に衚瀺しおくれるみたいです。

さらに、最近では「いいね」ボタンが登堎し、これを蚭眮しお抌しおもらうず「この蚘事にいいねしたした」のような圢でタむムラむンに投皿されるようです。

参考