SNSボタンをつけたのでやり方を書いてみた - 女性起業家のビジネスパソコンサポート:エレフセリア
ホーム > WordPressカスタマイズ > SNSボタンをつけたのでやり方を書いてみた

2015/06/10

SNSボタンをつけたのでやり方を書いてみた

まいどです、nonです( ・ω・)ノ
このサイト、記事の一番下にいろんなSNSのボタンがあるの、気づいてましたかー?
ソーシャルメディアのイメージ
今回の記事ではそれぞれのボタンをどうつけたか、を紹介したいと思います。
2015/11/21:Twitterの仕様変更に伴い修正しました

SNSボタンのつけ方は2種類あります

スマホをいじる手
ひとつは、普通にHTML+cssでつける。
もうひとつは、WordPressならばプラグインを使う方法があります。
でね、つけるときに迷ったんですよ。
「すでにプラグインを結構使ってるから、プラグインは使いたくないなぁ」と。
…ということで、うちではHTML+cssで導入しました。
この方法だといろいろ応用できるんですよーo(^▽^)o

HTML+cssでの設置方法

ではさっそくはじめましょー。
まず、実際に表示されるデザインを考えます。
  • 小さなボタンか、バナーのように大きいのか
  • カウント数を表示するのかどうか、表示するなら上にするのか横にするのか
…と、簡単にざっくりでいいので決めておきます(b^-‘)

HTML+cssの準備

その上で、横並びのHTMLとcssを組みます。
この『メニューやボタンを横並びにする』コードは、ある種お約束でもあるので、サラッといきますよー。
(なんたってメニューバーにも使われるコードですからねっ)
ちなみにうちのサイトでは…
HTML
<ul class="sns">
<li>Twitterボタンのコード</li>
<li>Facebookボタンのコード</li>
<li>Google+ボタンのコード</li>
<li>はてなブックマークボタンのコード</li>
<li>Pocketボタンのコード</li>
</ul>
CSS
.sns {
width: 100%;
overflow: hidden;
list-style-type: none;
}
.sns li {
display: inline-block;
vertical-align: top;
margin-right: 5px;
}
.sns iframe {
margin: 0 !important;
}
これだけ!
まずはここまでが準備。
では、各SNSボタンの設定方法を書いていきますよー。
ちなみに参考にしたのはこちらのブログです。

Twitterボタンのつけ方

まずはTwitterボタンからいきましょー。
しょっぱなからカスタマイズ多めですが、順に追っていけば大丈夫でつ。
公式:Twitterボタン
で、画像のとおり設定すると以下のコードが右側に出るので、それをコピペします。
Twitterボタン(15/11/21変更)
<a href="https://twitter.com/share" 
class="twitter-share-button" 
data-via="Twitterアカウント名" 
data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
これは、公式のページでボタンを選んだ(右を選びました)状態のコードです。
(本来は2行ですが、読みやすくするため改行してあります)
まず、3行目のTwitterアカウント名のところには自分のアカウント名を入力します。
続いて、以下のコードを3行目に追加します。
data-url="<?php the_permalink(); ?>" 
data-text="<?php the_title(); ?>"
さらに、このままだとうちのようなボタンにならず、公式のサンプルのようになるので、このブログと同じようにしたい場合は
data-count="vertical"
を先ほど追加したところの次に入れてください(*´ω`)b

Facebookボタンのつけ方

おそらくこれが一番大変です…
何しろこれで1記事書けるだろうってくらい(´・ω・`)
ということで、これだけは別記事にしましたっ。
>>>Facebookのいいね!ボタンはこう付けましょう

Google+ボタンのつけ方

気を取り直して、Google+ボタンですよー。
公式:+1 ボタン | Google+ Platform | Google Developers
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
これをコピペするだけでok!
Googleアカウントを持っていれば、Google+に登録していなくても使えますよん♪

はてなブックマークボタンのつけ方

次ははてなブックマーク、通称はてブです。
はてブは、人と共有もできるオンラインブックマーク、というサービスです。
普通のブックマーク(いわゆるお気に入り)って、そのパソコンごとじゃないですか。
それを他のパソコンや知り合いと同じブックマークを共有できるわけです。
で、そのボタンもつけちゃおうと(´ω`)b
はてブも少しカスタマイズが必要になります。
公式:はてなブックマークボタンの作成・設置について – はてなブックマーク
<a href="http://b.hatena.ne.jp/entry/" 
class="hatena-bookmark-button" 
data-hatena-bookmark-layout="standard-balloon" 
data-hatena-bookmark-lang="ja" 
title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
これは、公式のページでボタンを選んだ(右を選びました)状態のコードです。
(本来は1行ですが、読みやすくするため改行してあります)

この状態の1行目を以下のとおり変更しています。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" 
次に、3行目に以下を追加します。
data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" 
そして、ボタンを揃えるために3行目を以下のとおり変更しました。
data-hatena-bookmark-layout="vertical-balloon" 
…直すとこちょっと多めですが、これでボタンの種類がそろいました♪

pocketボタンのつけ方

では最後…の前に、Pocketを知らない方のためにちょっと説明を。
Pocketとは『ネット上で見つけた、後で読みたい記事』を保管する場所(=ポケット)を提供しているサービスです。
これのいいところは、保存できるのがWebサイトだけでなく動画などもokなところ。
さらに、PCだけでなく、スマホやタブレットなどにアプリさえ入れてしまえばどのデバイスでも見られるんですよー。
…まぁ詳細は改めて紹介するとして(ぉぃ)、以下の公式サイトでボタンを選んだ時に出るコードをコピペすればokですよん。
公式:Pocket for Publisher:Pocket Button
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-pocket-align="left"></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>
コードに関しては一番悩まなくていいですねw

プラグインでの設置方法

「SNSボタンの設置をしよう!」
と決めた時点でプラグインは想定外にしてしまったので、いろんなプラグインを紹介しているサイトをご紹介します♪

まとめ

iPhoneで確認したらなぜかTwitterボタンは消えることがあるわ、Pocketボタンがずれるわなどなど紆余曲折しまくりな作業でした(;´Д`)
今回のはWordPressの人向けカスタマイズになってますが、元のコードを使えばアメブロなどでも使えるワザですよー。
スポンサーリンク

関連記事