[携帯]携帯サイトにmixiチェックとtwitterつぶやくボタンを設置する方法。

携帯サイト(ガラケー、フューチャーフォン)にmixiチェックとtwitterつぶやくボタンを設置する方法。


いまさらかも知れませんが、書いておきます。
時代はスマートフォンだよ!とか言わないでくださいね。

Twitterでつぶやくボタンや、mixiチェック、facebookイイネ!などのソーシャルブックマークボタンは、
PCサイトでは当たり前と言っていいくらいよく見ますよね。

携帯用のサイトでも見かけるかと思いますが、
今回は、一般的なTwitterとmixiチェックを設置したのでその導入・設置方法を紹介します。

mixiチェック、Twitterツイート画像を用意

mixiチェックのボタン画像はこちらにあります。↓button-1の画像を使用しました。
mixi チェックボタンの設置 技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
仕様や、もっと詳しい設置方法を知りたい方も見ておいて下さい。

Twitter画像は公式のツイートボタンに合わせてデザイン。
サイズは18×58のmixiチェック(button-1)のサイズに合わせて作成しました。

Twitterつぶやくボタン画像

このtwitter画像は使っていただいて結構なのですが、直リンクはご遠慮願いますm(__)m
画像をPCなどに保存した後、使って下さいね。

設置したらこんな感じ。

携帯サイトにmixiチェックとtwitterつぶやくボタンを設置。

携帯サイトに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: 携帯サイトに「つぶやく」ボタンを設置する

“[携帯]携帯サイトにmixiチェックとtwitterつぶやくボタンを設置する方法。” への6件の返信

  1. 参考にさせていただいておりますが、スマートフォンは別として、一般携帯サイトでは「input type=”image”」が使えないはずです。
    修正されたほうがいいかもしれませんね。
    でも大変参考になりました。

    1. コメントありがとうございます。
      >>一般携帯サイトでは「input type=”image”」が使えないはずです。

      手持ちの携帯では表示されたのですが、表示されない携帯も多いようですね。
      ご指摘いただきありがとうございますm(__)m

      修正しておきます><

      お役に立ててよかったです!

  2. 参考に設置しようと思ったのですが、inputのtypeのimageは携帯サイトでは基本的には使えないようで・・・。

  3. Mixiチェックが設置されている携帯用のサイトを教えてください。みつかりません、、、確認してみたいのですが

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

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

コメントは受け付けていません。