socialbuttons

WordPressブログにソーシャルボタン設置

| 0件のコメント

ブログにはお決まりのソーシャルボタン。設置してみました。
この記事のタイトルの下に表示されているソーシャルボタンたちです。

設置した際のフローを簡単に説明したいと思います。
いろいろな方法があると思いますが、下記の方法だと3ステップで簡単に埋め込めます。

  1. 各ソーシャルボタンのソースコードを外部ファイル化。
  2. 外部ファイルを各ページのテンプレート内で読み込む。
  3. スクリプトファイルをhead/body要素内に読み込む。

1. 各ソーシャルボタンのソースコードを外部ファイル化

まず、下記の設置方法にある各ボタンのソースは外部ファイル化します。

Facebookのいいね!ボタン

下記のリンクから作成できます。URLを入力し、Send Buttonのチェックを外し、Layout Styleは「button_count」(いいね!+いいね数)、widthは120を指定します。幅は狭すぎるといいね数が表示された時に見切れてしまうので、120前後くらいがよいかと思われます。iframe要素のsrc属性のhrefパラメータをパーマリンクに変更します。

参照:Like Button – Facebook開発者

▼tmp_facebook_button.php
<iframe src="//www.facebook.com/plugins/like.php?app_id=257145814325196&amp;href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=120&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:120px; height:21px;" allowTransparency="true"></iframe>

Twitterのツイートボタン

下記のリンクから作成できます。ツイートボタンは、「垂直方向にカウント数を表示」、「水平方向にカウント数を表示」、「カウント数の表示なし」の3タイプあります。ここではカウント数の表示なしを選択しました。a要素のdata_url属性をパーマリンク、data-text属性を「記事タイトル|ブログ名」に変更します。

参照:Twitter / ツイートボタン

▼tmp_twitter_button.php
<a href="https://twitter.com/share" data-text="<?php the_title(); ?> | <?php bloginfo('name'); ?>" data-url="<?php the_permalink(); ?>" data-count="none" data-via="cocoism" data-lang="en">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

mixiチェックボタン+イイネ!ボタン

利用するには、mixi Developer Centerへの個人パートナー登録登録が必要です。

個人パートナー登録後、mixi Develope Centerにログインし、mixi Pluginタブのところから、新規サービスを追加します。サービスを使用するサイト、ブログなら、ブログ名、ブログのURL、許可するドメイン(ブログのドメイン部分)等を指定して、サービスを登録します。サービスの登録が完了すると、サービスの識別キーが発行されます。

mixiチェックボタンの場合は、a要素のdata-key属性に識別キー、data-url属性にパーマリンクを指定します。mixiのイイネ!ボタンの場合は、iframeのsrc属性のservice_keyパラメータに識別キー、hrefパラメータにパーマリンクを指定します。

参照:mixiチェックボタンの設置方法イイネ!ボタンの設置方法

▼tmp_mixi_check.php
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-button="button-1" data-url="<?php the_permalink(); ?>" data-key="識別キー>Check</a>

▼tmp_mixi_favorite.php
<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:60px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=<?php the_permalink(); ?>&service_key=識別キー&show_faces=false&width=60"></iframe>

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

下記のリンクから作成できます。スタンダードボタン(B!+ブクマ数)、バーティカルボタン(B!+ブクマ数)、シンプルボタン(B!のみ)の3タイプありますが、ここではシンプルボタンを選択しました。a要素のhref属性の/entry/以降をパーマリンクに、data-hatena-bookmark-title属性を「記事タイトル|ブログ名」に変更します。

参照:はてなブックマークボタンの作成・設置について

▼tmp_hatena_button.php
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?> | <?php bloginfo('name'); ?>" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>


2. 外部ファイルを各ページのテンプレート内で読み込む

次に、これらの外部化したファイルを、ソーシャルボタンを表示したいページにインクルードタグを使用して読み込みます。

▼content.phpやcontent-single.phpなど必要に応じて
<ul>
<li><?php include( TEMPLATEPATH . '/tmp_hatena_button.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_mixi_check.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_mixi_favorite.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_twitter_button.php' ); ?></li>
<li><?php include( TEMPLATEPATH . '/tmp_facebook_likebutton.php' ); ?></li>
</ul>


3. スクリプトファイルをhead/body要素内に読み込む。

上記のボタンの場合は、ツイートボタン、はてなブックマークボタンとmixiチェックボタンのみ外部JavaScriptファイルの読み込みが必要になります。

ツイートボタン用、はてなブックマークボタン用に下記のscriptタグをhead要素に記述します。
<head>
・・・
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
・・・
</head>

mixiチェックボタン用に下記のscriptタグをbody要素の終了タグ直前に記述します。
※head要素内に指定するとうまく動作しませんでした。タグを記述した後に指定しないとダメみたい。

・・・
<script src="http://static.mixi.jp/js/share.js" type="text/javascript"></script>
</body>
</html>

以上で、設置完了です!