fanblogのソーシャルボタン設定にないボタンを追加する: いおりのプログラミングめも

2017年02月20日

fanblogのソーシャルボタン設定にないボタンを追加する

fanblogにはソーシャルボタンの設定項目がありますが設置できないボタンもあります。それらのボタンの設置方法を紹介します。

Twitter, LINE, Pocketのボタンを追加する

今回はTwitter, LINE, Pocketのボタンを追加を追加してみます。はてなブックマークのボタンもついでに。はてぶのボタンはfanblogに用意されているのでそちらを使う方法もあります。

HTMLを追加編集する

まずhtmlを編集します。

fanblog設定画面の

デザイン→PC→HTMLの編集→HTMLの追加

でHTMLの追加と編集をします。HTML名は好きなのに決めます。

以下のような記述がある個所に追加します。emacsで開いた時の様子です。fanblogのエディタだと色分けはありません。

<% if:page_name eq 'article' -%>
<div class="text"><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>

<% else -%>
<div class="text"><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>

追加する記述は以下の通り。

<div class="share">
<ul>
<li><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></li>
<li class="ln-share"><div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja" ></div></li>
<li><a data-pocket-label="pocket" data-pocket-count="none" 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>
<li>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-counter" title="このエントリーをはてなブックマークに追加"><img src="https://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="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>
</div>

追加後はこんな感じになります。

<% if:page_name eq 'article' -%>
<div class="text"><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>


<div class="share">
<ul>
<li><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></li>
<li class="ln-share"><div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja" ></div></li>
<li><a data-pocket-label="pocket" data-pocket-count="none" 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>
<li>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-counter" title="このエントリーをはてなブックマークに追加"><img src="https://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="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>
</div>
<% else -%>
<div class="text"><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>

htmlの最後の部分にスクリプトを追加します。以下の部分です。

</body>
</html>

追加するスクリプトは以下の通り。

<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>

<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>

追加後はこんな感じです。

<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>

<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>
</body>
</html>

htmlの編集はこれで終わりです。下にスクロールして「保存」をクリックし、追加したHTMLを適用します。

CSSを編集する

HTMLの追加編集と適用をした時点でSNSボタンは表示されますが縦並びです。なのでCSSを編集して横並びに変更します。

fanblogの設定画面の

デザイン→PC→CSSの編集

を開きます。「トップ」のCSSをすべてコピーして「記事」のCSSに貼り付けます。

一番最後に以下の記述を追加します。

.share ul{
margin: 0;
padding: 0;
list-style: none;
}
.share ul:after{
content: "";
display: block;
clear: both;
}
.share li{
float: left;
width:auto;
}

とりあえずこれで表示されて使えるようになります。