携帯サイト(ガラケー、フューチャーフォン)にmixiチェックとtwitterつぶやくボタンを設置する方法。
いまさらかも知れませんが、書いておきます。
時代はスマートフォンだよ!とか言わないでくださいね。
Twitterでつぶやくボタンや、mixiチェック、facebookイイネ!などのソーシャルブックマークボタンは、
PCサイトでは当たり前と言っていいくらいよく見ますよね。
携帯用のサイトでも見かけるかと思いますが、
今回は、一般的なTwitterとmixiチェックを設置したのでその導入・設置方法を紹介します。
mixiチェック、Twitterツイート画像を用意
mixiチェックのボタン画像はこちらにあります。↓button-1の画像を使用しました。
mixi チェックボタンの設置 技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
仕様や、もっと詳しい設置方法を知りたい方も見ておいて下さい。
Twitter画像は公式のツイートボタンに合わせてデザイン。
サイズは18×58のmixiチェック(button-1)のサイズに合わせて作成しました。
このtwitter画像は使っていただいて結構なのですが、直リンクはご遠慮願いますm(__)m
画像をPCなどに保存した後、使って下さいね。
設置したらこんな感じ。
携帯サイトにmixiチェックとTwitterつぶやくボタン設置方法
mixiチェックをつける場合は、ボタンを配置するページのヘッダーに以下を。
必須ではなさそうだけど一応。
<link rel="mixi-check-alternate" media="mixi-device-mobile" type="text/html" href="現在のページURL" />
PC 以外のデバイス(スマートフォン、携帯電話)向けに別のページが存在する場合は、それらを 要素で指定することができます。 とのことです。
HTMLは以下のように。mixiよりサンプルで記述されているものを、そのまま使うことにします。
<form action="http://m.mixi.jp/share.pl?guid=ON" method="POST" > <input type="hidden" name="charset" value="shift_jis" /> <input type="hidden" name="check_key" value="登録キー" /> <input type="hidden" name="title" value="ページタイトル" /> <input type="hidden" name="primary_url" value="携帯ページURL" /> <input type="hidden" name="mobile_url" value="携帯ページURL" /> <input type="hidden" name="pc_url" value="PCページURL" /> <input type="image" value="mixiチェック" src="ミクシィチェック画像" width="58" height="18" alt="mixiチェック" /> </form>
インプットボタンそのままだと味気ないので、mixi公式のチェックボタンの画像にして表示します。
※input type=”image”は基本的に携帯では表示されません。ただ、最近の機種ですと表示されるようなので、今回は使用しています。
なので、ほとんどの機種に対応させたいという場合は、input type=”image”は使用せずにテキスト表示させるのがよいと思います。
文字コードは基本 shift_jis でいいかと思いますが、環境によっては文字化けを起こすようです。
<input type="hidden" name="charset" value="shift_jis" />
その場合は 「shift_jis」 になっている箇所を 「utf-8」 など、自身の環境にあった内容に変更して下さい。
mixiチェックには登録キーが必ず必要です。
登録キーは、Developer登録をすると誰でも取得できます。
キー登録方法は以下を参考に。
mixiチェックのチェックボタンを設置[to-R]
Twitterツイートボタンは以下のように。
<a href="http://twtr.jp/share?url=携帯ページURL&text=つぶやく内容"> <img src="Twitter画像" alt="つぶやく" width="58px" height="18px" border="0" /> </a>
mixiチェックとTwitterの、二つを合わせたHTMLが以下です。
色々考えてみたんですが、テーブルで囲うのがいいかなと思います。
<table width="140" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="60"> <form action="http://m.mixi.jp/share.pl?guid=ON" method="POST" > <input type="hidden" name="charset" value="shift_jis" /> <input type="hidden" name="check_key" value="登録キー" /> <input type="hidden" name="title" value="ページタイトル" /> <input type="hidden" name="primary_url" value="携帯ページURL" /> <input type="hidden" name="mobile_url" value="携帯ページURL" /> <input type="hidden" name="pc_url" value="PCページURL" /> <input type="image" value="mixiチェック" src="ミクシィチェック画像" width="58" height="18" alt="mixiチェック" /> </form> </td> <td width="60"> <a href="http://twtr.jp/share?url=携帯ページURL&text=つぶやく内容"> <img src="Twitter画像" alt="つぶやく" width="58px" height="18px" border="0" /> </a> </td> </tr> </table>
といった感じです。
登録キーなどの箇所を埋めてあげると完成。携帯から確認してみてください。
WordPressのプラグイン、Ktai Styleでの導入方法
ワードプレスでプラグインKtai Styleを使っている場合の、
mixiチェックとtwitterつぶやくボタンを設置する方法です。(Ktai Styleを使っていることを前提に書いています。)
必須ではなさそうだけど、ボタンを配置するページのヘッダーに以下を。
<link rel="mixi-check-alternate" media="mixi-device-mobile" type="text/html" href="<?php print("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" />
HTMLは single.php 等の表示したい箇所に以下のように。
<table width="140" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="60"><form action="http://m.mixi.jp/share.pl?guid=ON" method="POST" > <input type="hidden" name="charset" value="shift_jis" /> <input type="hidden" name="check_key" value="登録キー" /> <input type="hidden" name="title" value="<?php ks_title(); ?>" /> <input type="hidden" name="primary_url" value="<?php print("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" /> <input type="hidden" name="mobile_url" value="<?php print("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" /> <input type="hidden" name="pc_url" value="<?php print("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" /> <input type="image" value="mixiチェック" src="<?php ks_theme_url(); ?>ミクシィチェック画像" width="58" height="18" alt="mixiチェック" /> </form></td> <td width="60"> <a href="http://twtr.jp/share?url=<?php print("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&text=「<?php ks_title(); ?>」"> <img src="<?php ks_theme_url(); ?>tw_btn.gif" alt="つぶやく" width="58px" height="18px" border="0" /> </a></td> </tr> </table>
全てのキャリアで確認しているわけではありません。設置後、動作確認をしてください。
コンテンツを取得するときの “User-Agent” HTTP ヘッダー・フィールドについては、今回特に何もしていません。
ユーザーエージェントのロボットを弾かないようにするには、htaccessの設定をしてあげてロボットを呼び込んであげて下さい。
mixi-check/1.0 (http://mixi.jp/)
Twitterやmixiチェックなどは、特に携帯で威力を発揮するサービスだと思います。
この機会に携帯サイトへ導入してみてはどうでしょうか。
■参照・参考
mixiチェック
WordPressとKtai Styleにおけるミクシィチェック導入方法 | 吉橋しーしーの論壇ブログ by センスアップマーブル
携帯サイトにtwitter
nomiso web: 携帯サイトに「つぶやく」ボタンを設置する
参考にさせていただいておりますが、スマートフォンは別として、一般携帯サイトでは「input type=”image”」が使えないはずです。
修正されたほうがいいかもしれませんね。
でも大変参考になりました。
コメントありがとうございます。
>>一般携帯サイトでは「input type=”image”」が使えないはずです。
手持ちの携帯では表示されたのですが、表示されない携帯も多いようですね。
ご指摘いただきありがとうございますm(__)m
修正しておきます><
お役に立ててよかったです!
参考に設置しようと思ったのですが、inputのtypeのimageは携帯サイトでは基本的には使えないようで・・・。
Mixiチェックが設置されている携帯用のサイトを教えてください。みつかりません、、、確認してみたいのですが
例えば、
http://hdml.tdn.co.jp/cgi-bin/index.cgi
のようなauの公式 携帯サイトのURLをモバイルの公式ツイッターでツイートして短縮URLに変換されると、同じauで、 モバイルのツイッターで、そのURLをアクセスしても、携帯サイトに遷移しません。
この障害を回避する方法を教えてください。
この現象が不安で携帯サイトにツイートボタンを設置するのを躊躇しています。
(*^o^*)