Twitterの共有ブックマークレットをHTTPSなサイトでも使えるように

(この記事は2015年7月14日に追記しています。)

Twitterへの共有は公式ブックマークレットを使っている管理人です。

共有ブックマークレット | Twitter Developers https://dev.twitter.com/docs/share-bookmarklet/translated/japanese


見ているページをTwitterに共有したいときに使うものです。今では多くのサイトに共有ボタンが設置されていて、TwitterやFacebookならほぼ困ることはない状況だと思います。それでも無いサイトは有ります。また設置されたボタンはサイトオーナーの裁量でtwitterアカウントが入るようにしたり、ハッシュタグを追加していたりします。当ブログでもボタンは記事下にseesaaブログのものとzenbackのものが設置してあります。zenbackのものはzenback経由だとわかるようになっています。

私はシンプルに記事ページのタイトル(だいたいサイト名も入っている)とそのページのアドレスが共有できたらいいので、公式のブックマークレットを使って投稿しています。(twitterアカウントよりサイト名がわかることのほうが重要だと思っている。)iPadやiPhone含めどのブラウザにも登録してあります。Androidは共有機能が優秀なのでそちらを使いますが。


さて本題へ。

Twitter公式ブックマークレットがhttps接続のページでは機能しない


メジャーなSNSやGoogleなどではhttps接続をデフォルトにすることが増えてきました。共有したいページでもhttpsのことが極稀にあります。そんな時に遭遇する問題があります。Twitterへのブックマークレットでの共有がうまくいかないのです。具体的には共有するページのタイトルとアドレスが取得できずに共有用の小窓が開きます。

こんな問題があって毎度イライラしていました。はじめは理由が分からず、困ったなあという感じでしたが何度か遭遇し、共通点に気が付きました。問題の解決はしようともせずに、そういうもんかと諦め手作業でコピーし貼り付けて共有していました。昨日まで。それが昨日ふっと気がついてスクリプト内部のアドレスをhttpではなくhttps読み込みにすればいいんじゃないのと。httpsなサイトで一部httpでひっぱってくるコンテンツがあるとブラウザに警告されちゃうっていうのの連想で。これでうまくいった。

コードを書き換える

やり方は簡単ですぐできます。

各自で編集して欲しい。私が配布する形にはしたくないので。


これが元のブックマークレット。
javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());

この中にhttp://で始まるアドレスがあるわけだけど、そのうち後ろ側のアドレス(http://platform.twitter.com/bookmarklets/share.js?v=1)をhttpsに書き換えてやるとhttpsなサイトでもブックマークレットから共有ができるようになります。
javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='https://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());


これで大丈夫。

in English



problem: twitter's official bookmarklet 'Share on Twitter' doesn't work on https webpage. blank form popups, unable to get title and url.

how to solve:
javascript code of the bookmarklet should also be compatible with https. that solves. no need to work with code. simply change the address. just one "s".

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());


inside the code, there are two "http://"s and the latter is the thing. change the url to begin with "https://".

done.

---これより下が2015年7月14日追記部分---

公式のブックマークレットでHTTPSのページもうまく使えるようになってます



久しぶりにブックマークレットのページを覗きに行くと中身が変わっていました。大きくは変わっていませんでしたが、というかほぼ同じですが、上に書いたような変更が入っていました。この記事を書いた理由であるhttpsのページでの動作を改善する目的で変更されたのではと考えています。

ちなみにブックマークレット配布しているページのアドレスも若干変わっていました。

Share Bookmarklet | Twitter Developers : https://dev.twitter.com/web/bookmarklet


今回配布されているブックマークレットの中身がこちらです。

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('https://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='https://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());


この記事を最初に書いたときには公式配布のコード内のアドレスはどちらもhttp://でした。私が改変を加えたのは2つある内の後のほうでした。なぜ両方じゃなかったかというと、当時2つともhttpsに変えて試したのですが、それではポップアップする画面が出てこなくなったためにあのような変更にしていました。おそらくhttpsでの利用には対応していなかったのでしょう。

今回チェックした中身はどちらもhttpsでアクセスするようになっていて、きちんと動作するようになっていることから裏側で変更がなされhttpsでの利用にも対応がされたのでしょう。

セキュリティやプライバシーへの意識からhttpではなくhttpsを使ったサイトは増えていますし、twitter自身もそうであるようにユーザーがログインして使うようなサービスはhttpsが基本となってきています。ニュースサイトの記事などはhttpが多いですが、youtubeやtwitterなどのCGMコンテンツを共有する場合はhttpsだからツイートできないといったことが多かった。これがtwitter側で問題と認識され対応したということでしょう。小さな話ですが。

これで問題はなくなる

以前の改変は解決策のように書いてありますが、httpsのページを共有するときに一度目ではタイトルやアドレスが取得できずに2、3度試さないとうまくいかないということも多かった。100%使えないよりはよかったけど、完璧に動いてストレスがなかったわけでもなかった。今回のブックマークレットは、まだ少しの間しか使ってませんが、正しく動作しているように見えます。少なくとも改変版よりもいいと思いますので、今後は公式のものをそのまま使うのがいいと思います。

あとtwitter社さんへ

小さな話をもう一つ。

tweetbutton01.png

普通に使う分には1番のブックマークレットをドラッグして使えばいいと思います(中身は読みにくい)。2番は中身が読みやすくなってますがひとつ実体参照がうまく行かず左に開いた不等号>であるべきところが>になってます。単純な実体参照のミスがあるのでtwitterの中の人はここは直すべきだと思います(だけどずっと前からこうだった気がするので、気付くことはないと思う)。コピペして既存のブックマークレットの中身に上書きしようとすると上手く動かないので注意。

これで追記終わり。たぶんもうこの記事に追記しなくていいと思います。


この記事へのコメント