教えてエロい人

2011年06月22日 水曜日 15時14分

wordpressで作っているこのブログにも「tweetボタン」と「google +1」を設置してみた。
最初にこの記事書いた時と場所を変えて、ページ下部のページインフォの下ね。
まぁ、誰も使わないと思うけど。
一応、世の中のソーシャル化の並に乗っておこうかなと。
まぁ、誰も使わないと思うけど。

そこで問題発生。

IEで見てる人達は「google +1」ボタンが表示されてないでしょ〜。
なんかね、デフォの記述だとIEが対応していなくて表示されないんだって。
デフォの記述はコチラ。

<g:plusone size=”medium”></g:plusone>

これじゃIEじゃ表記されないから、IEに対応させた記述が必要。
ググッた結果、下の記述でIEでも表示されるようになるらしい。

<div class=”g-plusone” data-size=”medium” data-count=”true”></div>

コレで解決…じゃないの。
この記述をsingle.php(記事個別ページ)に張れば問題ないんだけど、このブログみたいにindex.php(トップページ)のループ内に貼ったとしよう。
その状態で気に入った記事の「google+1ボタン」を押すと、その記事に対してのボタンを押した事にならず、トップページのボタンを押した事になってしまうのだ。
ボタンが設置してあるのがトップページだからね。
それを解決する手段がコチラ。

<g:plusone size=”medium” href=”<?php the_permalink(); ?>”></g:plusone>

テンプレートタグでパーマリンクを追加して「この記事に対しての+1ボタンですよ」と指定してあげれば良い。
IEを無視するならコレでOK。
が、やはりIEは無視できない。
と言うわけで、IEに対応した記述にもパーマリンクを追加してみた。

<div class=”g-plusone” data-size=”medium” href=”<?php the_permalink(); ?>” data-count=”true”></div>

これが上手くいかない。
ボタンは反応するが、記事別じゃなくトップページが対象になっちゃう。
ソースを見ると、パーマリンクも記述されてるんだけど、パーマリンクがボタンの対象になってないみたい。

どういう記述をすればIEでも表示され、indexの記事ループ内に貼ってもボタンの対象が各記事にするには、どういう記述をすれば良いか教えてくれると嬉しいです。

と言う訳で、現在はIEを無視したデフォの記述で表記しております。

関連記事

コメントさんきゅ

joe@オフィス : 2011年06月22日 水曜日 17時56分

会社よりこんにちは^^;
最近流行ってるみたいですが、そもそもWordpress使ってないのでニュース斜め読み程度にしか分からないですw

そんな中でググってみたところ…気になる記事を1つ見つけたので貼っときます(既読だったらすみません)
http://www.suzukikenichi.com/blog/how-to-display-plus-one-botton-using-html5/

ぶっちゃけ、これ、全てのブラウザに完全対応はしていないと見たんですが…如何でしょう?

しゅん : 2011年06月23日 木曜日 04時30分

あ、そこ参考にしました(笑)。
そこに書いてるHTML5で記述した奴にhrefで記事パーマリンクを指定すると機能しないんですよ^^;

多分、てか、確実にgoogle+1は見切り発車ですね。
ブラウザ対応もだし、右に余白が出来ちゃったりするし。
googleさんはソーシャルが苦手なようでw

joe@オフィス : 2011年06月23日 木曜日 11時38分

やっぱり覗いてましたか^^;

あ、ちなみにですねー。
会社のIE7(OS:WinXP)では見えてませんが、家のIE8(OS:WinVista)では見えてましたよ。

ご参考までに。(って、それだけの情報か参考にならないか…)

しゅん : 2011年06月24日 金曜日 01時02分

今はIE対応ソースにしたので見えてるはずですが…。
ソーシャルボタンは埋込み(?)のCSSで、向こう側でマージンとか指定してるので、こっちの都合でデザインしづらいですね。
変に余白出来たり。
ググって「こうすれば大丈夫!」って書いてる対応をしても上手くいかない事が多々でイライラ。

通りすがり : 2011年08月13日 土曜日 00時26分

通りすがりです。

問題が解決しているかもしれませんが、 data-href=”” とすればよいのでは?

<div class="g-plusone" data-size="medium" data-count="true" data-href="”>

参考:
http://inspire-tech.jp/2011/06/facebook_like_and_google_plus_one/

小岩井牧場と岩手山、綺麗ですね。

しゅん : 2011年08月13日 土曜日 02時21分

こんばんわ〜。
やや、これはアリガタイです!

なるほど、「data-href」ですか…。
納得。
他のにもdataが付いてますもんね。
data-hrefとかdata-sizeとかはhtml5なのかなんなのか分かりませんが、全くノータッチで無知だったので助かりました♪

岩手山は見る角度で形が全く違うのでいろんな姿を楽しめますよ。
みんな地元から見える角度が一番だと言いはりますw

コメントどーぞ

© 2010 - 2024 南国スキーぶろぐ