(cache) ソーシャルてんこ盛りがちょっとだけバージョンアップ！1.2 杯目 : actyway

ソーシャルてんこ盛り1.2杯目
タイトルが 2ch のスレタイみたいですが若干そうゆうノリだったりしますょ（汗）

こちらより新しいバージョンがありますのでソーシャルてんこ盛りの一覧からお探しください。

バージョンアップ！

久しぶりの更新なのですが、最近では Google のプライバシーポリシーが変わったとか、はてぶボタンのトラッキングなどが話題になっていると思うのですが、正直細かいことは分からないですよね〜！ただブックマークレットとは言えウェブサービスを提供する立場としてそうゆうことにも敏感になっておかないといけないって理由で少し変更してみました。

主な変更点はこんな感じです。

はてぶボタンを行動情報の取得をしてないタイプに変更
脱 jQuery -JavaScript のみに!!!-
Topsy からのツイート取得の件数と仕様を変更
スクリプトと画像の軽量化
ボタンのレイアウト崩れを起すサイトに対応（完全ではない）

★ソーシャルてんこ盛りを知らない人はこちらもあわせてご覧ください。
ソーシャル系サービスを複数もりこんだブックマークレットを作りましたー！

はてぶボタンの変更！

行動情報の取得とか言われていますけど、ボタンにトラッキングされるコードが含まれているって話です。このあたりを詳しく知りたい場合は以下の記事とかを読んでみてください、ませ。

追記: はてぶボタンの第三者への情報提供機能は廃止されたみたいです。継続して情報は収集してると受け取れますね！
はてなブックマークボタンから収集した行動情報の第三者提供をやめます – はてなの日記 – 機能変更、お知らせなど

現状では、はてぶボタンはトラッキング機能が含まれている物と無い物がありますので、ソーシャルてんこ盛りでは、無い方に変更しました。（今回のバージョンアップはこれが目的で後はおまけだったりします。）

ある方のコード
→ はてなブックマークボタンの作成・設置について

無い方のコード
→ はてなブックマークボタンの作成・設置について

コードの差が気になったので見たところスクリプトのURLが変わっているだけでした。

/* ある方のコード */
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 
/* 無い方のコード */
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>

脱 jQuery！

使う側からしたらどうでも良い内容かもしれませんが、前のバージョンでは jQuery を使って Topsy からツイートの取得をしていました。その部分をそぷさんがブログで公開されていた jQuery 非依存の getJSON.js を使うように変更しました。そぷさんありがとうございます〜(´∀`)ﾉ

そぷさん

★これは便利！jQueryに依存せずに使えるgetJSON.jsを作ってみた | そぷログ

ツイート取得の件数と仕様を変更！

More Tweets

ページで言及されているツイートを Topsy から取得して表示していますが、そのあたりを変更しました。

前のバージョンだと最初に取得する件数は 20 件でしたが、これを今回は 30 件に増やしました!!! 30 件以上ツイートがあった場合は「More Tweets」ってボタンが表示されクリックすると続きのツイートが読み込みされます。（何件でもいけちゃいます！たぶんw）

スクリプトと画像の軽量化！

Tumblr. のアイコン
ソーシャルてんこ盛りで勝手にアイコン作って使っていますが、「Tumblr.」のアイコンを作りかえました。

最近知った Image optim って言う PNG ファイルを小さくしてくれるアプリがかなり優秀でした。
4KB → 1.4KB ってかなりすごくないですか？？

★ImageOptim — all image compression tools in one Mac app（Mac 用です。）

スクリプトの軽量化は大したこと出来ていません、変数名を短くしたりなんか色々努力したつもりですが元々の性格が面倒なこと嫌いなので結局 JavaScript 軽量化するオンラインツールを使いましたｗ

これ系のアプリとかっていっぱいあると思うのですが、今まで試したことなかったのでどれが良いのか分からず GIGAZINE で紹介されていたのが簡単そうだったのでそれを試しました。おすすめのありましたら教えてください〜！
5.4KB → 4.9KB あんまり変わってないですよね〜？？

★JavaScriptファイルやCSSファイルを圧縮して高速化する「YUI Compressor Online」 – GIGAZINE

ボタンのレイアウト崩れを起すサイトに対応！

これ！ひどいところはかなり酷かったですよねｗ教えていただいたサイトと自分で見つけたサイトとか数カ所を参考に CSS の変更をしました。結構 CSS が増えてしまったｗちょっとは崩れるのましになるかもしれません！見つけたら URL を教えていただけると助かります〜(´∀`)ﾉ

ブックマークレット！

肝心のソースコードとかまだでしたｗ今回は PC版のみの更新になっています！ブックマークレットのコードも変更になっていますので、新しい物を使ってください。お色は前回と同じで3色です！（※前回のバージョンでもそのままお使いいただけます。）

/* ソーシャルてんこ盛り1.2杯目ブルー */
javascript:(function(d){var s=d.createElement("script");s.charset="UTF-8";s.src="http://actyway.com/bookmarklet/tenkomori.1.2-b-min.js?"+(new Date()).getTime();d.body.appendChild(s)})(document);
 
/* ソーシャルてんこ盛り1.2杯目グレー */
javascript:(function(d){var s=d.createElement("script");s.charset="UTF-8";s.src="http://actyway.com/bookmarklet/tenkomori.1.2-g-min.js?"+(new Date()).getTime();d.body.appendChild(s)})(document);
 
/* ソーシャルてんこ盛り1.2杯目ピンク */
javascript:(function(d){var s=d.createElement("script");s.charset="UTF-8";s.src="http://actyway.com/bookmarklet/tenkomori.1.2-p-min.js?"+(new Date()).getTime();d.body.appendChild(s)})(document);

ソーシャルてんこ盛り1.2杯目ブルー
 ソーシャルてんこ盛り1.2杯目グレー
 ソーシャルてんこ盛り1.2杯目ピンク
↑ブックマークバーなどにドラッグしてお使いください。（クリックするとこの場で実行できます。）

★ブックマークレットの登録方法が分からない方はソーシャル系サービスを複数もりこんだブックマークレットを作りましたー！を見てください。

本体のコード！

/* ソーシャルてんこ盛り1.2杯目ブルーのコードです */
(function(d,b){
	var url = location.href,
	t = d.createElement('div');
	t.id = 'tenkomori';
	t.innerHTML += '<div class="social-buttons">'+
 
	/* 閉じる */
	'<div onclick="document.body.removeChild(document.body.firstChild);" style="height:16px;width:60px;background-color:#009fff;color:white;text-align:center;font-size:10px;top:-10px;left:330px;line-height:1;padding:4px 0 0 0;position:absolute;cursor:pointer;">閉じる</div>'+
 
	/* hatebu */
	'<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a> '+
 
	/* twitter */
	'<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="ja">ツイート</a> '+
 
	/* facebook */
	'<iframe src="//www.facebook.com/plugins/like.php?href='+encodeURI(url)+'&amp;send=false&amp;layout=box_count&amp;width=70&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none;overflow:hidden;height:62px;width:70px;" allowTransparency="true"></iframe> '+
 
	/* googleplus */
	'<g:plusone size="tall" href="'+url+'"></g:plusone> '+
 
	/* evernote */
	'<a href="#" onclick="Evernote.doClip({});return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a> '+
 
	/* tumblr. */
	'<a href="http://www.tumblr.com/share" title="Share on Tumblr"><img src="http://actyway.com/bookmarklet/tumblr.png" alt="Clip to Evernote" /></a>'+
 
	'</div><div id="page-tweets"></div>'+
	'<style>'+
	'#tenkomori{position:fixed;z-index:10000;top:10px;right:10px;width:400px;height:300px;border:solid 6px #009fff;border-radius:5px;box-shadow:black 1px 1px 8px;background:#d9efff url(http://actyway.com/bookmarklet/stripe.png);font-size:13px;font-family:sans-serif;color:#4f4f4f;text-align:left;padding:0;margin:0;box-sizing:content-box;}'+
	'#tenkomori a img{border:none;vertical-align:bottom !important;display:inline !important;}'+
	'#tenkomori .social-buttons{margin:0;padding:15px 12px;height:68px;vertical-align:bottom !important;box-sizing:content-box;}'+
	'.social-buttons iframe,.social-buttons div{vertical-align:bottom !important;margin:0 !important;}'+
	'#page-tweets{height:202px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;box-sizing:content-box;}'+
	'.t-partition{background-color:white;border-radius:3px;padding:7px 10px;margin:0 12px 15px 12px;box-shadow:#afafaf 1px 1px 2px;}'+
	'.t-author{zoom:1;height:32px;margin:0 0 10px 0;line-height:16px;padding:0;font-size:10px;}'+
	'.t-author:after{content:"";display:block;clear:both;}'+
	'.t-photo_url{float:left;margin:0 7px 0 0;}'+
	'.t-nick{font-size:12px;color:#009fff;}'+
	'.t-content{padding:0;margin:0;line-height:17px;}'+
	'.t-date{color:#afafaf;font-size:10px;}'+
	'#t-more{color:#fff;background-color:#39f;border-radius:3px;padding:7px 10px;margin:0 12px 15px 12px;box-shadow:#afafaf 1px 1px 2px;text-align:center;cursor:pointer;}'+
	'#t-more:hover{color:#09f;background-color:#6cf;}'+
	'iframe.twitter-share-button{height:62px !important;}'+
	'.hatena-bookmark-button-frame,.twitter-share-button img,.twitter-share-button{vertical-align:bottom !important;}'+
	'</style>';
	b.insertBefore(t,b.firstChild);
 
	var hb = d.createElement("script");
	hb.src = "http://b.st-hatena.com/js/bookmark_button_wo_al.js";
	b.appendChild(hb);
 
	var tw = d.createElement("script");
	tw.src = "http://platform.twitter.com/widgets.js";
	b.appendChild(tw);
 
	window.___gcfg = {lang:'ja'};
	var po = d.createElement('script');
	po.type = 'text/javascript';
	po.async = true;
	po.src = 'https://apis.google.com/js/plusone.js';
	var s = d.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(po,s);
 
	var ev = d.createElement("script");
	ev.src = "http://static.evernote.com/noteit.js";
	b.appendChild(ev);
 
	var tb = d.createElement("script");
	tb.src = "http://platform.tumblr.com/v1/share.js";
	b.appendChild(tb);
 
	var gj = d.createElement("script");
	gj.src = "http://actyway.com/bookmarklet/js/getJSON.js";
	b.appendChild(gj);
 
	gj.onload = function(){
		getTweets(1);
	}
})(document,document.body);
 
function getTweets(p){
	if(p>1){
		var more = document.getElementById("t-more");
		more.parentNode.removeChild(more);
	}
	getJSON.load('http://otter.topsy.com/trackbacks.json?url='+ location.href +'&perpage=30&page='+p+'&callback={callback}',function(j){
		if(!j.response.total) return false;
		var r=j.response,
		t=r.total,
		l=r.list.length,
		sap="";
		for(var i=0;i<l;i++){
			var tpy = r.list[i];
			sap += '<div class="t-partition"><div class="t-author">'+
			'<a href="'+tpy.author.url+'" target="_blank" class="t-photo_url"><img src="'+tpy.author.photo_url+'" width="32" height="32" /></a>'+
			'<a href="'+tpy.author.url+'" target="_blank" class="t-nick">@'+tpy.author.nick+'</a><br />'+
			tpy.author.name+'</div>'+
			'<div class="t-content">'+tpy.content+' <a href="'+tpy.permalink_url+'" target="_blank" class="t-date">'+tpy.date_alpha+'</a></div></div>';
		}
		if(t>30*p) sap += '<div id="t-more" onclick="getTweets('+(p+1)+');">More Tweets</div>';
		document.getElementById("page-tweets").innerHTML +=sap;
	});
}