ココログ画面カスタマイズ

ここでやるカスタマイズは、サブタイトル内にhtml(スクリプト)を追加することで実現させています。

ブログのサブタイトル(キャッチフレーズ):にリンクを入れる

ブログのサブタイトルにはhtmlのタグが使えます。
下記のように、ホームページへのリンクやバナーを貼ってやることも可能です。


自転車出張修理の記録です。失敗談、変わった修理、修理に関連する工夫したことなどを記事にして行きます。
埼玉県川越市で、自転車の出張修理をしています。パンク・カギの紛失など、お困りの時は、お電話下さい。
 HP:自転車出張修理サイクルメンテあのこら 電話:090-6701-86339がつく日は自転車の空気を入れよう

あのこらのブログのサブタイトル


FaceBookのいいねボタンの設置

facebookいいねボタンの取得

https://developers.facebook.com/docs/plugins/share-button
からのコードではうまく動かせかったので、
HUBLOG! さんのページから借用しました。

IFRAMEのボタンコードで、下の画像になります。

FaceBookのいいねボタン

[ここにURL]の部分を変更してお使い下さい。
<iframe width="120" height="21" style="border: none; overflow: hidden; height: 21px;" src="//www.facebook.com/v2.0/plugins/like.php?href=[ここにURL]&width&layout=button_count&action=like&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

FaceBookプラグインのバージョンは2.0が指定されていますが、2.3に変えても動作しました。


【ボタンの設置スクリプト】

【jqueryの指定】

短いスクリプトで機能が実装できたので、jqueryを使いました。最新バージョン2.1.4で確認しています。
スクリプトの記述の先頭に記載が必要です。

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.js" type="text/javascript"></script>

【class="entry-footer-info"の先頭に追加します。】

下記のHTMLソースはある日のあのこらのブログのフッター部分を取り出したものです。
改訂前のブログでは、FaceBookのいいねボタンを"entry-footer-share"(tweetボタン)の後ろに追加していましたが、フッターの表示設定でタグが有ったりなかったりするので設定にかかわらず存在する<div class="entry-footer-info"> 要素を使用することに変更します。
jQuery 各要素の前後にコンテンツを挿入する before after prepend append」の記事にコンテンツ挿入の為のコマンドの詳しい使い方が記載されています。

<div class="entry-footer">
					<p class="entry-footer-info">
				<span class="post-footers">2015年10月 2日 (金)  <a href="http://anocora.cocolog-nifty.com/blog/cat59140169/index.html">自転車技士・安全整備士受験</a> </span> <span class="separator">|</span> <a class="permalink" href="http://anocora.cocolog-nifty.com/blog/2015/10/post-237b.html">固定リンク</a>
			</p>
		
		<!-- post footer links -->
	<p class="entry-footer-share">
		<span class="entry-footer-links-twitter"><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button"
   data-url="http://anocora.cocolog-nifty.com/blog/2015/10/post-237b.html"
   data-counturl="http://anocora.cocolog-nifty.com/blog/2015/10/post-237b.html"
   data-text="結果が届きました。"
   data-count="horizontal">Tweet</a>
</span>
	</p>
	</div>
<div class="entry-inner-bottom"></div>

ブログではこのように表示されています。


|


【いいねボタン追加の為のスクリプト】

<script>
$(function() {
$(".entry-footer-info").append('<iframe width="120" height="21" style="border: none; overflow: hidden; height: 21px;" src="//www.facebook.com/v2.0/plugins/like.php?href="anocora.cocolog-nifty.com%2Fblog%2F&&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=21"scrolling="no" frameborder="0" style="border:none; overflow:hidden;height:21px;" allowTransparency="true"></iframe>');
});
</script>

このスクリプトでは、各記事ごとのURLが指定されず、あのこらのブログに対してのいいねになります。
記事ごとのURLを取得して、ボタンに反映してやる必要があります。
画面からは、外れていますが、

<a class="permalink" href="http://anocora.cocolog-nifty.com/blog/2015/10/post-237b.html">固定リンク</a>

が記事ごとのURLを持っているので、ここからURLを取り出します。
このスクリプトでは、関数$(this)がこの要素の親要素になります。

//ページ内に複数のclass="permalink"を持つ要素が有っても、それぞれのURLを取得します。
function () {return $(this).children('.permalink').attr('href'); }

上で貰った、FaceBookのIFRAMEのボタンコードの [ここにURL]の部分が取得できました。
前後のコードを関数化して、取得したURLと連結し、各記事ごとのいいねボタンにして追加してやります。

【ココログフリーでのスクリプト】
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.js" type="text/javascript"></script>
 <script>
 //facebookいいねボタン
 //分割_1
 var myFb_1 ='<iframe width="120" height="21" style="border: none; overflow: hidden; height: 21px;" src="//www.facebook.com/v2.3/plugins/like.php?href='
 //分割_2
 var myFb_2='&width&layout=button_count&action=like&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" allowtransparency="true">'
 //entry-foote-inforの先頭に追加 
$(function() { 
$('.entry-footer-info').prepend(function () {return myFb_1+$(this).children('.permalink').attr('href')+myFb_2;});
 });
 </script>
【ココログ有償版とカスタムテンプレートでのスクリプト】
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.4.js" type="text/javascript"></script>
<script>
//facebookいいねボタン
//分割_1
var myFb_1 ='<iframe width="150" height="21" style="border: none; overflow: hidden; height: 21px;" src="//www.facebook.com/v2.3/plugins/like.php?href=' 
//分割_2 
var myFb_2='&width&layout=button_count&action=like&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" allowtransparency="true">' 
//entry-body-bottom+.postedの先頭に追加
$(function() {
 $('.entry-body-bottom+.posted').prepend(function () {return myFb_1+$(this).children('.permalink').attr('href')+myFb_2;});
});
</script>
.postedのクラスが複数あるため、.entry-body-bottomクラスの次にある.postedを指定しています。
*2016.09.13 スマホ画面で、ブログが表示されない不具合を修正しました。

【サブタイトルの全文】

テキスト形式のサブタイトルの全文はこちらに在ります。

【設置方法】

サブタイトル設定画面

ココログの管理画面で設定タブを開き、サブタイトルのテキストエリアに、上記のスクリプトを張り付けるだけで動きます。
「変更を保存」をクリックして
設定の保存
「サイトに反映」をクリックし
設定の反映
「反映」をクリックして、終了を待ちます。

【設置の注意事項】

改訂にあたっては、ココログの設定に関わらず動くスクリプトにしたかったので、当初は挿入場所の候補を<div class="entry-footer"> 要素にしようとしたのですが、記事ごとのURL取得が面倒なこととココログのスクリプトと競合するのか、テストでは表示できているのに、ココログに適用すると表示されない現象が出て、諦めました。

この他にも、いろんな画面カスタマイズや、スクリプト作成の経過をブログの記事にしています。

ココログ記事

日時  タイトル  要約 
2014年1月15日 (水) ブログ村バナー貼り  記事を書く都度、バナーを貼るのも面倒で
2014年1月16日 (木) ブログ村バナー貼り -2  アメブロ用を流用
2014年1月18日 (土) ブログ村バナー貼り -3(完成) jQueryに書き換え
2014年1月25日 (土) facebookいいねボタン設置覚書-1  facebookボタンは設置出来た
2014年1月26日 (日) facebookいいねボタン設置覚書-2  誰でも使えるスクリプトに
2014年1月27日 (月) facebookいいねボタン設置覚書-3  覚書-2の訂正
2014年2月 1日 (土) facebookいいねボタン設置覚書-4  記事ごとのいいねボタン化完了
2014年2月 2日 (日) facebookいいねボタン設置覚書-番外編  ボタンエリアと広告エリアの位置入れ替え
2014年2月 4日 (火) facebookいいねボタン設置覚書-番外編その2  ボタンエリアの背景色変更とWEBページのリンク先変更
2014年2月 6日 (木) ココログ画面カスタマイズ(まとめ)  まとめ記事です
2014年10月22日 (水) ココログ画面カスタマイズ動作確認  動かないとのご指摘と、再度のまとめ
2014年10月23日 (木) ココログ画面カスタマイズ動作確認-2  動かない原因(有償版への対応)
2014年10月28日 (火) ココログ画面カスタマイズ修正 動作確認(完了)  動きました。
2015年9月28日 (月) Fecebookのいいねボタンが無くなりました。  tweetボタンを無くしたら
2015年10月8日(木) FaceBookいいねボタンを設置(改訂版-0)  道筋が見えました
2015年10月11日(日) FaceBookいいねボタンを設置(改訂版-0.1)  テストはOKなのに?
2015年10月12日(月) FaceBookいいねボタンを設置(改訂版)  完成しました。
2017年3月12日(日) ブログ村バナー、FBいいねボタン復活  「ココログ最強検索」を設置すると動作しないことが判明しました。