減点されないソーシャルブックマークボタン
ソーシャルネットワークサービスやソーシャルブックマークなどのリンクを付与するボタンを設置しました。しかし、各サービスの公式ボタンをそのまま設置すると Another HTML-lint gateway でエラーが出てしまい減点されてしまいます。また、当ウェブサイト、ナメサメカリンチョは XHTML 1.0 Strict で書かれていますので、W3C の Markup Validation Service にもパスできません。公式のボタンを使用しなければ簡単に解決できるのですが、できるだけ公式ボタンを使用しつつ、かつ、極力減点されないように工夫してみました。今回設置したのは以下のサービスのソーシャルブックマークボタンです。
- mixi
- はてなブックマーク
- Google +1
mixi チェック
登録
mixi のチェックボタンを設置するためには、まず、個人パートナー登録 を行う必要があります。携帯電話のメールアドレスが必要です。
キー発行
次に、パートナー・ダッシュボード の mixi Plugin で新規サービス追加をします。すると識別キーが発行されますのでこれをコピーしておいてください。
ボタン設置
設置したい場所に下記のように入力します。urlurlurl の部分にはチェックしたいページの URL を、keykeykey の部分に先ほどコピーした識別キーを代入してください。
URL はパーセントエンコードする必要がありますので、WordPress に mixi チェックボタンを設置する場合は下記のように入力してください。
この方法であれば、JavaScript を使う必要もありません。参考: mixi チェックボタンの技術仕様
はてなブックマークボタン
はてなブックマークボタンは 通常のはてなブックマークボタン と 行動情報を取得しないはてなブックマークボタン がありますが、今回は後者を設置します。前者でも減点させないような設置は可能です。サイトのポリシーに応じて使い分けてください。
設置したい場所に下記のように入力します。urlurlurl の部分にはブックマークしたいページの URL を代入してください。
WordPress にはてなブックマークボタンを設置する場合は下記のように入力してください。
ツイートボタン
デフォルトのツイートボタン は HTML 5 方式なので 公式ページ を参考にちょっと改変しましょう。
設置したい場所に下記のように入力します。your_screen_name の部分にはご自分の twitter のアカウント名を代入してください。URL は自動で取得されますので入力する必要はありません。
グーグル プラスワンボタン
コードの入手
コードは 2 種類あります。ボタン表示用のコードと JavaScript 呼び出し用のコードです。
JavaScript 呼び出し用高速コード
公式サイト には言語のドロップリストが二つありますが、上を「English (US)」にして、下を「Japanese - 日本語」にしてください。更に「Asynchronous」をチェックすることで JavaScript 呼び出し用のコードが非同期用の高速なコードになります。ボタン表示用のコードは変わりません。私は JavaScript 呼び出し用のコードを Facebook のスクリプトと合わせて私は外部スクリプト化してます。
ボタン表示用コード
ボタン表示用のコードは HTML 5 の文法のコードとそうでないコードがあります。そうでない方がデフォルトです。HTML 5 ではない方のコードでボタンを設置すると Another HTML-lint gateway で減点されることはありませんが、W3C の XHTML 認定 には合格しません。HTML 5 の文法のコードだと減点される上に合格しません。これは根本的な問題なので twitter ボタンのように改変することもできません。こうなったらゴリ押しです。
ゴリ押し
ボタン表示用のコードを あらかじめエンコードしてから表示時に JavaScript でデコード して表示するようにします。ボタン表示用のコードはどちらを使っても構いませんが、今回は HTML 5 のコードを利用します。
上記のコードを Unescape Encoder/Decoder でエンコードして得られたコードが下記。
ちなみに、「そうでない方」だと下記の通り。
上記のコードを Unescape Encoder/Decoder でエンコードして得られたコードが下記。
これを JavaScript でデコードします。グーグルのプラスワンボタンを設置したい場所に下記のように入力します。
デコードスクリプトは外部スクリプト化するとさらにスマートです。
フェイスブック いいね！ ボタン
Facebook の Like! ボタンです。これも Google の +1 ボタン同様エンコードとデコードが必要です。まずは、Facebookコネクト でコードを入手してください。エンコードデコードする方法だと URL を挿入することができませんので、URL 欄は必ず空欄にしてコードを入手してください。
先ほどと同様に加工し、Facebook のいいね！ ボタンを設置したい場所に下記のように入力します。
デコードスクリプトは外部スクリプト化するとさらにスマートです。
各プラグインのスクリプトの読み込みについては私は tokkonoPapa さんの 最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた のやり方を完全にマネしてます。
関連記事
関連記事はありません。
. Designed by myself. Animated by コースヶ.
トラックバック
URL:
コメント
この記事のコメントフィード
コメント投稿