タイトルの横に[B!ボタン]と[いいね！ボタン]と[+1ボタン]を設置してみました。
プラグインとか使えば一括で簡単にできるんだろうけど、あえて自力で。
誰かの役に立つといいなってことでメモ書きです。
Wordpressへの設置に最適化してあります。
B!ボタン
はてなブックマークに追加できるボタン。
ボタンははてなブックマークボタンの作成・設置についてから作成できます。
ページから取得したコードだとどこのページでボタンを押しても同じURL,タイトルになってしまうので、そこを改造します。
初期状態で取得できるコードは
この様になっているはずなので、
"http://b.hatena.ne.jp/entry/"のうしろに<?php the_permalink(); ?>を追加し、
data-hatena-bookmark-title=""の""の間に<?php the_title(); ?>を追加します。
そうすることで、記事ごとのURL,タイトルのB!ボタンになります。
そうしてできたコードのaタグを記事テンプレートの設置したい場所に書き、scriptタグはヘッダーにでも放り込んでおきましょう。
−−−−−−−−−−
いいね！ボタン
Facebookのいいね！ボタン。
ボタンはLike Button – Facebook開発者から作成できます。
URL to Likeのところは適当に入れておいてください。あとで変えるので。
SendButtonはお好みで。（いいね！ボタンはウォールに投稿されない、送るボタンはウォールに投稿される。）
その他の設定もお好みでどうぞ。
できたらGet Codeをクリックすると、ポップアップウィンドウが表示されてコードが表示されます。
SendButtonを使わない場合はHTML5のタブに表示されているコードを、
SendButtonを使う場合はXFBMLのタブに表示されているコードを使います。
改造する部分は、プラグインを表示したい場所に〜のところに表示されているコードです。
初期状態で
となっているはずなので、
data-href=""の""の間を<?php the_permalink(); ?>にします。
そうすることで記事ごとのいいねボタンになります。
そしてできたコードを、記事テンプレートの設置したい場所に書き、1.にあるdivタグをbodyタグの直後に、scriptタグはヘッダーにでも放り込んでおきましょう。
なお、xfbmlのタグを使う場合は、htmlタグにxmlns:fb="http://ogp.me/ns/fb#"を追加するのを忘れないように。
さらに、コード取得ページの下部にStep2というのがあり、タグのカスタマイズができます。
必要な項目があれば記入しGetTagsボタンを押し、ヘッダーにでも放り込んでおきましょう。
−−−−−−−−−−
+1ボタン
GooglePlusの+1ボタン。
ボタンは+1 ボタンから作成できます。
お好みのサイズや表示のされ方、言語を選んだ後、詳細オプションをクリックし、+1ボタンの対象とするURLに何か一文字でもいいので書いておいてください。
するとこの様なコードが表示されていると思います。
改造するのは任意の文字列の部分です。
任意の文字列を<?php the_permalink(); ?>にします。
そうすることで、記事ごとの+1ボタンになります。
そうしてできたコードのg:plusoneタグを記事テンプレートの設置したい場所に書き、scriptタグはヘッダーにでも放り込んでおきましょう。
なお、スニペットのカスタマイズでいろいろ設定できます。
ページの種類を変更した場合はhtmlタグにコピペを、
その他の項目はheadタグにコピペをしましょう。
−−−−−−−−−−
なお、記事ページのタイトル横に表示したかったので、single.phpとpage.phpにボタンタグを追加し、
h2タグのstyleにfloat:leftを指定し改行を無効化、
ソーシャルボタンを並べた後に<div class="clear"></div>を追加することで行送りを行いました。
.clear{clear:both;margin:0;padding:0;}
ただしボタンの状況次第ではきれいに並ばなかったりするので、これは後ほど検討して再配置する予定です。
参考になれば幸いです！
0 Comments.