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

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

結論

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

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

この画像URLはTwitterの画像を右クリックで取得できず、以下のようにツイートのリンクをコピーして、その末尾に/photo/1/photo/2 をつけるという作業が必要のようです(←どうやったか覚えてない)。

ツイートへのリンクをコピー

一方で画像付きだけだと、それを見たユーザーが次の行動(サイトを訪れる)を取れないのでサイトの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/[ランダムな数字]/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を本文に書くと画像添付と同じ見た目のツイートになる」ことを利用しているだけです。

ではどうするかというと、FacebookならまずはOGP(Open Graph Protocol)による記事サムネイル画像として、画像を記載する方法です。

ただし例えば今回のような診断システムだと、診断ページのURLを貼っても(診断結果に表示する診断結果画像ではなく)診断ページのサムネイル画像がFaecbookの投稿に表示されるだけなので、診断結果ごとにページを作って診断結果によってシェア時のURLを変えるという処理をしなければなりません。

Facebookのサンプルコード

<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>

LINEのサンプルコード

<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はOGPとか関係なく記事のサムネイルが表示されますよね。ただスマホで見たときの「LINEで送る」ボタンは友達もしくはトークにメッセージとして送る形なので正式にはシェアとは呼べないかも知れません(PCではタイムラインに投稿ができる)。

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

参考リンク

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

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

1+

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Translate »