ITエンジニア/デザイナ向けにオープンソースを毎日紹介

WebサイトのPVを伸ばそうと思った時に、一番に考えつくのがソーシャル拡散ではないでしょうか。単純にタイトル、URLをシェアするほか引用を使うとより訴求力が強まります。

とは言えわざわざ引用してまでツイートしてくれるのはよほどのことです。そこで使ってみたいのがjquery.tweetable.js、引用ツイートを手軽にしてくれるjQueryプラグインです。

例えばこんな感じに表示されます。引用できる部分を指定しているわけです。
例えばこんな感じに表示されます。引用できる部分を指定しているわけです。

マウスオーバーでアイコンがハイライトされます。
マウスオーバーでアイコンがハイライトされます。

Twitterアイコンをクリックするとウィンドウが開きます。その際、引用文も入っています。
Twitterアイコンをクリックするとウィンドウが開きます。その際、引用文も入っています。

使い方としては以下のようにdata-tweetableで囲まれた文章が自動的にツイートできるようになります。

<a class="tweetable" href="https://twitter.com/intent/tweet?text=Man%2C%20this%20is%20such%20a%20dope%20little%20sentence.&amp;url=%2F&amp;via=justinmduke"></a><a class="tweetable" href="https://twitter.com/intent/tweet?text=Man%2C%20this%20is%20such%20a%20dope%20little%20sentence.&amp;url=%2F&amp;via=justinmduke"><span data-tweetable="">Man, this is such a dope little sentence.</span></a>

data-tweetableに別な文字を指定した場合、ユーザが思っているテキストとは違う文章を引用させることもできます。

例えばこれは全く関係のないテキストです。
例えばこれは全く関係のないテキストです。

あえてあくどいことをする意味はなさそうですが、知っておくと面白そうです。なおjquery.tweetable.jsは予め決められた部分の引用となっていますが、テキストを選択した時点でイベントを起こすようにすれば、任意のテキストを引用させてツイートするといったこともできそうです。

このアイディアは世界屈指のPVを誇るNYTimesが行っているものであり、読者がツイートしたくなるであろう部分を予めハイライトしてツイートへ誘導するのに成功しています。メディアサイトであればぜひ取り込んでみたいアイディアですね。

jquery.tweetable.jsはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

A totally dopeness tutorial

jmduke/jquery.tweetable.js

 

MOONGIFTの関連記事

  • DevRel
  • Com2