Hexoの記事一覧ページにツイートボタン設置
HexoのテーマをFreewill変えて、Disqusウィジェット内の「Share」にはTwitterのツイートボタンはあるが、それだとhttp://disq.us/…
というDisqus経由の短縮URLになる様子。
普通のツイートボタンを設置したかったので、Twitter公式のツイートボタンを入れることにした。
個別の記事への設置は、Twitterサイトで「ページのURLを使う」の設定で作成したコードを/layout/_partial/article.ejsの<%- item.content %>
の下あたりに追記したら問題なく表示された。
だがページネーションの方はlayout/_partial/post/entry.ejsにコードを挿入しても、タイトル名と一覧ページのURLしか取得出来ない。
URLとツイート本文を自分でカスタマイズする設定でコードを作成し、excerptリンクに倣って、それぞれ<%- config.root %><%= item.path %>
、<%= item.title %>
で挿入したが、これだと記事タイトルのみでURLが表示されない。<%- config.root %>
でブログトップのURLを取得出来ないようだ。
「Read More」(続きを読む)の部分では、ちゃんと変換されているんだが。
ブログトップのURLをパスではなく直接記載したら上手くいった。
ーーーー
(追記)
個別記事URLへのパスは<%- item.permalink %>
一つで良いようだ。
ーーーー
記事を概要表示にしている時は「Read More」。全文表示にしている時はツイートボタンを表示することにして、read_moreの箇所を下記に変更した。
<% if (item.excerpt && index) { %>
<a type="button" href="<%- config.root %><%- item.path %>#more" class="btn btn-default more"><%= __('read_more') %></a>
<% } else { %>
<div class="tweet-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%- item.permalink %>" data-text="<%= item.title %> | <%= config.title %>" data-lang="ja">ツイート</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>
</div>
<% } %>
ツイートボタンに対しては、source/css/style.cssに下記を追記、
.tweet-button {
padding: 8px 0;
}
位置を調整した。
(参照記事)
jekyllのブログで投稿一覧ページにtwitterのボタンを置く - Taught by Myself
ーー
(関連記事)
Hexoブログに「はてなブックマーク」ボタンを設置