ソーシャル系サービスを複数もりこんだブックマークレットを作りましたー!

ソーシャルてんこ盛り
自分のイメージを表したかったけど、力不足でしたっ!「てんこ盛りっ!」

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

ソーシャルてんこ盛り!

ソーシャルてんこ盛り!

ちょっと名前は大げさですけど、展望も込めて「ソーシャルてんこ盛り」って名前にしてみました!インパクトとキャッチーって狙いもあります〜w

このブックマークレットの内容は、メジャーなソーシャル系のボタンとそのページのツイートされた内容をざざーっと一度に表示します。

ブックマークレットが何か分からない方は Chrome で使える便利なブックマークレット!2011年 11月ブックマークレットとは?ブックマークレットを使うメリット! の項を合わせて見てみてください!

作った理由!

わたしは最近、拡張機能よりブックマークレットをなるべく使おうとしているのですが、公式で配布されているのは1つのブックマークレットで1つのサービスしか開けられないじゃないですか?

例えば、「はてブ」して「ツイート」してさらに「いいね!」してって感じで複数にシェアしたい場合はその回数分ブックマークレット使わないといけないのです。はい、これが不便なんですー。そのサイトにボタン置いてあったら問題ないんですけどね〜w

で、ボタンも設置されていると限らないので自前で便利なブックマークレットを用意しよう〜!と今回作ってみました!

使ってみてください!

お色は選べる3タイプ!

あまりカラーバリエーション増やすと改修の時が大変なのでとりあえず3色だけです!動作や機能面で安定してきたら増やしたりとかもしてみたいと思います。

ソーシャルてんこ盛り ←ブルーです。

ソーシャルてんこ盛り ←グレーです。

ソーシャルてんこ盛り ←ピンクです。

↑リンクをブラウザのブックマークバーにドラッグして登録してくださいねっ!

/* ブルー */
javascript:(function(){var d = document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://actyway.com/bookmarklet/tenkomori.1-b.js?"+(new Date()).getTime(); d.body.appendChild(s)})();
/* グレー */
javascript:(function(){var d = document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://actyway.com/bookmarklet/tenkomori.1-g.js?"+(new Date()).getTime(); d.body.appendChild(s)})();
/* ピンク */
javascript:(function(){var d = document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://actyway.com/bookmarklet/tenkomori.1-p.js?"+(new Date()).getTime(); d.body.appendChild(s)})();

ブックマークレットの内容はこんな感じです。主に動作する部分は外部ファイルに書いています。(ブックマークの保存可能量より多くなると思った為)

登録方法が分からない方は ブックマークレットの登録方法! を見てみてください。

対応ブラウザ!

対応ブラウザ

対応ブラウザとか偉そうに言っていますが、基本的に Chrome で動けば良い!って考えで作ってみたら Firefox と Opera と Safari でも動いたってオチです〜w

全て最新のバージョンでのみしか確認していません! IE はまったく見てないのでさっぱり分かりません。(特に変な書き方はしてないと思うので動くかもしれませんw)

追記: IE8で動くと教えていただけました。(2011年11月18日)

機能の説明!

ソーシャルボタン

ソーシャル系サービスのボタンが表示されます。公式のコードを使っていますので動作もいたって普通ですw Tumblr.のボタンだけ EVERNOTE のボタンに合わせて作りましたw

左からはてなブックマーク、Twitter、Facebook、Google Plus、EVERNOTE、Tumblr.のボタンです。

ツイート部分

Twitter でのツイートを最新の20件表示しているんですが、Twitter公式で提供されているウィジェット だと古いツイートまでは表示されないみたいで、色々あって Topsy から取得することになりました。

More Tweets

20件以上のツイートがある場合は、スクロール下部に Topsy へ「More Tweets」とリンクを表示しています。

使用メモリ!

わたし的にはこれが一番知りたい内容でしたっ!
せっかくブックマークレット作っても使用するメモリが大きかったらブックマークレット使う意味ないですもんね〜w

google.co.jp で試したところ、元々のタブの消費メモリが 49.2MB で、ソーシャルてんこ盛りを使った後は 56.9MB なので、56.9 – 49.2 = 7.7MB でした!

まずまずじゃないですか〜?多い?多い?w

使えないパターン!

色々なサイト開いて検証してみましたが、大体は使えると思います!

twitter

SSL でアクセスしてると上の様に「このページには安全でないコンテンツが含まれます。」(Chrome で Twitter 開きました)って黄色いバーが出てきます。読み込むボタンを押して再度ブックマークレット使うと表示されたり、正常に表示されなかったり…。

外部ファイル読み込んでるのが駄目なのかなー?
とりあえず SSL では使えないと思っておいた方がいいですねw 今後 SSL 増えるだろうからどうにかせなあかーん!

正常に動かない!とかありましたら、お使いのブラウザとその動かなかった URL を @actywav まで教えていただけると助かります!

安全でない JavaScript をブロックする – Google Chrome ヘルプ

外部ファイルの内容!

http://actyway.com/bookmarklet/tenkomori.1-b.js
※外部ファイルのブルーの内容です

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
(function(){
	var url = location.href,
	tenkomori = document.createElement('div');
	tenkomori.id = 'tenkomori';
	tenkomori.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;}'+
	'#tenkomori a img{border:none;}'+
	'#tenkomori .social-buttons{margin:0;padding:15px 12px;height:68px;}'+
	'#page-tweets{height:202px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;}'+
	'.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{text-align:center;}'+
	'iframe.twitter-share-button{height:62px !important;}'+
	'</style>';
	document.body.insertBefore(tenkomori,document.body.firstChild);
 
	var hateb = document.createElement("script");
	hateb.src = "http://b.st-hatena.com/js/bookmark_button.js";
	document.body.appendChild(hateb);
 
	var tweet = document.createElement("script");
	tweet.src = "http://platform.twitter.com/widgets.js";
	document.body.appendChild(tweet);
 
	window.___gcfg = {lang: 'ja'};
	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);
 
	var evern = document.createElement("script");
	evern.src = "http://static.evernote.com/noteit.js";
	document.body.appendChild(evern);
 
	var tumblr = document.createElement("script");
	tumblr.src = "http://platform.tumblr.com/v1/share.js";
	document.body.appendChild(tumblr);
 
	if(typeof jQuery=='undefined'){
		var script = document.createElement('script');
		script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js";
		document.getElementsByTagName('head')[0].appendChild(script);
 
		var check = window.setInterval(function(){
			if (window['jQuery'] && window['jQuery']['fn'] && window['jQuery']['fn']['offset']){
				window.clearInterval(check);
				getTopsy();
			}
		},100);
	}else{
		getTopsy();
	}
 
	function getTopsy(){
		jQuery.getJSON('http://otter.topsy.com/trackbacks.json?url='+ url +'&perpage=20&callback=?',function(j){
			if(!j.response.total) return false;
			var r = j.response,
			t = r.total,
			l = r.list.length,
			shaped = "";
			for(var i=0;i<l;i++){
				var topsy = r.list[i];
				shaped += '<div class="t-partition"><div class="t-author">'+
				'<a href="'+topsy.author.url+'" target="_blank" class="t-photo_url"><img src="'+topsy.author.photo_url+'" width="32" height="32" /></a>'+
				'<a href="'+topsy.author.url+'" target="_blank" class="t-nick">@'+topsy.author.nick+'</a><br />'+
				topsy.author.name+'</div>'+
				'<div class="t-content">'+topsy.content+' <a href="'+topsy.permalink_url+'" target="_blank" class="t-date">'+topsy.date_alpha+'</a></div></div>';
			}
			if(t>20) shaped += '<div class="t-more"><a href="'+r.topsy_trackback_url+'" target="_blank">More Tweets</a></div>';
			jQuery("#page-tweets").prepend(shaped);
		});
	}
})();

内容は大したこと書いてないので詳しい説明は端折りますが大雑把にだと、外枠の DIV を作って各ボタンのスクリプトを読み込んで、そのページでの jQuery を確認して読み込んでなければ jQuery 読み込んで最後に Topsy を読み込んでるって流れです。

ソーシャル系ボタンのコードは公式の物をほぼ使っています。

本当は、jQuery 使わずに JavaScript のみで書きたかったのですが Twitter のログ表示部分で色々調べて、素直に jQuery 使うのが無難だなーと言う結果に落ち着きました。

Topsy の Otter API は Resources – otterapi – Topsy’s Otter API – Google Project Hosting を、jQuery の読み込みの確認は いつでも jQuery を読み込めるブックマークレット jQuerify | バシャログ。 の内容を参考にさせていただきました。ありがとうございます m(__)mペコリ

ほぼひとりごと

なんでしょ〜?今回のブックマークレットの内容は大したことやってないんですが、なんだかんだで時間かかりましたw 使う側からしたらどうってこと無いブックマークレットでも作者の努力やアイデアが詰まっているんだろーなーと、改めて現在使っているブックマークレットのことを考えたりw

やっぱり自分でもやってみないとなかなか分からない物ですね!みなさんもソーシャルてんこ盛りのコードを色々カスタマイズしたり使ってみてくださーい!好きに使ってくださーいw ソーシャルてんこ盛りの不具合や機能追加のご要望は @actywav まで〜\(^o^)/

ありがとうございます!

ブログを書く上で個人的に楽しいと思うのがブログでのコミュニケーションです!何気に記事で紹介されていたり、こっそり紹介したり!サプライズがあって楽しいものです〜!

で、この記事を紹介してくださったリンクを以下に書きたいと思います〜!
ありがとうございます〜m(__)m

http://webimemo.com/
ウェビメモ | WEBワザを頭にメモリーするためのブログ

すご〜く勢いがあってわたしも「大好き!」なウェビメモゴゴゴゴゴゴ ではなく、@xxmiz0rexx さんが これは便利!ついに複数SNSボタンをまとめて表示できるブックマークレットが誕生 という記事を書いてくださいました!ありがとうございます!!ウェビメモのデザインや文章かわいくて好きです!

http://sp00n.noob.jp/
THE NeXTSTEP

2011年3月からブログをされているそうです!SNSが増えすぎてポストに困ったらコレ!【ソーシャルてんこ盛り】が便利すぎる!の記事を書いてくださいました〜!ありがとうございます〜!

追記!2011年 12月 8日

ソーシャルてんこ盛り

公式ツイートボタンの見た目と高さが変わったみたいで上のイメージの様にボタンの位置がおかしくレイアウト崩れを起してしまっています!

公式ツイートボタンのiframe

公式ツイートボタンは JavaScript で iframe を表示させてボタン表示をしているのですが、その iframe にしていされている height が 85px に変わったみたいです。ボタン自体の高さは 62px でよさそうなので変更しました。

42
iframe.twitter-share-button{height:62px !important;}

公式ツイートボタンには、twitter-share-button と twitter-count-vertical の2個の class がありますので上記のような指定にしました。(適当ですw)