ソーシャルボタンをプラグインを使わず自前で追加する方法

≪≪この記事をすべて読むには約 15 分かかります≫≫

てく2テック（当サイト）で使わせて頂いているWordPressテーマのSimplicityは配布されている段階ですでにソーシャルボタンが配置できるようになっています。

が、テーマによっては配置されていないテーマもあります。プラグインに頼れば良いのですが、WordPress以外の場合は自分で設置しないといけないこともあるので、記録に残しておきます。

ソーシャルボタンのAPI
1. タイトルの取得
2. URLの取得
Twitter
Facebook
Google+
はてなブックマーク
他のソーシャルボタン
シェアされる内容をリッチに

ソーシャルボタンのAPI

代表的なソーシャルボタンといえば、ツイッター、フェイスブックですが、GoogleもGoogleプラスで参入してきたり、他にもたくさんあります。

Pinterest
Linkedin
はてなブックマーク
Reddit
GetPocket
Evernote
Pinboard

日本では、はてなブックマークをつけているブログサイトが多いです。

海外のプラグインの中には、数十個のソーシャルシェアボタンをモーダルボックス（クリックすると開くウィンドウ）でシェアするソーシャルサービスを選ぶようなものもあったりします。

ほとんどのボタンは先行するTwitterやFacebookのボタンと並べて置けるようなモノになっていて、シェアされるために必要な情報も大体同じです。

私が使っているソーシャルボタンを中心に、必要なコードを書いておきます。PHPを使える箇所に設置しています。

（探しまわった結果、無料のJoomla用ソーシャルボタンプラグインに良い物がなく、自分で設置しています）

なお、Joomlaで使っているのでJoomla用のコードになっています。

タイトルの取得

ページタイトルはテンプレート内では変数をとして定義されています（大抵は$this->title）が、モジュール内やプラグイン内で書いたり、Sourcererプラグインで記事内などに設置したスクリプト内ではタイトルが設定されていません。メタタグを使う方法は、動くはずだと思うのですが、プラグイン実行順やその他の要因で取得できません。

$doc = JFactory::getDocument();
//$title = $doc->getMetaData( “title” );
$title = $doc->getTitle();

なお、公式ドキュメントその他ではJFactoryの関数を呼び出すとき、

$doc &= JFactory::getDocument();

としていますが、少なくともJoomla 3.4以降ではこのコードでは動かず、「＆」を除く必要があります。

URLの取得

冗長な方法を使えば、

<?php
$url = empty($_SERVER["HTTPS"]) ? "http://" : "https://") 
    .$_SERVER['HTTP_HOST']
    .$_SERVER['REQUEST_URI']);
 ?>

です。これでプロトコール部分（HTTP://とHTTPS://）を含めて現在のページURLを取得出来ます。

が、私はこの方法ではなく普段ハードコーディングしたURLを使っています。

<?php
$url = 'https://tek2tech.com'
    .$_SERVER['REQUEST_URI']);
 ?>

サイトのホスト名（tek2tech.com）部分までハードコーディングする必要はありませんが、プロトコール部分を指定しておかないとどちらのプロトコールでも表示できる仕様になっている場合にシェアが分散する事になってしまいます。

.htaccessでプロトコールを強制している場合を除いて、ハードコーディングしておいたほうが良いと思います。HTTPとHTTPSどちらでもアクセスできるサイトを運営している場合には、今どうなっているのか見ておくと良いかもしれません。

（カノニカルURLに関しても同じで、http://とhttps://両方をcanonical指定できるようになっているプラグインを使うとマズイ状況に陥ります。）

Twitter

<a href="https://twitter.com/share" class="twitter-share-button" data-url=<?php echo $url; ?> data-text=<?php echo $title; ?> data-via="ユーザー名" data-lang="en" data-size="small" data-related="ユーザー名" data-hashtags="ハッシュタグ" data-count="vertical">Tweet</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>

ユーザー名は、Twitterで@～さんからと書かれるユーザー名で、＠を除いた部分です。

ハッシュタグも同じで、シャープ（＃）を除いた部分です。半角カンマ（，）で区切ると複数指定出来ます。ページごとに必須キーワードから指定しても良いと思いますが、多かったり長いと文字数制限に引っかかります。

Facebook

Like（いいね！）

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"
 data-href="<?php echo $url; ?>"
 data-layout="box_count"
 data-action="like"
 data-show-faces="false"
 data-share="0"></div>

data-layoutを変えるとボタンのレイアウトがかわり、data-actionをrecommendにすると下の「おすすめ」に変わります。

show-facesをtrueにすると、ユーザーの顔アイコンが出るようです。data-shareをtrueにするるとシェアボタンが表示されます。（AppIDを設定していれば）

タイトルは自動で取得されます。

Recommend（おすすめ）

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" 
data-href=<?php echo $url; ?> 
data-share="0"
data-layout="box_count"
data-width="90"
data-show-faces="false" 
data-colorscheme="light"
data-action="recommend"></div>

ほとんどLikeボタンと同じです。

Share（シェア）

シェアボタンも設置方法は基本的には同じで、data-share=”true”に設定すれば表示されます。ただし、シェアボタンを表示させるためには、Facebookへのユーザー登録とFacebookアプリの登録が必要になります。

なのですが、何も設定していなくても data-share=”true”にしたら表示はされました。シェアしてみたらどうなるかはまだわかりません。

Google+

<div class="g-plusone" data-size="tall"></div>
<script>(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>

Googleプラスは設置が簡単でURLもタイトルも必要ありません。

はてなブックマーク

<a href ="http://b.hatena.ne.jp/entry/<?php echo $url ?>"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title=<?php echo $title; ?>
  data-hatena-bookmark-layout="vertical-balloon"
  data-hatena-bookmark-lang="ja"
  title="このエントリーをはてなブックマークに追加"
  rel="nofollow">
<img src="https://b.st-hatena.com/images/entry-button/[email protected]" 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>

これまでに出てきたソーシャルボタンと比べるとHTMLっぽいコードになっていますが、なんでもJavascriptに丸投げするよりは、こちらのほうが好みではあります。