ソーシャルボタンの設置方法

ソーシャルボタンというのは、はてなブックマーク、ツイッター、Google、facebook等、ソーシャルアプリと連携するためのボタンのことです。

zenbackを入れれば面倒な作業もなくボタンを設置できる上に、関連項目まで表示してくれますが、zenbackの導入自体はどういうサイトでも問題ないのですが、関連項目の表示をONにするためには、RSSフィードを提供しているサイトでなければならないという縛りがあります。レンタルブログはわかりませんが、WordpressはRSSにチェックをするだけでRSSフィードを生成、提供できます。

一般サイトはRSSを自分で導入しなければならず、めんどうなのでソーシャルボタン設置のためだけにzenbackをいれるのであれば、自力で1個1個設置するのがいいと思います。

ツイートボタン設置方法

ツイートボタン

ツイートボタンは上記リンクにて、

  • URLを共有：ツイート対象サイトのURL
  • ツイート内テキスト：ツイート対象サイトの題名
  • ユーザー名＝アカウント名を入力
  • 言語を選択

を入力後、生成されるコードを好きな場所に貼り付けるだけです。なお、<script></script>の部分はhead内に移動させるよいと思います。（画像をjsで生成しているようだから）

この方法だけだと、のようなボックス型のボタンが作れません。

そこで、スクリプトをいじってボックス型に対応させて見ましょう。 

<!-- HTML -->
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="記事URI"
data-text="記事タイトル（挿入するテキストなど）"
data-via="Twitterアカウント名"
data-count="horizontal"　<!--ここをhorizontalからverticalへ変える-->
data-lang="ja>Tweet</a>

Wordpressでツイートボタンを設置する場合は、 

記事URL：<?php the_permalink(); ?>
記事題名：<?php the_title(); ?>
固定ページ：各ページごとに手打ち

ちなみに、よくスクロールバーのところにへばりついて移動するfollow meボタンは、以下URLからコードを入手できます。

Follow Meボタン（標準）
ツイッターボタン

twitter accountは、ユーザー名を入れます。あとは色とか選んで、コードを作って、htmlの<body>直前に貼りつけて終了です。

はてなブックマーク設置方法

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

はてなブックマークボタンは上記リンクにて、

  • タイトルと書いてある場所：記事の題名
  • アドレスと書いてある場所：記事のURL（https://～）
  • <script></script>はhead内に記入でもOK

を入力後、生成されるコードをscriptをscript部分はhead内、aリンク部分は設置したい箇所に貼り付けて終了。

Wordpressではてなボタンを設置する場合は、 

記事URL：<?php the_permalink(); ?>
記事題名：<?php the_title(); ?>
固定ページ：各ページごとに手打ち

はてなブックマークには、他にもはてなブックマークブログパーツというのがあるので、これも設置できれば設置しときましょう。

はてなブックマークブログパーツ

Facebook（いいね）ボタン設置方法

Facebook（いいね）ボタン

facebook（いいね）ボタンは上記リンクにて、URL（PHPタグを先に入れるとエラーになるため、Wordpressの場合は最初適当に入れる）を入れてgetcodeを押せばコードが取得できる。

取得コードは、HTML5のサイトならHTML5のコード、その他HTML4.01やXHTML1.0のサイトならiframe（できなくなったかも？）を選択する。

ここで、もしアプリIDがなければ取得できないとか言われたら、facebook開発者にてappIDを取得します。

サイトに飛ぶと、appdisplaynameとappnamespaceという欄があるので、適当に英字で入力する。appdisplaynameはアプリ自体の名前なのかな？valid（正当）とでたら何でもOK。appnamespaceはアプリページかなにかかな、available（利用できる）とでればOKだ。URLとサイト名とかでもいいと思う。これでアプリIDを取得できる。

コードの設置場所は、スクリプト部分は<body>のすぐ後がよい（公式より）らしい。ボタンは設置したい場所に記述する。あと、コードで「js = d.createElement(s); js.id = id; js.async = true;」の行に「js.async=true;」という記述を足すと、ブラウザが非同期で読み込んでくれるためサイトの表示が少し早くなるとのこと。

wordpressで記事ごとに使用するなら、最初に入力した、URLの部分を：<?php the_permalink(); ?>に書き換えましょう。（<iframe src=”//www.facebook.com/plugins/like.php?href=<?php the_permaLink(); ?>&send=false・・・略・・・>）

さらに下に移動し、Get Open Graph Tagsで、（これはページと連動させない人には不要なこと）

  • title：記事の題名
  • type：サイト全体はblog、websiteだが、各ページはarticle
  • URL：記事のURL
  • image：記事の画像
  • sitename：サイトの名前
  • appID：アプリのID

を入れて、コード（メタタグ）を生成し、そのコードを、htmlの<head></head>内にコピーして終わり。Wordpressの記事ごとに使うなら、記事titleを：<?php the_title(); ?>に、記事urlを：<?php the_permaLink(); ?>に変更する。

Open Graphタグをwebページに含めることで、あなたのページはFacebook Pageと 同等の物になります。つまり、ユーザがページ上のLikeボタンを押すと、ページとユーザの間にconnectionが作られます。（Facebookヘルプより）

メタタグをwebページに追加すると、そのページと連携するLikeボタンを置けるようになります。パーツテンプレートでheaderを別にして、固定ページで記事を沢山書いていると、header.phpにページの数だけmeta urlを書かなければならずかなり大変です。ボタンを付ける前に色々と考えておかないと失敗しますね。

Google＋１ボタン設置方法

Google＋１ボタン

Google＋１ボタンは上記リンクにて、コードを入手する。

以外に忘れがちなのが、詳細オプション→＋１ボタンの対象とするURLを入力せずにコードを生成すること。隠れているので表示させてURL入れときましょう。

ソーシャルボタンを横並びにする

以下参考例です。リストタグを使うのが標準。scriptタグはhead内に移しています。 

<ul id="botan" class="clearfix">
<li><div class="fb-like" data-href="https://kanri.nkdesk.com/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div></li>
<li><a href="https://b.hatena.ne.jp/entry/https://kanri.nkdesk.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="管理薬剤師.com" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
<li><div class="g-plusone" data-size="tall" data-href="https://kanri.nkdesk.com/"></div></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="https://kanri.nkdesk.com/" data-text="管理薬剤師.com" data-count="vertical" data-via="naokaju" data-lang="ja">ツイート</a></li>
</ul>

CSSはfloatで横並びに。widthの数値は調節してください。clearfixの記述は省略しています。 

ul#botan {
	width:400px;
	}
ul#botan li {
	float:left;
	list-style-type:none;
	}

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ