SQLの窓

2016年02月05日


Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )

かなり前から、Seesaa のソーシャルボタンが表示されなくなったのは気がついていたのですが、どうせ仕様変更だろうと放置していましたが、少し気になったので調べてみるとやはりそうでした。( 2013-06-05 時点の記述です )

Seesaa の公式の内容

設定> 詳細設定> ソーシャルボタン: ブログ・ヘルプ

内容は、『リニューアルに伴うテンプレート記述方法の変更』です。つまり、古い仕様で書かれている部分を新しくして下さいとの事。

まず、古い記述( 記事コンテンツの HTML 部分の 『posted by』の直前にあります )
<% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8">
//<![CDATA[
seesaa_bookmark_services = "<% blog.bookmark_service %>";
seesaa_article_page_url = "<% article.page_url %>";
seesaa_article_subject = "<% article.subject | remove_emoji | jsescape | tag_strip %>";
seesaa_blog_url = "<% site_info.blog_url %>";
//]]></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>
この仕様では、毎回 JavaScript が読み込まれて実行されていましたが、昨今 PC や通信速度の向上より、一括でやったほうがいいとなったのだと思います。よって以下のようにまるごと変更
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>
で、一括部分は、『記事コンテンツ』の HTML 部分の最後のところに以下の内容を追加します。
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bl-bookmarks.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
var bookmark_services = "<% blog.bookmark_service %>".split('-').join('').split(",");
var seesaaBookmarks = new blBookmarks({bookmark_services:bookmark_services, blog_url:"<% site_info.blog_url %>"});
seesaaBookmarks.exe();
</script>
但し、このままでは横に並ばないので、外部 CSS を ヘッダ部分に追加します。
<link rel="stylesheet" href="http://blog.seesaa.jp/css/user-common.css" type="text/css" />

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

▼ 2013-06-05 時点では Google+ はブックマークの中だった
で、ここからが改造。以前から Google+ ボタンとは相性が悪かったせいか(どうかは解りませんが)、はてなブックマーク、Facebook、Twitter 以外のボタンは『ブックマーク』としてまとめられるみたいなので、Google+ボタンを外に出るようにしてみました。
現在は改造しなくても外に出てるようです

※ よって、以下は現在必要ありません。
外には出るんですが、バグってるみたいです。結局下のようにしなきゃなりません。また、その場合は Seesaa の設定の Google+ ボタンは OFF にします。

まず、最初に変更した部分の DIV の中に Google+ 用の DIV を貼り付けます。
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"><div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"></div></div>
<% /if %>

そして、記事コンテンツの HTML の最後に以下を貼り付けます
<!-- google --> 
<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> 
そして、CSS を追加すれば、Google+ ボタンは一番左になってしまいますが、使えるはずです。
これは使わなくていいです。右端に並ぶはずです。
.bookmark div {
	float: left!important;
}

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得




Seesaa独自タグ簡易リファレンス

タグ:Seesaa SNS ブログ
【Seesaa プログ管理支援の最新記事】
posted by lightbox at 2016-02-05 21:25 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり