« VirtualBoxにWindows 8.1updateをインストール | トップページ | ThinkPad E440のHDDをSSDに換装してメモリを増設してみました »

2014.12.06

ココログフリーにSNSボタンを設置してみた

最近、ブログにSNSボタンを設置することが普通になってきました。
当サイトはココログフリーのプラットフォームをお借りして提供しておりますが、ココログフリーにはツイートボタンのサポートはあるものの、その他のボタンの設置についてはサポートされていません。
例えば、ココログオプションパックアドバンスですと、上級テンプレート(HTMLカスタマイズ)が利用できるので、細かいカスタマイズが可能なようです。

しかし、私は貧乏症なのでココログフリーでもできる方法でSNSボタンの設置を試みましたのでメモ。
設置したのは、世の中のサイトで比較的普及していると思われる、
facebook, Google+, Twitter, はてブ, Pocket, FeedlyとRSSフィードの7つ。

設置した例は本サイトの右上あたりでご覧いただけますが、後日変更するかもしれないのでイメージを貼り付けておきます。
2014120601

SNSボタンの設置にあたり、参考にした主なサイトはこちら。
SNSボタンの設置方法まとめ:TAM Technical Team Tips Note
保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK:ゆめぴょんの知恵
自分のブログを Feedly に登録するボタンは3分で設置出来ちゃう :941blog
ありがとうございます。

ココログフリーでブログパーツを設置する方法として、従前よりマイリストを使う方法が知られております。
20141206011
リストのタイプを“メモ”として作成します。

2014120602

2014120603
そこで、ブログパーツのテキストを貼り付けた結果がこちら。ブログパーツのスクリプト例は後述。

2014120604
公開範囲を指定したら、表示項目を指定。

2014120605
フッターにTwitterが入っていたら、外してしまいます。設定で指定します。

2014120606
作成したブログパーツをチェックします。

2014120607
ブログパーツ等の表示順は変更可能です。

2014120608
RSS Feedのアイコンは自分で用意します。
Feed Icons
からダウンロードできますので、イメージファイルのフォルダにアップロードします。

(2016.12.25追記)
Twitterのカウンタが廃止された代わりに、”List”から検索機能にリンクを張ってみました。

Share<br />
<!--Facebook-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<br />
<!--Gooble +1-->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<br />
<!--Twitter-->
<table border="0">
<tr><td align="left"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</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>
</td><td>
<div id="twitter_list">List</div>
<script>var u=window.location.href;u=u.replace('http://', '');u=u.replace('https://', '');document.getElementById('twitter_list').innerHTML='<a href="https://twitter.com/search?q='+u+'">List</a>';</script>
</td></tr></table>
<!--Pocket-->
<a data-pocket-label="pocket" data-pocket-count="horizontal" 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>
<!--はてブ-->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><br />
Subscribe<br />
<!--feedly-->
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F****.cocolog-nifty.com%2Fblog%2Fatom.xml'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png' alt='follow us in feedly' width='66' height='20' style="border: none;" /></a>
<br />
<!--RSS Feed-->
<a href="http://****.cocolog-nifty.com/blog/index.rdf"><img src="http://****.cocolog-nifty.com/blog/images/feed-icon-28x28.png"  alt="RSSを表示する" width="20" height="20" style="border: none;" /></a> 
(2016.12.25追記ここまで)

(以下、改定前情報だが履歴のため残す)
ブログパーツのスクリプト例は以下のとおり(2014年12月6日現在)。

(2016.02.24 SyntaxHighlighterで記述)


Share<br /><br />
<!--Facebook-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<br /><br />
<!--Gooble +1-->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<br /><br />
<!--Twitter-->
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</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>
<!--Pocket-->
<a data-pocket-label="pocket" data-pocket-count="horizontal" 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>
<!--はてブ-->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><br /><br />

Subscribe<br /><br />
<!--feedly-->
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F****.cocolog-nifty.com%2Fblog%2Fatom.xml' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png' alt='follow us in feedly' width='66' height='20' style="border: none;" /></a>
<br /><br />
<!--RSS Feed-->
<a href="http://*****.cocolog-nifty.com/blog/index.rdf"><img src="http://*****.cocolog-nifty.com/blog/images/feed-icon-28x28.png" alt="RSSを表示する" width="20" height="20" style="border: none;" /></a>


見た目に応じて適宜<br />タグを挿入して下さい。
(2016.02.24 SyntaxHighlighterで記述 ここまで)

"*****"は、自分の環境に合わせて修正して下さい。

本当は各記事の直前又は直後に固定リンクを含む形で設置できればよいのですが、ここで紹介した方法ですと、トップサイトで登録してしまうと特定の記事に紐付かないかたちでシェアされてしまうことに注意が必要です。
この点に関し、サイトのテキストをJavaScriptのイベントをトリガに置き換える試みを見つけました。
ココログフリーに、はてブアイコンを追加してみる:トグサ秋月の電脳設計室
最初はこの方法を適用しようとしたのですが、静的リンクのような形であればうまくいったのですが、JavaScriptの即時関数等を組み込んだブログパーツだとうまくいきませんでしたので、今のところここで紹介した方法で落ち着いております。
…このあたり、もっと良いアイデアがあるかもしれません…

|

« VirtualBoxにWindows 8.1updateをインストール | トップページ | ThinkPad E440のHDDをSSDに換装してメモリを増設してみました »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1024423/58192287

この記事へのトラックバック一覧です: ココログフリーにSNSボタンを設置してみた:

« VirtualBoxにWindows 8.1updateをインストール | トップページ | ThinkPad E440のHDDをSSDに換装してメモリを増設してみました »