ひとり部長のひとりごと

社会人1年目で社内起業を始めたひとり部長がその経験を語ります。Mac関連もつぶやきます。映画のレビューはサブブログに移行しました。世の中の明るいニュースだけをまとめたエントリーも始めました。

見ているページのシェアボタンを作成するブックマークレットを作成しました+おまけ

追記

この記事はしょぼくなりmした。

最強のブックマークレットはこちらです↓

リンク先に飛ぶ前に共有したい

今回は、「ブックマークレットを作成するブックマークレット」の紹介です。 ブックマークレットって「今見ているページ」に対して行うものなので、基本的にこんなもの需要がありません。

しかし。

1つだけあるのです。

他のブログ記事やサイトを紹介するときのリンクカード、こいつにツイッターでシェアボタンをつけられたらと考えたことはありませんか?

要は、見ているページのシェボタンではなく、紹介した先のサイトにアクセスする前にリンク先のツイッターはてなブックマークができちゃうようにすること。

これが今日の目的です。

みんな忙しい

全部の紹介記事を見ている暇なんてない。だけど、ブログを書いている人は紹介したページも見て欲しい。 だから、「後で見る」機能として、今見ているページでリンク先のシェアをしたい。 ですよねー。

さっさとブックマークレット出せやという感じすが、まぁ待ってください。

Twitterシェアのブックマークレット

まずは基本的なところから行きましょう。 そもそもブックマークレットを知らないという人は、ググってください。マジで便利なので、この時点で知らなかった人はぜひ知ってください。難しいものでもなんでもないです。ブックマークのアドレスをコピペで書き換えるだけでいろんな機能が作れちゃうすぐれものです。

とりあえずツイッターの共有ボタンを使ってみましょう。

Twitterが開いて、今見ているページのタイトルとリンクがすでに記載された状態で表示されたはずです。 まぁこれだけでも便利。ブックマークにドラッグ&ドロップしてくだされば、いつでもどこでも好きなサイトのタイトルとURLをシェアすることができます。 ブックマークレットの記述はこんな感じ。

javascript:(function(){
  var title = document.title; 
  var url = document.location.href; window.location='twitter://post?message='+encodeURIComponent(title+url);
})();

だがしかし、こいつは何度もいうが「今見ているページ」にしか適応できない

リンク先のシェアができるボタン

そこで、こんなものを作った。 いつも僕の映画感想を陰ながら応援してくださっているマスクドにしおかさんの記事に登場してもらいましょう。

「更新を期待しているブログを2つ応援してみる - 働けおっさんブロガー」

ツイートする▶︎
はてブする▶︎

リンク先に飛ぶ前にツイートやブクマができちゃいます。、 というのも、 直接urlとタイトルを指定しているからなんですけど。

このリンクコードを生成するブックマークレットはこちらです

javascript:(function(){
    var title = document.title;
    var url = window.location.href;
    var card = '<a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\''+title+'%20'+url+'\');">ツイートする▶︎</a><br><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/'+url+'\');" target="_blank">はてブする▶︎</a>';
    window.prompt("コピー", card);
})();

そしてこいつが最終形態!!!!

というわけで、だったらその直接指定を記事紹介時に自動でできやしないかと考えたのがこちらですね。

まさにおれがやりたかったのはこういうことなんだよ!!!!

こんな風にシェアすることができちゃいます。最強。 ここからマスクドさんの記事に飛ぶことができるし、ツイートすることもできるし、はてブすることもできます。 最強。 この最強の「SNSシェアブックマーク付きブログリンクカード生成ブックーマークレット」の記述はこうだ!!!!!!

javascript:(function(){
    function productImg(){var pi = document.getElementsByTagName('meta'); for(i = 0; i < pi.length; i++) { if (pi[i].getAttribute("property") == "og:image") { return pi[i].getAttribute("content");}} return "";}
    var ogimg = productImg();
    var title = document.title;
    var desc = document.getElementsByName('description').item(0)?document.getElementsByName('description').item(0).content:document.location.href;
    var url = window.location.href;
    var lc = "position:relative;width:100%;min-height:70px;max-height:100px;border:2px solid #000;border-radius:4px;";
    var lcA = "display:block;width:100%;height:100%;text-decoration:none;color:#000;";
    var lcDivImg = "width:60px;height:60px;float:left;margin:5px 5px;";
    var lcDivImgImg = "width:60px;height:60px;";
    var lcCap = "max-height:90px;margin:5px 5px;overflow:hidden;";
    var lcCapTitle = "font-weight:bold;";
    var lcCaptitleA = "line-height:1.3rem;";
    var lcCapDesc = "font-size:80%;color:#444;";
    var lcCapDescA = "line-height:1.2em;";
    var tweetbtn = "position:absolute;top:5px;right:5px;width:20px;height:20px;";
    var twImg = "width:100%;height:100%;";
    var hatebu = "position:absolute;top:30px;right:5px;width:20px;height:20px;";
    var hatebuImg = "width:100%;height:100%;";
    var card = '<!--' + title + '-->\n<div style="'+lc+'"><div style="'+lcDivImg+'"><a style="'+lcA+'" href="'+url+'"><img style="'+lcDivImgImg+'" src="'+ogimg+'"></a></div><div style="'+lcCap+'"><div style="'+lcCapTitle+'"><a style="'+lcA+' '+lcCaptitleA+'" href="'+url+'">'+title+'</a></div><div style="'+lcCapDesc+'"><a style="'+lcCapDescA+'%20'+lcA+'" href="'+url+'">'+desc+'</a></div></div><div style="'+tweetbtn+'"><a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\''+title+'%20'+url+'\');"><img src="https://goo.gl/lFvqh6" style="'+twImg+'"></a></div><div style="'+hatebu+'"><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/'+url+'\');" target="_blank"><img src="https://goo.gl/yYRxpB" style="'+hatebuImg+'"></a></div></div>';
    window.prompt("コピー", card);
})();

めちゃくちゃ長いんだけど、これは結構試行錯誤の末のおまけ付きだ。

スタイルは自由に整えてくれたまえ。

では。

ああああああああああああああ疲れたあああああ!!!

絶対、需要ある!(確信