モバイルページに、ツイッターのツイートボタン、mixiのイイネ！ボタンを設置したメモ : ういすぷの記録帳

モバイルページに、ツイッターのツイートボタン、mixiのイイネ！ボタンを設置したメモ

2011.10.17

モバイルページに、ツイッターのツイートボタン、mixiのイイネ！ボタンを設置したメモ

このブログのモバイルページに、ツイッターのツイートボタンとmixiのイイネ！ボタンを設置し、
携帯からの投稿が無事出来ることを確認しました。
設置の際の技術的メモを残したいと思います。ご参考までに…

■ ツイッターのツイートボタンの設置
Aタグで設置でき、URLに必要なパラメータを含めればいいだけで、とても簡単に利用できます。また、投稿された際のURLは、自動的にtwitterの公式.toの短縮URLへ変換されます。

□ ソース例

<a href="http://twtr.jp/share?url=[ページURL]&text=[テキスト]">ツイートする</a>

ページURLとテキストは、URLエスケープ処理します。２バイト文字は、UTF-8へ変換する必要があります。
ページURLもURLエスケープすることで、&text=textmessage のようなものでも、問題なくツイートすることができます。
※ URLが http://twtr.jp/ となっていますが、日本の携帯電話向けのtwitter公式サイトのURLが利用可能となっているため、このURLとなっています。
URLエスケープは、こちらから行うことが出来ます。

□ 参考サイト
ツイートボタン仕様
公式の素材
URLエスケープ/アンエスケープ

※ 携帯電話からtwitterを利用すると、そこに表示されているURLは「Google wireless transcode」を通すこととなります。自前でモバイル用のページを用意している場合には、そのページを表示させたいと思います。
この場合、PCとモバイル用ページのMETAに<link rel="alternate" media="handheld" href="[URL]" />を設置し、URL部分に、モバイルページのURLを指定します。これで「Google wireless transcode」を利用しないページを表示させることが出来ます。
ただし、2011/12/19現在、DoCoMoでPCページにアクセスしても、META属性は有効となりません。

■ mixi モバイル向けイイネ！ボタン
“http://m.mixi.jp/create_favorite.pl?guid=ON”へPOSTする形式になります。FORMタグを利用してmethodo="post"にします。
仕様に関しては、デベロッパーセンターの技術仕様をご参照ください。
要は、<input type="hidden" name="[パラメータ]" value="[値]">となるように、FORMを作るだけです。

□ ソース例

<form action="http://m.mixi.jp/create_favorite.pl?guid=ON" method="POST">

<input type="hidden" name="service_key" value="[mixiデベロッパーキー]">

<input type="hidden" name="title" value="[タイトル名]">

<input type="hidden" name="primary_url" value="[ページを参照するURL]">

<input type="hidden" name="mobile_url" value="[モバイルページURL]">

<input type="submit" value="ｲｲﾈ!">

</form>

□ 参考サイト
デベロッパーセンターの技術仕様

■ 注意
いずれのボタンも利用されるユーザが、事前にログインしていることが必要となります。

■ 関連ページ
・Google +1とTwitterのフォローボタンを追加しました。
・mixiやFacebook の likeとcheck/share のメモ
・Twitterのツイート記事を1500までさかのぼれる。Get1500
・ブログにTwitterの公式ツイートボタンを設置しました。
・twitpicのサムネイルを表示する。
・ブログに Twitter に投稿できるボタンを設置してみました。

この記事へのコメント

お助けくださいm(_ _)m

例えば、
http://hdml.tdn.co.jp/cgi-bin/index.cgi
のようなauの公式携帯サイトのURLをモバイルの公式ツイッターでツイートして短縮URLに変換されると、同じauで、モバイルのツイッターで、そのURLをアクセスしても、携帯サイトに遷移しません。
この障害を回避する方法を教えてください。

この現象が不安で携帯サイトにツイートボタンを設置するのを躊躇しています。

2011/10/28(金)23:12:15

ういすぷ

はじめまして。
ういすぷと申します。

私は、auの端末を持っておらず、Docomo端末にてチェックしてみました。
モバイル版ツイートボタンについて確認してみたところ、以下のような流れが確認できました。
[ツイートボタン]→[Google wireless transcoder]→[目的のページ]
となりました。

予想ですが、Google wireless transcoderにてモバイル向けに変換されたページを表示する機能のために、意図しない問題が出ると思われます。

Twitterに投稿する際に、他の短縮URLを利用しても同様の問題がおきましたので、UserAgentを利用して、リダイレクトなどをさせたらどうかと思いました。

流れは、以下のようにするのはいかがでしょうか。
[ツイートボタン]→[Google wireless transcoder]→[リダイレクト処理]→[目的のページ]

いろいろ見て回ったのですが、Google wireless transcoderを回避する方法が見受けられなかったこと、表示されるページにパラメータをわたしても、Google wireless transcoderを通ることになるため、「リダイレクト」することを考えてみました。

きれいな解決策にはなっていないと思いますが、ワンクッション置いてから、目的のページを表示する仕組みにしてはいかがでしょうか。
METAタグに<link rel="alternate" media="handheld" href="http://wispblog.tree-web.net/portable.cgi?p=1&t=1939" />というような設定をするもの解決策とありましたが、当ブログは、すでに実装していますが、同じ問題となりましたので、.htaccessやCGI、PHPをうまく使ってリダイレクトした方が良いかなと思った次第です。

なお、Google wireless transcoderのUserAgentを確認したところ、「Mozilla/5.0 (en-us) AppleWebKit/534.14 (KHTML, like Gecko; Google Wireless Transcoder) Chrome/9.0.597 Safari/534.14」となっていました。

良い解決策が思いつかず申し訳ございません。
私も指摘されるまで気づかなかったので、大変勉強になりました。
ご指摘ありがとうございます。

HP / BLOG

2011/10/29(土)10:03:58

お助けくださいm(_ _)m

ご回答ありがとうございます。

ちなみに、携帯の公式ツイッターのプロフィールに携帯サイトのURLを入力して、同じキャリアの携帯で、そのURLにアクセスしても正常に遷移しません。

これも同じ原因でしょうか？

...だとすると、短縮URLの変換という事以前に、携帯の公式ツイッターの仕様が、このようになっているという事でしょうか？

2011/10/30(日)17:09:30

お助けくださいm(_ _)m

度々で恐縮ですが、
http://lhsp.s206.xrea.com/misc/google-gwt.html#2
に掲載されている方法は解決策にならないでしょうか？

2011/10/30(日)17:25:15

お助けくださいm(_ _)m

すいません。
「度々で恐縮ですが...」の投稿は無視してください。
既に、ご指摘して頂いてましたね。
たいへん失礼致しました。

2011/10/30(日)17:39:32

ういすぷ

お返事、ご報告ありがとうございます。
私もいろいろテストしていました。

リダイレクト処理ですが、CGI側でやってみたのですが、うまく移行しませんでした。

参考のサイトの件ですが、PC側のページでは行っていたのですが、モバイル側は行っていませんでした。もしかしたらと思い、<link rel="alternate" media="handheld" href="[URL]" />の処理をモバイル側のページにいれたら、意図するURLへアクセスされました。

つまり、Google wireless transcoder は、対象となるHTMLを解析して、「<link rel="alternate" media="handheld" href="[URL]" />」があれば、そのURLを利用するようです。
このため、Google wireless transcoder が直接アクセスされると問題がある場合(Googleのアクセスを拒否拒否している場合など)は、一枚かませないといけないのかもしれません。

[ツイートボタン]→[Google wireless transcoderで読み込ませるページ]→[Google wireless transcoder]→[<link rel="alternate" media="handheld" href="[URL]" />に本来のURLを明記]→[目的のページ]

私のブログは、<link rel="alternate" media="handheld" href="[URL]" />の処理を、モバイル側に入れることで対処できました。
なお、モバイルサイトをXHTMLを出力していますが、DTDを「XHTML Mobile Profile1.0」も、併せて追記させました。

ご参考になれば幸いです。

HP / BLOG

2011/10/30(日)18:44:11

お助けくださいm(_ _)m

ご回答ありがとうございます。
とても参考になります。
すると、今回は、一枚かます方法ではなく、モバイルサイトに指定のソースを挿入されて対処されたという事ですか？

本当に恐縮なのですが、そのファイルを自分が、ここに投稿時に入力したメールアドレスに添付ファイルで送って頂けないでしょうか？

また、そのモバイルサイトのURLも、お教え頂けないでしょうか？

何卒、ご検討のほど、よろしくお願い致します。

2011/10/30(日)20:28:27

お助けくださいm(_ _)m

【御礼】

色々とアドバイスして頂き、本当にありがとうございました。

当方も解決しそうです。
助かりました。

2011/10/31(月)13:31:37

hide

大変有益な情報を有難う御座います、
現在見ているページをつぶやく場合は
どの様なHTMLになるのでしょうか？
URL指定無しというような方法の場合です。

2012/01/11(水)10:19:11

ういすぷ

hide様>
初めまして。

今回ご紹介しているのは、JavaScriptが動作しない環境を利用しているユーザを対象としているため、URLの指定は必須となっています。
ただ、<a href="http://twtr.jp/share?text=[テキスト]">ツイートする</a>でも動作しますが、携帯端末で利用すると、うまく画面が遷移されないのではと思います。

URLを指定しない場合は、公式のページで作成することができます。
https://twitter.com/about/resources/buttons

ご確認ください。

HP / BLOG

2012/01/11(水)21:05:23