【Twitter】ツイートボタンからハッシュタグをつけた上で画像を投稿してもらう方法




jouhou_hanranこんにちは!プロクラスの中山です。

お盆休みも終わってしまいましたね。京都では先日五山の送り火がお盆の終わりを告げていました。

さて、お休みも終わったのでお仕事モードということで、今回は私がお仕事で困った話。制作しているWebサイトの中にツイートボタンを設置することになったときのお話です。

ツイートボタンからツイッターに画像をアップロードしてもらう方法

私は普段facebookは使うんですが、ツイッターはアカウントを作ったものの全く活用しておらず、あんまり詳しくありません 😥 
そんな私が一生懸命調べた、ツイッターのツイートボタン設置に関して悩んだことについて書こうと思います。

まず、私がやりたかったことは下記のとおりです。

  1. ツイートボタンをオリジナルの画像で設置したい
  2. ツイートボタンをクリックしたら入力画面がポップアップ、その時にすでにテキスト入力欄の中にハッシュタグをセッティングしておきたい
  3. 画像も添付できるようにしたい

1~2までの、オリジナルツイートボタンの設置の仕方とテキストを最初から入力されている状態にする方法は簡単です。
こちらは結構あちこちでやり方が紹介されています。

参考サイト:オリジナル画像のツイートボタンを設置する方法

しかし、このツイートボタンでは画像を添付するためのボタンが表示されず文字の入力欄のみになってしまうんですよね。

「画像添付」で調べると、「サイトURLをシェアしてもらった時に、あらかじめ設定しておいたサイトのサムネイル画像などを表示する」という内容はたくさん出てくるんですが…。
「twitterカード」とか、あらかじめ自分のサイトにアップロードしてある画像をシェアさせる方法ですね。それは知ってる、それじゃない!

twitter%e7%94%bb%e5%83%8f%e4%bb%98%e3%81%8d%e3%83%84%e3%82%a4%e3%83%bc%e3%83%88

↑これはわかる。けどそうじゃない。ツイートボタンからハッシュタグをつけた状態で画像添付して投稿してほしいんだ。

ツイートボタンからツイートすると画像が添付できない!

結論から言うと、ツイートボタンを利用する場合は基本的な方法での画像添付は無理です!

tweet_btn

あれ?ツイートボタンを押したときはURLやハッシュタグをあらかじめいれておけるのに画像を投稿するためのボタンがどこにもない…

ツイッターからツイートするときは左下に画像などを添付するアイコンが出てくるのに…

ツイッター公式サイトなどからツイートを自分で投稿するときは左下に画像などを添付するアイコンが出てくるのに…

もちろん、プログラムを組めば不可能じゃないですが、SNSでキャンペーンなどをしたい場合は予算をかけずにできるのが利点ですよね。そこまで時間(お金)をかけてやるべきなのか、と考えると何かをあきらめた方がよいという結論に至りました。
プログラムを組むなら「写真をツイッターのサーバーにアップロードして、その写真のURLを取得した上で投稿欄に埋め込む」という内容にしないといけないようなので、ちょっと面倒そうです。

ハッシュタグか、画像投稿か…何をあきらめるか

photo_jidori

結局、今回のキャンペーンは画像を投稿するのがマストだったので、「ハッシュタグは自分で手入力してもらう」という結論に至りました。
いろいろ他のサイトのキャンペーンを調べましたが、他の所もそうしてるみたいですね!笑

例:プレミアムモルツのキャンペーン
※キャンペーンが終了したらページがなくなるor変わる可能性があります!

%e3%83%97%e3%83%ac%e3%83%a2%e3%83%ab%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%9a%e3%83%bc%e3%83%b3

ハッシュタグを打ち間違えた場合はキャンペーン応募無効かぁ…。はじめからハッシュタグを用意した投稿欄があった方がもちろん便利なのですが、写真投稿ははずせないとなると仕方ないですね…

ハッシュタグの打ち間違いを防ぐために、ツイートしてほしいハッシュタグをコピーできる機能を用意しているサイトもあります。これはJavascriptで実装できるので簡単!ユーザーにも優しいですね!

例:フロッシュのある暮らし フォトキャンペーン
※キャンペーンが終了したらページがなくなるor変わる可能性があります!

%e3%83%95%e3%83%ad%e3%83%83%e3%82%b7%e3%83%a5%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%9a%e3%83%bc%e3%83%b3

応募方法のSTEP3の所に「ハッシュタグをコピー」出来るボタンがあります!

【まとめ】ツイッターの画像投稿キャンペーンのためにやったこと

bird_aoitori_bluebird

  1. 「ハッシュタグをコピー」ボタンを設置する
  2. ツイッターへのリンク先をサイト内に設置する(直接投稿入力欄がポップアップするのではなく、ただのリンク。ボタンにはオリジナルの画像を使用)
  3. 画像を投稿する際にコピーしたハッシュタグを貼り付けてもらって、投稿してもらう

ツイッターはもともと写真をアップするためのサービスではなかったので、画像添付の機能はあまり得意な分野ではないようです。

ユーザーにあまり負担がなく、たくさんツイートしてもらえるようにしたいですよね。ハッシュタグがも~のすごい長文でもなければ、最近ではほとんどの人がハッシュタグを活用しているので手入力するのもあまりユーザーの負担ではないようです。

「えー?ツイッターをサイト内に埋め込むのなんて簡単でしょ?」と思う方もたくさんおられると思いますが、ユーザーのためにいろいろ考えないといけないことがたくさんあったりするんです。シンプルにURLを共有してもらうだけなら簡単なんですけどね。

以上、同じことで調べものをしている人に届きますように。