Facebookいいね等SNSの各純正ボタンタグ取得・設置・CSSまで

ソーシャルメディアの各ボタンタグ取得方法


Facebookなどのソーシャルボタンは、プラグインでソーシャルボタンを設置した方が簡単ですが、プラグインのjsや、CSSがページの読み込みを遅くさせたり、プラグインの更新が滞って困ったりすることも。

ならば、ボタンタグを取得して自分でテンプレートに設置したい!という方の為に、Facebook、Twitter、Google+、はてなブックマーク、Instagram、Klout、のそれぞれのソーシャルボタンの設置場所と、タグをどのように取得するかをまとめてみました。

ソーシャルボタンを設置して、アクセス・検索順位アップ?

WordPressのブログサイトに各ソーシャルボタンを設置して連携させるのは、ボタンを設置することで簡単にシェアできるようにして、記事の拡散を促すというのが第一の大きな目的です。

コンテンツが最も重要な評価ファクターであることには変わりありませんが、

アクセス数がページ評価のひとつ、といったことを踏まえると、ソーシャルの拡散によってアクセス数が増加した場合、

間接的、結果的に検索順位にも好影響がある、ということがかなり重要なポイントだから、です。

詳しくはこちらの記事を参照して下さい。→ 「facebookのいいねボタン等のSNSボタンがブログに必要な理由

次に、オリジナルデザインのボタンと、純正のボタンとについて考えてみましょう。

オリジナルボタン VS. 純正ボタン

オリジナルボタンについては、「ソーシャルボタンをオリジナル・フラットデザインにカスタマイズ」で詳しい記事にしていますが、

ソーシャルメディアのボタンをサイトに設置する場合、オリジナルのボタン画像やアイコンフォントを利用したいわゆる「オリジナルボタン」の方がページ読み込みが速いというメリットがあります。

各ソーシャルの純正ボタンの場合、

『ボタンを動作させるためスクリプトが、ページ読み込みの際に読み込みデータ量を増やしてしまうためにその分ページの表示速度を遅くしてしまう』

と言った方が良いかもしれません。

一方、ボタンをオリジナルにしたとしても、
Facebook Page Plugin(旧Facebookページ・ライクボックス)や、

Facebook Page Plugin example
画像引用:Facebook page pluginページより

Google+バッジ、

Google+バッジexample
画像引用:Googleバッジページより

Twitterの埋め込みタイムライン

Twitterの埋め込みタイムラインexample
画像引用:Twitter embedded-timelinesページより

を使いたい場合には、それらの為のスクリプトが必要となり、スクリプト読み込みの分ページ速度が遅くなるのは避けられません。

ただ、純正ボタンのスクリプトと、前述のページプラグイン、Google+バッジ、埋め込みタイムラインのスクリプトは各ボタンのものと同じもの。

なので、ページプラグインなどを使いたい場合でも各ソーシャルのスクリプトを各ページで一回ずつ読み込めばOKです。

また、そのスクリプトのページ内での位置や、スクリプトの新旧も読み込みに関係します。

スクリプトの読み込みについて

スクリプトの読み込みのためには、header.php<body>タグ直後か、footer.phpの</body>タグ直前に書き込みます。

おすすめなのは、footer.phpの</body>タグ直前。
こちらの方がページ速度への影響が少なくなります。

ここでは、Facebook、Twitter、Google+、Klout、のそれぞれのソーシャルボタンのタグ(ボタンタグとスクリプト)の取得方法についてまとめていますが、

それぞれのボタンタグはボタンを設置したいところに、スクリプトタグは全てまとめてfooter.phpに置いた方が良い、ということを念頭において

テキストソフトでボタンタグだけ、スクリプトだけをコピペしたファイルを作成していくと後の作業が楽になります。

例)Twitterボタンの場合
Twitterのボタンタグとスクリプトタグを分ける

子テーマのheader.php<body>タグ直後か、footer.phpの</body>タグ直前に、

まとめたスクリプトを全部コピペするか、

または、スクリプトを読み込むための下のような一行を入れておいて、まとめたスクリプトをphpテンプレートとして読み込みます。

<?php get_template_part('social-script');?>

純正ボタンを設置しつつスクリプトをまとめてページの読み込みを高速化する為の、より詳しい方法については別の記事:「高速化したいなら、SNSスクリプトをまとめて設置!計測もしてみた」にまとめましたので、そちらをご覧ください。

ここでは、Facebook、Twitter、Google+、はてなブックマーク、のそれぞれのソーシャルボタンのタグの取得方法、加えて、インスタグラム、Klout、のアカウントへのリンクボタンについてまとめています。

ボタンタグの設置位置について

「ボタンを設置する場所」は、テーマによって、最適な場所が違うので一概には言えませんが、contet.phpか、single.phpになると思います。

ダイレクトに設置場所を特定するには、Chromeで投稿記事などを表示させ、設置したい場所を右クリックし、開発者モードで設置場所のタグをつぶさに見ることです。

開発者モードでタグを見るには、ボタンを設置したい場所で右クリックし、ショートカットメニューから、要素を検証をクリックします。

たとえばタイトル下にボタンを設置したい場合は、タイトル下で右クリックします。
ボタンを設置したいところで右リック

開発者モードでタグを確認

ブラウザ下部に開発者モードのウィンドウが開くので、設置したい場所の、周辺タグを確認します。

タグをポイントすると、そのタグが表示させている要素がブラウザ上で反転表示されます。

この場合は、ポイントしているタイトルを表示させているタグのすぐ下のタグが、<!– .entry-header –>となっていますので、このタグ下にボタンコードを貼れば良いということがわかります。

ボタン設置場所を確定する

記事直下の場合は、TwentyTwelve以降の公式テーマの場合、contet.phpの

</div>


<!-- .entry-content -->

の前に設定すると、記事直下に表示させることができます。

content.phpで、投稿記事にだけ表示させたいのであれば、条件分岐phpタグを使用し、

<?php if(is_single()): ?>
ボタンコード
<?php endif; ?>

とすれば、OKです。
※上記条件分岐タグは、single.phpの場合は必要ありません。
※開発者モードのウィンドウを閉じるときはウィンドウ右上隅のXをクリックします。

ボタンをきれいに並べるためのタグのスタイルとCSS

ボタンを横一列に並べるには、ボタンタグにCSSを効かせます。

そのためにはまず以下のようにボタンタグを箇条書きスタイルにし



<ul class="social-buttons">


<li>Facebookボタンタグ</li>



<li>Twitterボタンタグ</li>



<li>Google+ボタンタグ</li>



<li>はてなボタンタグ</li>


</ul>


以下のようなcssをスタイルシートに追記して、横並びになるようにします。

ul.social-buttons {
    list-style-type: none;
}

ul.social-buttons li {
    float: left;
    margin: 0px 10px 15px 0;
    padding: 0px;
    height: 20px;
}
.fb_iframe_widget span {
    vertical-align: baseline !important;
}

上のcssはそのまま使えると思いますが、ボタンのタイプや、テーマのCSSによっても細かい設定が変わると思いますので、ul.social-buttons li の中の margin 等の値を調整して下さい。

※margin は ボタンの余白サイズで、数値は左から順にボタンの上、右、下、左 です。

また、fb_iframe でfacebookボタンが下にずれないようにしています。

では、早速、ボタンコードを取得していきましょう。

Facebookのいいね!ボタン

Facebookにログインしている状態で、下記URLを開きます。

https://developers.facebook.com/docs/plugins/like-button

Facebook-like-button

  1. URL to Likeの欄にURLを一応入力します。
    一応、というのは、WordPressの場合は、後でURLの部分をphpタグに書き換える必要があるためです。
    入力されていないと、プレビューでボタンの確認が出来ない為、サイトのURLを入力してください。
  2. プレビューでボタンを確認しながら、Layout、Action Type、などの設定項目を選びます。
  3. ボタンの設定が出来たら、Get Codeボタンをクリックします。

FEB0103

  1. アプリケーションIDを取得している場合は、appIDが設置するWEBサイトのものかどうかを確認し、違う場合は選択してなおします。
  2. スクリプトタグとボタンタグをそれぞれコピペします。
  3. ボタンタグのURLが、
data-href="http://example.com"

となっているところを、

data-href="<?php the_permalink(); ?>"

に変更して完了です。

Twitterのシェア/フォロー/ハッシュタグ/サポートボタン

ログインしている状態で、下のURLページへ。

https://about.twitter.com/resources/buttons

  1. 使いたいボタンの〇をクリックして選択し、
  2. 表示されるオプションを選ぶ。
  3. ボタンのコードを完成させ、
  4. コードをコピーします。
ソーシャルボタンの設置-Twitter
フォローボタンを英語で作成した場合

一番ニーズがあるのはシェアボタンだと思いますが以下のようにオプションを指定して、ボタンコードをクリック、コピーします。
ツイッターツイートボタンタグの取得

コピーしたタグをいったんテキストソフトなどに貼り付けてみます。
タグを見ると、ボタンを構成するタグとスクリプトを構成するタグとに分かれているのがわかります。
Twitterボタンタグ

ボタンタグをボタンを設置したい場所に、スクリプトを適切な場所にそれぞれ別々に改めて貼り付けますが、

ボタンタグはURLとタイトルを書き直して以下のように修正します。
※下のタグをコピペする場合はツイッターアカウントを変更して下さい。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="@ツイッターアカウント" data-lang="ja">ツイート</a>

自分でツイートボタンをクリックしてシェア、または他の人にツイートボタンをクリックしてシェアしてもらう際に、自動で投稿につけたタグを「#:ハッシュタグ」としてツイートにつけたい、という場合には、次の記事を参考にしてみて下さい。
投稿タグをハッシュタグに!TwitterボタンをWPタグでカスタム

Google+のボタン

Google+は下の+1ボタンのページからコードを取得します。

+1 Button ページhttps://developers.google.com/+/web/+1button/?hl=ja#top_of_page

下のように設定します。
Google+・+1ボタンコード取得ページ
※「ダイナミック」について
バッジ、ボタン共に、非同期で読み込むオプションを使用すると、ページの読み込みの高速化につながります。
Google+バッジ、+1ボタンを非同期にするオプション
詳細については、「Google+バッジの非同期読み込み対応スクリプトを生成するには」に書きましたので、参考になさってください<(_ _)>

さて、自動的に生成されるコードをテキストファイルにコピぺします。
ボタンタグと、スクリプトタグは以下のようになっています。
Google+・+1ボタンコード

それぞれを貼り付けたい場所にコピペします。

はてなブックマークボタン

以下のはてなブックマークのボタンタグ取得ページを開きます。

はてなブックマークのボタンタグ取得ページ

ボタンのタイプを選択し、表示されたタグをコピーします。
はてなブックマークボタンタグの取得

Twitterと同様、はてなもボタンタグとスクリプトが一緒に出てきます。
一度、テキストソフトなどにペーストし、URLとタイトルを変更します。

変更箇所は反転表示させている部分
はてなブックマークボタンタグテキスト

変更後のタグ
URLとタイトルを変更後のはてなブックマークボタンタグテキスト

はじめの<script>以下は全てスクリプトですので、ボタンタグは他のボタンタグと一緒にボタンを表示させたいところへコピペ、スクリプトはスクリプトでまとめればOKです。

ボタンタグ

<a href="<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="<?php the_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>

インスタグラムの場合

インスタグラムは他のボタンと少々異なり、シェアするためのボタンでなく、自分のアカウントへのリンクボタンです。

下記URLを開きます。

http://instagram.com/accounts/badges/

インスタグラムのバッジ

  1.  好きなサイズのアイコンをクリックして選択します。
  2. サイズを選択すると、コードが表示されますので、コピーします。
  3. コピーしたコードをサイトの好きな場所に貼り付ければ完了です。

※CSSがわかる方は、コードをご覧になればわかると思いますが、コード前半の<style>~</style>はCSSです。


<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-24 { width: 24px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; } }</style>


<a href="http://instagram.com/XXXXXXXX?ref=badge" class="ig-b- ig-b-24"><img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" /></a>

ボタンの場所でなく、子テーマのスタイルシートに<style>~</style>内の記述を切り取り→貼り付けした方がボタンコードもすっきりし、読み込み速度にも寄与します。

Kloutの場合

設置したい場所に以下のコードをペースト

<iframe style="border: 0;" src="http://widgets.klout.com/badge/ユーザーネーム" height="98" width="200" frameborder="0" scrolling="no"></iframe>

「ユーザーネーム」の部分をご自分のユーザーネームに変更して、完了です・・
と言いたいところなのですが、テーマや、他のリンク素材によっては、スクリプトが競合するのか、表示がうまくいかない、または、サイト自体がぐたぐたになる場合もありますのでご注意下さい^^;

では、今日はこの辺で。

お役に立ちましたら、シェアなどしていただけるとハッピーです。

Published:2014/02/02

Written by