SQLの窓

2016年02月05日


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

2016/2/5 : ボタンの順番を変えました。
( Twitter / はてな / Facebook / Google+ )
また、自由に変えやすいようにコードに改行を挿入しました

2016/01/28 : Facebook のいいねボタンでは無く、シェアボタンに変更できるようにしました

Facebook のみ、アプリが必要になります( 966242223397117 というデフォルトの appid が使えるようです )し、Facebook のレスポンスは相当悪いのであまりおすすめではありません。Facebook は、アプリID がチェックボックスの代りになります。

ブログ等で使う場合は、URL 部分が 記事の URL になるように、テンプレート等の変数をセットするといいでしょう。

正直、Seesaa のブックマーク処理は効率が悪いようなので作成してみました。
Google+ ( 単純な Google+1ボタンにする => ) はてな Twitter
対象URL
Twitterテキスト
facebook アプリID 966242223397117 ( デフォルトの appid が使えるようです )
※ Shareボタンにする

『単純な Google+1ボタンにする』場合は、対象URL が表示されているページとなります。『単純な Google+1ボタンにする』のチェックを外すと、対象URL が必要になります。

ブログのトップベージのように、記事が複数ある場合は、上のテキストエリアのものを貼り付けて、下側のテキストエリアはページの最後に一度だけ実行されるようにします。

▼ Seesaa で、Facebook 無しの記事下に貼り付けるコード
<div> 
<table> 
<tr><td> 
<div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"> 
</td><td> 
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" style="border: none;" /></a> 
</td><td> 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<% article.page_url %>" data-lang="ja" data-text="<% article.subject %>"></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></tr> 
</table> 
</div> 

▼ Seesaa の記事 HTML の最後に貼り付けるコード( Facebook 無し ) 
<!-- 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> 
<!-- hatena --> 
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
Twitter 用としては、Seesaa では、data-text="<% article.subject %>" にする必要があります。

ボタン情報

Google +1ボタン
はてなブックマークボタン
Twitter buttons
Facebook Like Button
Facebook Share Button

関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』
Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )


posted by lightbox at 2016-02-05 21:26 | WEBサービス | このブログの読者になる | 更新情報をチェックする

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 ブログ
posted by lightbox at 2016-02-05 21:25 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2016年02月04日


livedoor Blog で、Twitter カードを使用する

Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます )

関連する記事

Seesaa ブログで Twitter カードを使用する方法

livedoor Blog のブログ設定(PC/カスタマイズ)

Twitter カードの目的を考えるて、まず個別記事ページを設定します。livedoor Blog ではすでに OGP の設定が仕様として含まれている( <$OGP$> )ので、まずその下に以下のような Twitter 用のメタ要素を書き込みます。
※ 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザID" />
<meta name="twitter:image" content="デフォルトの画像の URL" />
※ summary_large_image は大きな画像の表示です

デフォルトの画像は、記事別の画像を指定しない場合に表示される画像を URL で用意します。普通に Google の Picasa の画像が使えます。また、livedoor Blog では、この twitter:image の記述が無い場合は、『ブログアイコン』で指定した小さな画像が使われてしまいます。これは、Facebook 側(※1)で指定されているもので、Twitter カードはその指定の画像を利用することができます。
※1: <meta property="og:image" content="プロフィールアイコン(管理画面で設定)" />

なので、世の中のサンプルでは、先に OGP の記述があって、その後に Twitter カードの指定になっています。

記事毎に画像を変えるには

Twitter カードの メタ要素の指定は、ページのどこに書かれていても有効なようです。しかも、後から見つかった内容が最後に有効になっています。ですから、以下のような記述を記事の先頭に書くだけで有効になります。
<meta name="twitter:image" content="記事用画像のURL" />
それ以外にも、livedoor Blog には見出し画像という投稿項目があるのですが、これは og:image の内容を変えるものなので、この一連の設定ではヘッダ部分にすでに Twitter カード用のデフォルト画像を指定してしまっているので、変更しても Twitter カード側が優先されて、ライブドアの見出し画像は無効になります。

ライブドアの見出し画像を使いたい場合は、twitter:image を含むメタ要素を削除する必要があります。そしてその場合は、画像を事前に livedoor Blog にアップロードしておいて選択する必要があります。

トップページ用に注意する事

『ブログ基本設定』のブログの説明は、空では動作しません。また、デフォルトの画像は、記事毎のページのものと同じである必要はありません


関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』

関連するライブドアのドキュメント

Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)




posted by lightbox at 2016-02-04 23:53 | WEBサービス | このブログの読者になる | 更新情報をチェックする

livedoor Blog で、Facebook の『シェアボタンを表示する』


※ テンプレートは右2カラムの『キャンバス』シリーズのうちの一つを使用しています

トップページと個別記事ページに指定しました。

両方の container にルート要素とスクリプト

appid は必要無いです(たぶんデフォルトの appid が使われると予想しています / 966242223397117 )。
<!-- ............... Container ............... -->
<div id="container">

<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.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- ..... Title ..... -->

両方の article-social-btn にボタン用要素追加
		<div class="article-social-btn">
			<$ArticleToolBox$>
<div class="fb-share-button" data-href="<$ArticlePermalink$>" data-layout="button_count"></div>
		</div>
ArticlePermalink は、個別記事用の変数ですが、トップページに指定すると都合よく記事毎の URL に変換されました( ArticlesLoop の中ですから )

デフォルトの appid に関しては、オブジェクトデバッガーの結果より類推しています。


そもそも、シェアボタンのコード取得時に appid を持っていなくても動作するコードを取得できます。


関連する記事

livedoor Blog で、Twitter カードを使用する



posted by lightbox at 2016-02-04 23:12 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年02月02日


jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

重要

2015/12/1 に検証した結果、解説ページに使用されている jquery.ajax-combobox.js より、GitHub でダウンロードした jquery.ajax-combobox.js のほうが古い事が解りました。古いほうでは、解説ページに書かれている事の半分以上が動作しません。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js をダウンロードする必要があります 
※ UTF-8N です

※ jquery.ajax-combobox.min.js の日付はさらに古いので使え無いものと思われます


最新バージョンに差し替えて、サブ項目のデモを追加しました



ここからは少し前の投稿

デモページ



作者さんの意図では、本来 ajax を使ってサーバー側のデータをリアルタイムに取得する事が目的のようですが、利用するには少し問題が多そうです。サーバー側の解説も無く、クライアント側の解説もそれほど明快なものではありません。

なので、最低限確実に動くサンプルを作成しました。サーバーと連携したい場合は単純に一括で ajax で必要な JSON を取得してから jquery.ajax-combobox に引き渡すといいでしょう。

ダウンロードページ

解説ページ

デモで実行しているコード
	var data = [{"社員コード":"0001","氏名":"浦岡 友也"},{"社員コード":"0002","氏名":"山村 洋代"},{"社員コード":"0003","氏名":"多岡 冬行"},{"社員コード":"0004","氏名":"高田 冬美"},{"社員コード":"0005","氏名":"内高 友之"},{"社員コード":"0006","氏名":"森尾 正也"},{"社員コード":"0007","氏名":"鈴杉 由樹"},{"社員コード":"0008","氏名":"川吉 洋樹"},{"社員コード":"0009","氏名":"村森 友恵"},{"社員コード":"0010","氏名":"杉岡 友一"},{"社員コード":"0011","氏名":"川多 由男"},{"社員コード":"0012","氏名":"杉岡 由樹"},{"社員コード":"0013","氏名":"木川 元男"},{"社員コード":"0014","氏名":"川木 春一"},{"社員コード":"0015","氏名":"中多 克也"},{"社員コード":"0016","氏名":"森村 正恵"},{"社員コード":"0017","氏名":"尾田 雅也"},{"社員コード":"0018","氏名":"松中 輝行"},{"社員コード":"0019","氏名":"野丸 由一"},{"社員コード":"0020","氏名":"松野 友之"},{"社員コード":"0021","氏名":"吉村 春一"},{"社員コード":"0022","氏名":"丸吉 春代"},{"社員コード":"0023","氏名":"松本 洋也"},{"社員コード":"0024","氏名":"尾木 輝男"},{"社員コード":"0025","氏名":"鈴川 春美"},{"社員コード":"0026","氏名":"原中 元美"},{"社員コード":"0027","氏名":"浦村 春一"},{"社員コード":"0028","氏名":"森木 和之"},{"社員コード":"0029","氏名":"多田 友行"},{"社員コード":"0030","氏名":"浦川 冬代"},{"社員コード":"0031","氏名":"岡中 冬之"},{"社員コード":"0032","氏名":"野尾 春男"},{"社員コード":"0033","氏名":"田杉 洋也"},{"社員コード":"0034","氏名":"村高 洋代"},{"社員コード":"0035","氏名":"本原 正也"},{"社員コード":"0036","氏名":"浦多 冬代"},{"社員コード":"0037","氏名":"鈴丸 輝之"},{"社員コード":"0038","氏名":"松高 洋一"},{"社員コード":"0039","氏名":"高松 雅之"},{"社員コード":"0040","氏名":"安村 克恵"},{"社員コード":"0041","氏名":"丸森 雅美"},{"社員コード":"0042","氏名":"中原 冬男"},{"社員コード":"0043","氏名":"原松 春也"},{"社員コード":"0044","氏名":"村松 冬子"},{"社員コード":"0045","氏名":"村松 和子"},{"社員コード":"0046","氏名":"尾内 正樹"},{"社員コード":"0047","氏名":"多松 正樹"},{"社員コード":"0048","氏名":"浦杉 由美"},{"社員コード":"0049","氏名":"原田 春代"},{"社員コード":"0050","氏名":"松丸 正恵"}];

	$('#combo1').css({ "width": "350px" })
	.ajaxComboBox(
		data,
		{
			per_page: 20,
			lang: 'ja',
			button_img: 'ajaxcombobox/dist/btn.png',
			primary_key: '社員コード',
			field: '氏名',
			order_by: [
				'社員コード'
			]
		}
	);
最初に幅を 350px に設定しているのは、これでしか横幅を指定できなかったからです。解説内に幅を狭くするような記述がありますが、コンボボックスそのものでは無いようです。

入力部分は自由に入力が出来、自動的に検索されます。無かった値で送信した場合は、INPUT の name 属性に従って普通に値が送られます。既に存在する値を選んだ場合は、name属性_primary_key にキー部分もセットされます。

入力した値で検索されますが、スペースで区切ると AND 検索になります。オプションで OR 検索に変更する事も可能です

order_by プロパティでは、複数項目が指定可能で、DESC 文字列を使用できます( これについては、解説ページに記述されています )
order_by: [
	'社員コード DESC'
]
キーアクション 入力部分とボタン部分でリストが開いて無い時に下矢印キーを使うとリストが開き、開いている時は、ESC や TAB で閉じます また、開いている時には左右の矢印キーで1ページづつ移動でき、SHIFT+矢印キー で、先頭・最後に移動可能です。 関連する記事 jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
posted by lightbox at 2016-02-02 16:15 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造

このプラグインはとても便利です。先週、実際のシステムに実装しましたが、コードと名前と両方で検索したいという要望に合わせて改造しました。

デモページ


オリジナルの説明ではできるような事が書かれていますが、それば付属のデーターベースアクセスを行う PHP を使う必要があるようで、JSON データをクライアントのデータとして持たせて使う場合には動作しませんでした。

▼ jquery.ajax-combobox 利用時の概要

jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

このプラグインは、何故か GitHub のコードが古い為、そこからダウンロードしたものは殆どうまく動作せず、解説ページ内で使用している以下の URL からダウンロードする必要があります。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js

さらに、内部に直接日本語が書かれている為、UTF-8 以外のクライアント環境で使用する場合は、SCRIPT 要素に charset 属性を記述する必要があります( charset="utf-8" )

改造場所

1445 行あたりに、『連想配列に対して検索する』とあります。ここの以下の条件が検索している場所です
if (self.option.source[i][self.option.field].match(arr_reg[j])) {
self.option.field は、オプションで指定した field の内容を検索している事を示します。ですから、if の中の条件をコピーして || で繋げて、片方を固定で好きなフィールド名に変更すると正しく動作します

▼ こんな感じです
if (self.option.source[i][self.option.field].match(arr_reg[j])||self.option.source[i]["検索したいフィールド名"].match(arr_reg[j])) {





posted by lightbox at 2016-02-02 16:14 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり