Webサイトにソーシャルボタンを追加する

Webサイトにソーシャルメディアと連携するためのソーシャルボタンを設置するための手順に関して説明しています。
弊社が利用しているMagnolia CMS における実現方法も示します。

はじめに

Facebook、Twitter をはじめとするソーシャルメディアとWebサイトの連携は既に当たり前!

といいつつ、弊社Webサイトはリニューアル直後はソーシャル連携はできていなかったのですが、ある程度形になってきたので、設定方法に関して記しておきます。

弊社が利用している Magnolia CMS に特化した部分もありますが、HTML の記述方法に関しては他のプラットフォームでも流用できると思います。

ソーシャルボタンを設置するために必要な記述

連携するソーシャルメディアを決める

当然ですね。弊社Webサイトでは、以下のソーシャルボタンを用意する事にしました。

  • Facebook
  • Twitter
  • はてな
  • Goolgle+
  • LINE
  • Pocket

※2014/06/06 LINE 追加。但し LINE のボタンは PC では表示されないので、確認はスマートフォンでどうぞ

※2014/10/02 Pocket 追加。

※2015/07/31 LINE の設置方法を変更

コードを取得する

ソーシャルボタンを設置するために必要なコードは各ソーシャルメディアにて公開されています。
これらコードを取得します。

ソーシャルメディアページ
Facebook Like Button
日本語による説明ページ : 「いいね!」ボタンを設置しよう
TwitterTwitter Buttons
はてなはてなブックマークボタンの作成・設置について
Google++1 ボタン - Google+ Platform
LINE設置方法|LINEで送るボタン
PocketPocket for Publishers: Pocket Button

コードの記述

上記ページでコードを取得して、HTMLに記載するコードを記述します。
弊社では以下のような記述にしました。

※太字部分 ${state.originalBrowserURL} にはソーシャルボタンを設置するページの実際のURLを記載します。
Magnolia CMS においてはテンプレート中で ${state.originalBrowserURL} を記載する事で、表示中のページURLを取得する事ができます。

※ボタンの見え方等は色々設定できます。上記ソーシャルメディア毎のリンクから色々設定できるので、お好みに応じてカスタマイズしましょう。
以下コードは弊社Webサイトで採用しているコード ( 一例 ) になります。

ボタンを表示する部分に記述するコード

<!-- Social Buttons -->
<div class="socialButtons">
<ul>
<!-- facebook -->
<li>
  <div class="fb-like" data-href="${state.originalBrowserURL}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
<!-- twitter -->
<li>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="${state.originalBrowserURL}">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.charset="UTF-8";js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<!-- はてな -->
<li>
  <a href="http://b.hatena.ne.jp/entry/${state.originalBrowserURL}&quot; class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://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="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<!-- google -->
<li>
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><div class="g-plusone" data-size="medium" data-href="${state.originalBrowserURL}"></div>
</li>
<!-- Pocket -->
<li>
  <a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
  <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>
<!-- LINE -->
<li>
  <script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
  <script type="text/javascript">
  new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
  </script>
</li>
</ul>
</div>

LINEボタンを表示するコード(改訂版)

LINEで送るボタンに関しては、以下記述に変更しました。
いつからかは判らないのですが、Androidの標準ブラウザで確認したところ、ボタンがサイト最下部に張り付いて表示される状態になってしまったため。

※この方法を利用する場合、記事タイトル、及び、記事のURLはURLエンコードする必要があります。

※PCサイトでは表示されないように、PC用のスタイルシートでは lineButton クラスは非表示にする等しましょう。

設置方法 | LINEで送るボタン にある http://line.me/R/msg/text/?... 形式の記述も試したのですが、私のAndroidでは "ご利用のバージョンでは対応していないか不正なURLです" となってしまい、LINEと連携できませんでした。

<li class="lineButton">
  <a href="line://msg/text/<記事タイトル>%20<記事のURL>">
  <img src="<LINEで送るボタンの画像URL>" alt="LINEで送る" style="border:none;width:20px">
  </a>
</li>

Magnoliaで設定する場合は以下のようになります。
?url とする事でURLエンコードされます。

<li class="lineButton">
  <a href="line://msg/text/${content.title?url}%20${state.originalBrowserURL?url}">
  <img src="/dam/agilegroup/img/logos/linebutton_20x20.png" alt="LINEで送る" style="border:none;width:20px">
  </a>
</li>

Facebook に関しては、上記コードとは別にページ中で一度だけ記載する必要があるコードがあります。
※上記 Facebook の Like Button ページでコードを取得した際に、Bodyの開始タグの直後に記述するように説明 ( Include the JavaScript SDK on your page once, ideally right after the opening <body> tag. ) されています。

BODYの開始タグ直後に記述するコード

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

コードを書く

記述するべきコードが確定したら、上記コードがHTML中に出力されるようにコードを記述します。

bodyの開始タグ直後と、ボタンを表示させたい箇所にコードを記述します。

Magnolia CMS の場合

Magnolia CMSで実現する場合の方法について以下示します。

ボタンを表示する部分に記述するコード

  1. 管理コンソールから [STK]>[Templates] アイコンをクリックします。
  2. テンプレートの表示ウィンドウが開くので、templating-kit を展開し、/templating-kit/pages/global に移動します。("global" にチェック)
  3. テンプレートを追加します。このテンプレートにボタン表示用のコード ( 上述のもの ) を記述します。
  4. 追加したテンプレートをダブルクリックします。テンプレートの編集用ウィンドウが開くので、コードを記述し、[テンプレートを有効にする] をチェックしてから保存します。
  5. 上記 socialButtons テンプレートはどこからも利用されていない状態なので、このテンプレートが表示されるようにします。
    /templating-kit/pages/global/mainAreaIntro を編集します。
    以下抜粋します。
    ...
    ( 途中略 )
    ...
    [#if (showAuthorDate && (hasDate || hasAuthor || hasLocation)) || showTextFeatures || (showCategories && hasCategories)]
        <div class="text-meta" role="contentinfo">
            [#if showAuthorDate]
                [#if hasDate || hasAuthor || hasLocation]
                    <ul class="text-data">
                        [#if hasDate]
                            <li class="date"><span itemprop="datePublished">${date?date?string.medium}</span></li>
                        [/#if]
                        [#if hasAuthor]
                            <li><span itemprop="author">${author}</span></li>
                        [/#if]
                        [#if hasLocation]
                            <li class="location">${location}</li>
                        [/#if]
                    </ul>
                [/#if]
            [/#if]
    
            [#if showTextFeatures]
                [#include "/templating-kit/pages/content/textFeatures.ftl"]
            [/#if]
    
            [#if showCategories && hasCategories]
                <dl>
                    <dt>${i18n['mainAreaIntro.category.label']}</dt>
                    [#list categories as item]
                        [#-- Macro: Item Assigns --]
                        [@assignItemValues item=item /]
                        <dd><a href="${itemLink}" >${itemDisplayName}</a></dd>
                    [/#list]
                </dl>
            [/#if]
        </div><!-- end text-meta -->
    [/#if]
    [#include "/templating-kit/pages/global/socialButtons.ftl"]
    ...
    ( 途中略 )
    ...
    

    先に作成したsocialButtons テンプレートを include するようにします。
    socialButtonsの表示部分のみのテンプレートを作成しておくことで、他の箇所に記述したい場合でも同様に include する事で対応する事が可能になります。


    保存する際には[テンプレートを有効にする] をチェックします。
    ※既存のテンプレートを変更した場合、[自動更新]はチェックを外しておく事をお勧めします(チェックしてある場合、アップデートした際に自動更新されてしまい、変更した内容が無効になってしまう)。

BODYの開始タグ直後に記述するコード

facebook 用にBODY開始タグ直後に記述するコードを追記します。
/templating-kit/pages/main を編集します。

...
( 途中略 )
...
[#if def.bodyID?has_content]
    [#assign bodyID = 'id="${def.bodyID}"']
[#else]
    [#assign bodyID = '']
[/#if]

<body ${bodyID} ${bodyClass}>

<!-- facebook -->
<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div id="wrapper">
...
( 途中略 )
...

編集したら、[テンプレートを有効にする] をチェックして [変更を保存] ボタンをクリックします。

確認

上記記述が行えたら、実際に表示が正しく行えるかどうか確認します。
編集用と公開用のインスタンスを別で運用している場合、編集用インスタンスで確認してから、公開するという手順を採ります。
編集用と公開用が同一インスタンスである場合、テンプレートを保存した時点でソーシャルボタンが有効になっているはずです。

もし正しく表示が行われないといった問題がある場合、実際に出力されているHTMLソースを確認して問題ないか調べましょう。

Magnolia の場合、socialButtons をinclude したテンプレートを無効にすれば ( [このテンプレートを有効にする] チェックを外す )、ソーシャルボタンを無効化できます。
一旦無効にして、修正後、再度有効にしましょう。

スタイルを編集する

ここまで上手く設定が行えていればソーシャルボタンが表示されているはずです。
後はスタイルを編集して、見た目を調整すれば完成です。

見た目に関しては、『お好きにどうぞ』といいたいところですが、弊社Webサイトでの設定も一応さらしておきます。( 以下のような見た目になります )

ソーシャルボタン
.socialButtons{
}
.socialButtons ul {
  list-style-type:none;
  margin:0 0 0.5em 0;
  float:left;
  border-bottom:1px solid #dedede;
}
.socialButtons li {
  float:left;
  margin:0 10px 0 0;
}
.socialButtons:before,
.socialButtons:after {
  content: " ";
  display: block;
}
.socialButtons:after {
  clear: both;
}
.socialButtons iframe.twitter-share-button {
  width: 90px !important;
}
.fb_iframe_widget * {
  vertical-align: top !important;
}

Magnolia でCSSを編集する場合、利用しているテーマに含まれるcssファイルを編集します。
以下はMagnolia 標準のテーマ"pop"を利用している場合の手順です。

  1. 管理コンソールから [STK]>[リソース] アイコンをクリックします。
  2. ノードツリーを展開し、/templating-kit/themes/pop/css/styles に移動し、styles をダブルクリックします。
  3. 編集用のウィンドウが開くので、上記スタイルを追記します。

Magnolia でテーマをカスタマイズする方法については、 Creating a custom theme - Magnolia 4.5 Documentation を参考にどうぞ。

まとめ

ソーシャルボタン用のコードを記述する事で、Webサイトにソーシャルボタンを追加する事ができます。
静的なHTMLページを作成している場合、ページ毎のURLを記述する必要があるため、設定/管理が大変になる可能性が高いですが、CMS等を利用している場合、テンプレートを適切に修正する事で、一括でソーシャルボタンを追加する事ができます。

弊社Webサイトはまだまだアクセスが少ないため、ソーシャルからの流入は殆どないのが現状ですが、『いいね』ボタンからのアクセスも少しはあります。( もしよかったら記事トップから 『いいね』 お願いします (^^; )

Google Analyticsでソーシャルからの流入も分析可能なので、設定していない場合は設置してみる価値はあるのではないでしょうか。
特にCMSやBlogツールを利用している場合は設置の手間以上のメリットが得られる可能性はあると思います。