おはようございます。おひさしぶりです。
すっかり更新速度が遅くなってしまいました…。
若干ネタ切れ気味ですが、がんばります。
本日のお話ですが、キャンペーンサイトなんかを作ったりすると、拡散してもらうために各種ソーシャルメディアを駆使していくことになると思います。
そんななかでたまに見かける、「○○についてツイートする」というリンクをクリックすると既に文章が入力されている状態ヤツについて、作り方を調べてみました。
あとついでに少しでもラクする方法も考えてみました。
ステータスが入力済みのツイートリンクを作る方法
やり方自体は簡単です。
1 |
<a href="http://twitter.com/home?status=(入力済みにしたいメッセージ)" target="_blank">ツイートする</a> |
これだけで、新しいウィンドウ(タブ)でTwitterが開き、(入力済みにしたいメッセージ)と入力された状態になります。
基本的にはこれでいいんですが、URLに日本語を含む場合等はエンコードしてあげる必要があります。「%e3%83%86%e3%82%b9%e3%83%88」みたいなやつです。
基本的にこの部分の文言はほぼ定型句だとおもうし変更もあまりないと思うので、普通にどこかで変換しておいてリンクに組み込んでもいいのですが、これだと使い回しにくいですよね。あと、いろんなキャンペーンをやってるサイトなんかでその度に文言が変化する場合なんかも使い勝手がいいとは言えません。
なので、JavaScriptを使ってその場で変換させるようにしてみます。
JavaScript(jQuery)でその場で変換する方法
JavaScript には encodeURI というそのものずばりな関数が用意されておりますので、それを利用しています。
使い方も簡単で、
var encoded_text = encodeURI(‘変換したい文字列’);
としてあげれば encoded_text に変換後の文字列が格納されます。
そして、 twitter につぶやき入力済みにするためのリンクは「http://twitter.com/home?status=」ですので、これとくっつけて対象となるリンクの href を jQuery で書き換えてあげればOKってわけですね。
JavaScript(jQuery)
1 2 3 4 5 6 |
jQuery(document).ready(function($) { var twit_text = 'べ、別にあんたのためにつぶやいてあげるんじゃないんだからね!'; var twit_baseuri = 'http://twitter.com/home?status='; var enc_twit_text = encodeURI(twit_text); $('#tweet_link').attr('href',twit_baseuri+enc_twit_text); }); |
html
1 |
<a href="#" id="tweet_link" target="_blank">つぶやいてやる</a> |
html側の「href」 属性はあとでJSで上書きしちゃうのでなんでもいいんですが、とりあえず無難に「#」とか「javascript:void(0);」にしておくのが良いかと思います。
デモ
これならあとで文言を変えたい時も便利ですよね。
因みに前半のURLを「http://line.naver.jp/R/msg/text/?」にすることで「LINEで送る」にも応用できます。
スマホサイトとかでURLスキームを使って直接LINEを起動したいなら「line://msg/text/」です。
詳しくはこちらも読んでみてください。:設置方法|LINEで送るボタン
他にもパーセントエンコーディング(URLエンコーディング)された状態で文字列を送信すると入力済みにできるようなサービスならなんでも応用可能なはずです。たぶん。
あとは、ゲーム系のサイトでスコアをツイートさせたいときなんかにプレーヤーネームをツイートに含むときなんかにもつかえるかな?まぁその場合はもうゲーム側にそういう機能を組み込んで(はじめからエンコードした状態で)吐き出させるんでしょうけどw
コメントする