共有ボタンを作る

使っているテーマのテンプレートには共有ボタンみたいなものがデフォルトでついていません。

Pelican pluginにshare_postという拡張プラグインもあるのですが、いまいちわからず。

簡単に実装できるのではないか、と思い、自分でテンプレートを編集してみることにしました。

出来上がったものは記事の一番下に設置しています。

変更内容

今回はtwitterとfacebookだけ作成してみます。 javascriptなどは使わず、WEB APIを指定したaタグをページに置くことにしました。

WEB APIはそれぞれ以下の通り。

• twitter : http://twitter.com/share?url={{ 記事のURL }}&text={{ タイトル }}
• facebook : https://www.facebook.com/sharer/sharer.php?u={{ 記事のURL }}

これを記事のテンプレート(テーマのtempletes/article.html)に組み込みます。記事のURLとタイトルを示す変数はドキュメントを参考にしました。

表示するアイコンはfontawesomeから取得します。

(表示されないアイコンがあったため、font-awesomeのCDNを新しいversionに変更しました)

アイコン例

完成したコード

記事の一番下に表示するようにarticle.htmlにコピペしました。

<p>
    share:
    <a href="http://twitter.com/share?url={{ SITEURL }}/{{ article.url }}&text={{ article.title }}//{{ SITENAME }}">
        <i class="fa fa-twitter fa-2x"></i>
    </a>
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ SITEURL }}/{{ article.url }}">
        <i class="fa fa-facebook-square fa-2x"></i>
    </a>
</p>

めでたし。

参考

• SNS(Twitter/Facebook/LINE)シェアボタンを超簡単に設置する方法

share: