新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

mixiのチェックボタンをつけてみた【後編】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

さて、前回なんとか「mixiチェックキー」を入手するところまで解説しました。
今回はそれを実際使ってどうスクリプトを書いて行けばいいのかを解説。

□ mixiのチェックボタンをつけてみた【前編】
□ 技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

スポンサーリンク
 

ベースになるのは上記「技術仕様」にある以下のソース。

<a href="http://mixi.jp/share.pl" class="mixi-check-button">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

これにいくつかの要素を書き加えていく。

まずは「data-key」。
前回入手した「mixiチェックキー」を以下のように書き加える。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="7bb3d96b3386c97cc94cf025119c3d05ab4cae04">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

もう一つ「data-url」。
これは、ツイッターの公式ツイートボタンを一覧表示にも対応させた時に使った方法と一緒です。
つまり、一覧表示の時にボタンをクリックされた場合、今開いているサイトのURLではなくパーマリンクをリンク先に設定する方法。
なお<$ArticlePermalink$>ってのはライブドアブログに限る表記です。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="7bb3d96b3386c97cc94cf025119c3d05ab4cae04" data-url="<$ArticlePermalink$>">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

以上で出来上がり。
あとは、デザインのカスタマイズを使って該当の部分に上記ソースを描き込めばOK。

できたもの↑↑(は、このブログ)

でもね。
ただでさえクローズドのmixiで友達まで公開までしか設定できないこのサービス、果たしてどの程度の集客力があるのかはちょっとわかりません。
まあ、母体の大きなmixiなので期待していないというと嘘になりますが。。
それに、いずれfacebookがmixiを抜くような事態になったらfacebookの「イイネ!」ボタンに切り替えればいいことですしねぇ。 

 - プログラミング, 覚え書き

アドセンス広告メイン

Comment

  1. うえ より:

    とても参考になりました!^^
    最初はmixiチェックを画像で貼り付けていたのですが、
    どうも微妙にズレるので(恐らくCSSのせいなのでしょうが)
    テキスト形式で設置してみました。
    分かり易い図解でとても助かりました!
    ありがとうございます。^^

Message

メールアドレスが公開されることはありません。

  関連記事

フォローされているかされていないかを確認する簡単な方法【ツイッター】

1年以上前の記事です。内容が古い可能性があります。埼玉県熊谷市のツイッター(Tw …

no image
iPhone(アイフォーン)で再生中の曲を止める方法

1年以上前の記事です。内容が古い可能性があります。僕の場合、iPhone(アイフ …

PV(ページビュー)>セッション>UU(ユニークユーザー)の法則

1年以上前の記事です。内容が古い可能性があります。そろそろ、PV(ページビュー) …

no image
Flickr(フリッカー)とFacebook(フェイスブック)を連携させる方法

1年以上前の記事です。内容が古い可能性があります。連携好きの僕が来ましたよ。今回 …

社内ネットワークのパソコンでパスワードを変えたら確認して置きたい唯一の設定

1年以上前の記事です。内容が古い可能性があります。Windowsマシンを社内ネッ …

Facebook(フェイスブック)をきっぱりすっきり辞める方法(アカウントの削除)

1年以上前の記事です。内容が古い可能性があります。以前、アカウント乗っ取りの実験 …

Appleの「Retina(レチナ)ディスプレイ」とはなんなのか?

1年以上前の記事です。内容が古い可能性があります。Appleの新商品発表会「WW …

no image
P905iで緊急地震速報を受信する設定

1年以上前の記事です。内容が古い可能性があります。先日の17時頃、社内で業務終了 …

P905iの電話帳をiPhoneに取り込む方法

1年以上前の記事です。内容が古い可能性があります。docomo(ドコモ)ケータイ …

「Xperia AX」の待受画面(デスクトップ)からオススメアプリをFacebookに簡単共有(シェア)

1年以上前の記事です。内容が古い可能性があります。「Xperia AX(ホームア …

血液型オヤジ