WEBマスターのお仕事TOP > スポンサー広告 > 【更新】mixiイイネ!ボタンを設置 (ページ固有URLを投稿)WEBマスターのお仕事TOP > ソーシャルプラグイン設置 > 【更新】mixiイイネ!ボタンを設置 (ページ固有URLを投稿)

スポンサーサイト

(--/--/--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【更新】mixiイイネ!ボタンを設置 (ページ固有URLを投稿)

(2011/11/30)
(2011/11/30更新)mixiがHTMLコードを配布している画面で、固有URLを投稿するオプションが付いていたので、記事を更新しました。更新箇所はオレンジ色の字で追記しています。

個人的に「mixiチェック」がいまいちピンとこないラベルだったので、mixiイイネ!ボタンに変えてみました。

設置方法


まず、「mixiチェックボタンを設置しよう」のStep.1~3を済ませる。

HTMLコードの取得画面までは同じで、下記の「対象URL(任意)」を空欄のままにしておけば、イイネ!ボタンを設置したページのURLが投稿されるようになり、下記記事のコードのようにURL部分に変数を入れなくても済むようになりました。
イイネ!ボタン

さらに、「イイネ!した後にコメント入力欄を表示する」にチェックを入れると、コメントと共にイイネを投稿できるようになりました。
mixiイイネ!コメント入力

当サイトのイイネボタンもコメントできるようにしてありますので、試しにコメントしてみてくださいね。



※↓ここから下は古いコードとキャプチャです!↓

新規サービス登録の完了画面の、
mixiイイネ
「こちら」をクリックすると次のような画面に飛びます。
mixiイイネ!

対象URL:とりあえずそのまま
横幅:適宜
プロフィール画像表示:適宜(チェックを外すと、自動的に横幅が120になります)

のようにして、「タグ取得」ボタンを押下すると、タグ行にコードがコピペ用のコードが表示されます。mixiも以前よりちょっと親切になりましたね^^

で、ここで吐き出されたタグをそのまま使うと、どのページからイイネ!を押したとしても、mixi側には全てhttp://test.com(TOPページ)が投稿されてしまいます。これではあまり意味が無いですよね。(mixiがんば♪)下層ページでmixiイイネ!を押したら、そのページのタイトルとURLがmixiに投稿されるのが望ましいわけです。それには生成されたコードのURL部分に、イイネ!ボタンが設置されているページのURLを挿入すれば良いわけです。

FC2ブログとMovabletypeの場合


コードの赤字部分を、FC2、Movabletypeそれぞれの変数に書き換えればOKでした。
■FC2

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:120px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<%topentry_link>&service_key=★ここはあなたのチェックキー★&show_faces=false&width=120"></iframe>


■Movabletype

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:120px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<$MTEntryPermalink$>&service_key=★ここはあなたのチェックキー★&show_faces=false&width=120"></iframe>


うん、この方が自然ですよね。
関連記事

コメント

同じ画面で複数のイイネを追加する。

お疲れ様です。

自分のウェブサイトでmixiイイネを追加したいです。
一つの画面で一つのイイネは大丈夫と思いますけれでも、
同じ画面で例えば5個写真がある場合は、
それぞれの写真のそれぞれイイネ表示したいと思います。

宜しくお願い致します。
クマール・プラシャント

Re: 同じ画面で複数のイイネを追加する。

クマール・プラシャント様

コメントをありがとうございました。
1ページにmixiチェックボタンを複数置く方法、私自信は未経験ですが、少し調べて見ました。

このページ↓の「script 要素:」パートの以下の部分が参考になるのではないでしょうか。
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/#toc-mixipc-
--
ひとつのページに複数のボタンを設置する場合、ボタンを配置するそれぞれの位置に a 要素を置き、最後の a 要素の直後 に script 要素をひとつだけ置いてください。
--

ご参考にされてはいかがでしょうか。

> お疲れ様です。
>
> 自分のウェブサイトでmixiイイネを追加したいです。
> 一つの画面で一つのイイネは大丈夫と思いますけれでも、
> 同じ画面で例えば5個写真がある場合は、
> それぞれの写真のそれぞれイイネ表示したいと思います。
>
> 宜しくお願い致します。
> クマール・プラシャント

mixiイイネボタンの設置の件

はじめまして。ブログ拝見いたしました。ちょっと教えていただけませんでしょうか?mixiイイネのタグを取得し、ブログにはりけてみたのですが、下記の問題があります。
①トップページにリンクし、記事ごとにリンクできない。
②コメントがポップアップしない。

以下のタグのどこを修正すればよろしいでしょうか? 恐縮ですが、ご教授賜りたく、、、

<div data-plugins-type="mixi-favorite" data-service-key="cb9d3e566afee757511aeb28b067c69fcd9f22fe" data-href="" data-show-faces="true" data-show-count="true" data-show-comment="true" data-width="450"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

Re: mixiイイネボタンの設置の件

ナチュラルハイ様

コメントありがとうございました。
mixiイイネ!ボタンのコードが更新されていたので、当記事の方も更新しました。

> ①トップページにリンクし、記事ごとにリンクできない。
これは当記事も更新しましたが、コード取得画面で「対象URL(任意)を空欄のままコードを取得すればOKなハズです。

> ②コメントがポップアップしない。
これもコード取得画面で「イイネ!した後にコメント入力欄を表示する」にチェックを入れれば良いハズですが、見たところ data-show-comment="true" となっているので、コード的には正しいように見えます。


貼り付けて頂いたコード拝見しましたが、特に問題が無いような・・・・ブラウザのjavascriptはオンになっていますでしょうか?? 当記事のイイネ!ボタンをクリックするとコメントポップアップは表示されますか? 表示されない場合は、コードの問題ではなくブラウザの設定(Javascriptオフなど)が疑われます。ご確認ください。




> はじめまして。ブログ拝見いたしました。ちょっと教えていただけませんでしょうか?mixiイイネのタグを取得し、ブログにはりけてみたのですが、下記の問題があります。
> ①トップページにリンクし、記事ごとにリンクできない。
> ②コメントがポップアップしない。
>
> 以下のタグのどこを修正すればよろしいでしょうか? 恐縮ですが、ご教授賜りたく、、、
>
> <div data-plugins-type="mixi-favorite" data-service-key="cb9d3e566afee757511aeb28b067c69fcd9f22fe" data-href="" data-show-faces="true" data-show-count="true" data-show-comment="true" data-width="450"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/110-a686e3d1
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。