このブログは有料テンプレートを利用しているので、最初からfacebook、twitter、はてなのソーシャルブックマークが設定されていた。
googleとpocketを追加しようと思ったのですが、結局最初から全部自分で設定してみました。
このページで紹介しているのはwordpress用の設定なので、通常のWEBサイトへの追加については各ソーシャルブックマークの公式サイトを参考にしてください。
広告
Googleの+1ボタン
公式を参考にしました。
head内に下記タグを追加
[text]
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: ‘ja’}
</script>
[/text]
ボタンを表示したい場所に下記を記述
[text]
<g:plusone size="medium"></g:plusone>
[/text]
調整を行ったのはサイズだけです。デフォルトでは少し縦に長いので、他のボタンをサイズを合わせる為にsize=”medium”を指定しました。
はてなブックマーク
公式と、デフォルトでテンプレートに記載されていたタグを参考に追加しました。
ボタンを表示したい箇所に以下を記述
[text]
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
[/text]
下記サイトを参考にさせて頂きました。
head内に下記タグを追加
[text]
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>
[/text]
ボタンを設置したい位置に下記を記述
[text]
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php wp_title(); ?>" data-count="horizontal" data-lang="ja">Tweet</a>
[/text]
Facebookのいいねボタン
下記サイトを参考にさせて頂きました。
ボタンを表示したい場所に下記を記述します。
[text]
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink() ?>&layout=button_count&width=200&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:104px; height:21px;" allowTransparency="true"></iframe>
[/text]
Pocketのボタン
非常に簡単でした。公式サイトでデザイン選んでタグ取得するだけです。
ボタンを表示したい位置に下記を設置
[text]
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
[/text]
レイアウトについて
ソーシャルブックマークボタンはそれぞれ色々なスタイルが設定されているので、綺麗にレイアウトするのが難しいです。
特にpocketのボタンは改行が入ってしまい厄介でした。
私は下記のサイトのCSSをベースにさせてもらいました。
主要ソーシャルボタンを水平設置する際Pocketボタンの改行を防ぐ方法
最終的に下記のように記述しました。
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.social-top{ border-top:1px dotted #CCC; text-align:right; margin:10px 0 0 0; padding-top:10px; } .social-button-hatena { float: right; display: inline-block; *display: inline; /*for IE*/ *zoom: 1; /*for IE*/ height: 30px; margin:0 -20px 0 0; width:100px; } .social-button-twitter { float: right; display: inline-block; *display: inline; /*for IE*/ *zoom: 1; /*for IE*/ height: 30px; margin:0 -80px 0 0; } .social-button-fb { float: right; display: inline-block; *display: inline; /*for IE*/ *zoom: 1; /*for IE*/ height: 30px; margin:0 6px 0 0; } .social-button-pocket { float: right; display: inline-block; *display: inline; /*for IE*/ *zoom: 1; /*for IE*/ height: 30px; margin:0 -35px 0 0; } .social-button-google { float: right; display: inline-block; *display: inline; /*for IE*/ *zoom: 1; /*for IE*/ height: 30px; } |
隙間調整するのにネガティブマージン使いまくりです。
タグ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="social-top"> <div class="social-button-google"> <g:plusone size="medium"></g:plusone> </div> <div class="social-button-hatena"> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </div> <div class="social-button-twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php wp_title(); ?>" data-count="horizontal" data-lang="ja">Tweet</a> </div> <div class="social-button-fb"> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink() ?>&layout=button_count&width=200&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:104px; height:21px;" allowTransparency="true"></iframe> </div> <div class="social-button-pocket"> <div class="social-button-pocket"><a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div> </div> <div style="clear:both"></div> </div> |
PC、スマホ兼用です。
スマホだと↑こんな感じで表示されます。
PCは↓ここに出てます。
