【2021年版】freoにSNSシェアボタンを導入・2

【2021年版】freoにSNSシェアボタンを導入・1 の続きです。前回は各SNSの公式シェアボタンのコードの取得方法とオリジナルデザインでSNSシェアボタンを設置するためのコードの紹介をしていました。ここでは国産CMS「freo」にオリジナルデザインのSNSシェアボタンを設置する具体的な書き方について解説します。

オリジナルデザインのSNSシェアボタン用コードのおさらい

スタイルを当てやすくするためにリストでマークアップし、適宜class付けをしています。この辺は個人のお好みで。

<ul class="share">
<li class="toTwitter"><a href="https://twitter.com/intent/tweet?text=シェアしたいテキスト&url=シェアしたいURL" title="ツイッターに投稿" target="_blank" rel="noopener">Twitter</a></li>
<li class="toFacebook"><a href="https://www.facebook.com/sharer/sharer.php?u=シェアしたいURL&t=シェアしたいテキスト" title="フェイスブックに投稿" target="_blank" rel="noopener">Facebook</a></li>
<li class="toHatena"><a href="https://b.hatena.ne.jp/add?mode=confirm&url=シェアしたいURL" title="はてなブックマーク" target="_blank" rel="noopener">Hatena</a></li>
<li class="toLine"><a href="https://social-plugins.line.me/lineit/share?url=シェアしたいURL" title="LINE" target="_blank" rel="noopener">LINE</a></li>
<li class="toPocket"><a href="https://getpocket.com/edit?url=シェアしたいURL&title=シェアしたいテキスト" title="Pocket" target="_blank" rel="noopener">Pocket</a></li>
</ul>

また、各SNSへは別タブで開いてほしいのでtarget="_blank"およびrel="noopener"を付加しています（rel="noopener"については後日書くかも）。この「シェアしたいURL」「シェアしたいテキスト」の部分にfreoの変数を入れます。

編集するテンプレートファイル

template/internals/ディレクトリ内の

default/default.html （サイトトップ及び「エントリー」一覧表示用）
page/default.html （「ページ」表示用）
view/default.html（「エントリー」単体表示用）

他はあんまりSNSで共有してほしい場合が少ないかなと思うのでとりあえず上記3つ、「ページ」単体と「エントリー」単体のURLとタイトルをシェアする前提です。

対応するfreoの変数

	サイトトップ	ページ	エントリー
URL	{$freo.core.http_url}	{$freo.core.http_file}/page/{$page.id}	{$freo.core.http_file}/view/{$entry.id}
タイトル	{$freo.config.basis.title}	{$page.title}	{$entry.title}

各テンプレートファイルにそれぞれに対応した変数をはめ込んだSNSシェアボタン用コードを記述すればいいのですが、それだとのちのちボタンを増やしたくなったり減らしたくなったりした時に3つのファイルを編集しなければいけなくなるので面倒ですよね。なのでSNSシェアボタン表示用テンプレートファイルを作り、それをインクルードすることにします。

{if}～{elseif}～{/if}を使って表示の分岐

シェアしたいURL

{if $entry.id}{$freo.core.http_file}/view/{$entry.id}{elseif $page.id}{$freo.core.http_file}/page/{$page.id}{else}{$freo.core.http_url}{/if}

URLの簡略化をしている場合は

{$freo.core.http_url}{if $entry.id}view/{$entry.id}{elseif $page.id}page/{$page.id}{/if}

のように書くこともできます（{$freo.core.http_url}が設置URL（末尾にスラッシュ有り）、{$freo.core.http_file}が設置URL＋「index.php」を表示する変数です）。

なぜかここ、私は

http{if $smarty.server.HTTPS}s{/if}://{$smarty.server.SERVER_NAME}{if $entry.id}/view/{$entry.id}{elseif $page.id}/{$page.id}{/if}

という書き方をしててなんでだ…？って思ってたんですけどよく考えたらconfig.phpの設置URLに「/」とだけ書いていた時期があったからでした。これだといろいろなリンク部分が絶対パスで書き出されて便利、と思ってたんですよね。今は素直に設置URLを書いてあるので書き換えてあります。

シェアしたいタイトル

{if $entry.id}{$entry.title|escape:'url'}{elseif $page.id}{$page.title|escape:'url'}{else}{$freo.config.basis.title|escape:'url'}{/if}

URLエンコードするため|escape:'url'を追加しています。

変数をはめ込んだSNSシェアボタン用コード

<ul class="share">
<li class="toTwitter"><a href="https://twitter.com/intent/tweet?text={if $entry.id}{$entry.title|escape:'url'}{elseif $page.id}{$page.title|escape:'url'}{else}{$freo.config.basis.title|escape:'url'}{/if}&url={if $entry.id}{$freo.core.http_file}/view/{$entry.id}{elseif $page.id}{$freo.core.http_file}/page/{$page.id}{else}{$freo.core.http_url}{/if}" title="ツイッターに投稿" target="_blank" rel="noopener">Twitter</a></li>
<li class="toFacebook"><a href="https://www.facebook.com/sharer/sharer.php?u={if $entry.id}{$freo.core.http_file}/view/{$entry.id}{elseif $page.id}{$freo.core.http_file}/page/{$page.id}{else}{$freo.core.http_url}{/if}&t={if $entry.id}{$entry.title|escape:'url'}{elseif $page.id}{$page.title|escape:'url'}{else}{$freo.config.basis.title|escape:'url'}{/if}" title="フェイスブックに投稿" target="_blank" rel="noopener">Facebook</a></li>
<li class="toHatena"><a href="https://b.hatena.ne.jp/add?mode=confirm&url={if $entry.id}{$freo.core.http_file}/view/{$entry.id}{elseif $page.id}{$freo.core.http_file}/page/{$page.id}{else}{$freo.core.http_url}{/if}" title="はてなブックマーク" target="_blank" rel="noopener">Hatena</a></li>
<li class="toLine"><a href="https://social-plugins.line.me/lineit/share?url={if $entry.id}{$freo.core.http_file}/view/{$entry.id}{elseif $page.id}{$freo.core.http_file}/page/{$page.id}{else}{$freo.core.http_url}{/if}" title="LINE" target="_blank" rel="noopener">LINE</a></li>
<li class="toPocket"><a href="https://getpocket.com/edit?url={if $entry.id}{$freo.core.http_file}/view/{$entry.id}{elseif $page.id}{$freo.core.http_file}/page/{$page.id}{else}{$freo.core.http_url}{/if}&title={if $entry.id}{$entry.title|escape:'url'}{elseif $page.id}{$page.title|escape:'url'}{else}{$freo.config.basis.title|escape:'url'}{/if}" title="Pocket" target="_blank" rel="noopener">Pocket</a></li>
</ul>

このコードだけを記述したファイルを例えば「share.html」などの名前で保存し、各テンプレートの表示したい部分で「{include file='share.html'}」のようにインクルードします。

エントリー一覧での記述場所

エントリー一覧では複数の記事が表示されるのでシェアボタン用コードの記述場所には注意が必要です。必ず

<!--{foreach from=$entries nofilter item='entry'}-->
～　この間　～
<!--{/foreach}-->

に入れましょう。

SNSシェアボタン用CSSの一例

自分が使ってるCSSです。シンプルに横並び、各SNSのブランドカラーを背景色にしています。ブランドカラーコードはTwitter, Facebook, はてなブックマーク, Pocket, LINE, Google+, Feedly のブランドカラーまとめ | カゴブロを参考にしました。

.share {
padding-bottom:16px;
text-align:center;
font-family:'Century Gothic',sans-serif;
font-weight:700
}
.share::before {
margin-bottom:6px;content:'SHARE';
display:block;
color:#555;
text-decoration:solid underline #ff853c 4px
}
.share li {
margin:2px 3px;
display:inline-block;
}
.share a {
display:block;
padding:2px 10px;
border-radius:2px;
color:#fff;
font-size:1.3rem
}
.toTwitter a {background:#1DA1F2}
.toFacebook a {background:#1877f2}
.toHatena a {background:#008fde}
.toLine a {background:#00b900}
.toPocket a {background:#ee4056}

サンプル及びパーツテンプレートの配布

サンプルは当サイトをご覧ください。長々書いてきましたがSNSシェアボタン表示コード用ファイルとCSSファイルもダウンロードできるようにしておきますのでよろしければご利用ください。

ありがとうございます！