自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

SNSビッグ3のボタンをブログに置こう

ブログをより多くの人に読んでもらうには、読んでくれた方が「面白い」と感じたときに手軽にソーシャルネットワークサービス(以下SNS)にお知らせできるよう「ボタン」を設置したいもの。


各種無料ブログにもソーシャルプラグインは用意されていますが、各社とも置きたいSNSがなかったり、また置きたくないSNSがあったりしませんか?簡単ですので、以下のSNSビッグ3の設置をしてみましょう。

  • twitter
  • facebook
  • Google+

[広告]

まず各種ブログによって場所は異なると思いますが、ブログページのHTMLを編集する画面に書き込みます。

例えば、SoyCMSブログは、「テンプレート」がそれに当たります。Soyブログのテンプレートは「トップ」「アーカイブ」「記事毎」にHTMLを書きかえる必要がありますが、今回SNSボタンを置きたいのは記事毎ページだけなので、「記事毎」をクリックしましょう。

Soyの画面


フリーブログからは動作が軽くカスタマイズも簡単でお世話になっているFC2ブログを例に出します。

「テンプレートの設定」をクリックすると、HTML編集画面になります。

FC2の画面


なお、どのHTMLを編集するにしても、記号ひとつ欠けたらレイアウトが崩れてしまいますので、必ず全コピーをしてメモ帳などのテキストエディタで保存しておきましょう。それでは、それぞれのSNSごとに設置してみます。


twitterボタン

URL: https://about.twitter.com/ja/resources/buttons#tweet

上記URLにアクセスした時に、英文で表示されるかもしれません。その時は1のドロップダウンリストから「日本語▼」を選択すれば日本語で表示されます。


では見てみましょう。まず2のようにtwitterボタンはその役割に応じて4種類用意されています。左の「リンクを共有する」ボタンが一般的です。そこから下は、twitterのツイートボックスに、ボタンをクリックしたとき何を自動表示させるかを設定していきます。

Twitterボタン設定

3、4に関してはデフォルトの設定でよいと思います。5で「Japanese-日本語」を選びます。最後に6に表示されるHTMLを、ボタンを表示したい場所にコピー&ペーストします。


A・B・Cはこだわりたい方にはいい機能です。

Aにチェックを入れると、このボタンを通して何ツイートされたかを表示します。

Bの欄にあなたのtwitterアカウントを入れれば、それが自動表示されます。ただ、メンションを「通知する」に設定にしている場合、夜中にスマートフォンが鳴り出しますので、わたしはお勧めしません。

Cにチェックを入れると、ボタンが大きくなります。お好みでどうぞ。


facebookボタン

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


facebookは非常にたくさんのプラグインが用意されていますが、一般的にブログの記事についているボタンは「いいね!」でしょう。これは「Like Button」と呼ばれます。

ページは英語ですが簡単なのでやってみましょう。1にはブログホームのURLを入力します。2はボタンのデザインです。ドロップダウンリストで4種類から選べます。どれがいいかひとつひとつ確認してみましょう。ちなみにここでは一番下の「button」を選択しています。3にチェックを入れると「いいね!」した人のアイコンが表示されますが、スマートではないのでチェックは外しました。

4が注意です。ここにチェックを入れておくと「いいね!」ボタンと「シェア」ボタンが両方生成されます。「いいね!」ボタンだけ欲しいのでチェックは外しました。

facebookライクボタン

ここまで出来たら5の「Get Code」をクリックします。するとポップアップでHTMLが表示されます。サイトをHTML5で組んでいる方はHTML5で案内されたHTMLをコピー&ペーストしましょう。このサイトもHTML5で組んでいるので、そのコードを貼りました。それ以外の方はIFRAMEでいいと思います。

サイトに表示されましたか?何度でも生成できるので、いろいろ試してみるといいと思います。


2014/11月追記:

「いいね」を上記1のURLに対してではなく、例えばブログ記事それぞれに対してに設定したい場合は、生成されたコードの一部を下記のように変更します。

<div class="fb-like" expr:data-href="data:post.url" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

Google+ボタン

URL: https://developers.google.com/+/web/+1button/?hl=ja

一般のフリーブログでは、このGoogle+1ボタンがまだ搭載されていないことが多いです。なんとなくありがたいGoogleのSNSですから、お守りに付けておきましょう!


1ではサイズを4サイズから選ぶことが出来ます。ちなみに、twitterのLikeボタンと同サイズになるのは「medium」です。2はドロップダウンリストから、このボタンを介して投稿された数を表示するかどうかが選べます。3は「日本語」を選択しましょう。

Google+1ボタン

4のHTMLを指示に従ってコピー&ペーストします。


2014/11月追記:

利便性を考え「共有ボタン」に変更しました。

設定の仕方やホームページへの設置方法は、上記「+ボタン」と同じです!


「+ボタン」がFacebook「いいねボタン」と同じ役割なのに対して、「共有ボタン」はFacebook「シェアボタン」と同じ役割を持ちます。


わたしのブログでは、エントリー下部にある日付の上にこの3ボタンを配置してみました。

→2014/11 Facebookはシェアボタン、G+は共有ボタンに変更しました。

ソーシャルボタン

HTML編集に書き加えたのは、

</head>直前にGoogle+の<script>~</script>

<body>直後にfacebookの<div id="fb-root"></div><script>~</script>

この位置は、それぞれのSNSの指定に従っています。


あとは生成されたボタンコードを置きたい場所、わたしならば日付タグの直前に配置します。

以下青文字は、生成されたボタンコードのほかにレイアウトのために書き加えたHTMLです。

<div class="social_btn">
  <div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="none">ツイート</a>
    <script>// <![CDATA[
!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>
  </div>
  <div>
    <div class="fb-share-button" data-layout="button"></div>
  </div>
  <div>
    <div class="g-plus" data-action="share" data-annotation="none"></div>
  </div>
</div>

と、大枠をdivで大きく括り、さらにボタンひとつずつをdivで括り、3ボタンを続けて置きます。


以下は施したCSSです。

.social_btn{text-align:right;}

.social_btn > div{display: inline-block;}

/*3つのボタンのY軸位置がガタガタするときはさらに*/

.social_btn{vertical-align:top;}

[広告]

SoyCMSでコピーライトを変更する ブログTOP レスポンシブでの画像やボタンについて
Hotentry
Blog Post
Archives
クリックして上に戻る