WordPressにソーシャルボタンを追加 表示位置の調整に苦戦する。

広告
wordpress-social-button-add

このブログは有料テンプレートを利用しているので、最初から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]

TWITTER

下記サイトを参考にさせて頂きました。

Twitter 公式ツイートボタンの設置方法

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() ?>&amp;layout=button_count&amp;width=200&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;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

隙間調整するのにネガティブマージン使いまくりです。

タグ

PC、スマホ兼用です。

2014-05-02 00.53.28

スマホだと↑こんな感じで表示されます。

PCは↓ここに出てます。

広告

コメントをどうぞ

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">