BMW E46 328Ci ブログ

今更ですが、freoのエントリー記事にGoogle+ボタンを追加してみました。

こちらのサイトで、簡単にGoogle+ボタンの作成が簡単に行えます。

freoシステムを構成するディレクトリーツリーのtempleateのheader.htmlに、Google+ボタン作成で表示されたコードのスクリプト部分を埋め込みます。

<!-- google + -->
{literal}
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>
{/literal}

<header>〜</header>の間ならば、どこでもかまいません。

<script>〜</script>なので、{literal}〜{/literal}で囲みます。

そしてボタンとして追記する部分には、

<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" data-href="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}"></div>

と記載して、freoの記事エントリー番号のURLが組み込まれるようにします。

追記箇所は、templeateのinternalのview、defaultの各フォルダにあるdefault.htmlへ機能追加を行いたい表示テンプレートファイルが対象となります。

 

続いて「はてなのブックマーク」ボタンの追加です。

こちらにインターフェイス形式を選択してボタンを選べるサイトがありますので、表示されたスクリプトをコピーしてきます。

<script>〜</scirpt>部分は、同じように{literal}〜{/literal}で囲みます。

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
{literal}<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>{/literal}

「はてなのブックマーク」ボタンは複数回表示する場合（templete/internal/default/default.htmlなど）は、{literal}〜{/literal}で囲んだ<script>〜</scirpt>部分は一度のみの記載でOKとの事です。

ですが、「はてなのブックマーク」ボタンはURLとタイトルをjavascriptで自動取得してブックマーク情報として収集するので、freoのviewページのみが対象となるのかな？

うまい具合に制御すればOKだと思いますけど、templete/internal/view/default.htmlへの追加ならば簡単かと思います。

その他、おまけで「Pocket」ボタンの追加はこちらでボタン形式を選択後、同じようにボタン追加ができます。

 

以上、「ブログにGoogle+、はてなのブックマークボタンを追加」でした。