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

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


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

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

ページURLとテキストは、URLエスケープ処理します。2バイト文字は、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&amp;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」となっていました。


良い解決策が思いつかず申し訳ございません。
私も指摘されるまで気づかなかったので、大変勉強になりました。
ご指摘ありがとうございます。
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」も、併せて追記させました。


ご参考になれば幸いです。
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


ご確認ください。
2012/01/11(水)21:05:23

コメント投稿フォーム

 

フィギュア

最近

カテゴリ

カプセルトイ

初音ミク

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard

PICUP