Y's note

Web技術・プロダクトマネジメント・そして経営について

本ブログの更新を停止しており、今後は下記Noteに記載していきます。
https://note.com/yutakikuchi/

超簡単! ボタン一つで登録可能なソーシャルメディアShareBookmarklet

概要

  • 上記アイコンのWebサービスに対してクリックや画面タッチで簡単にシェアができるBookmarkletを作成しました。
    • Webページには各ソーシャルサービスに対するシェアボタン/bookmarkボタンが無い場合が多い。シェアボタン/bookmarkボタンが無いとユーザは自分で各サービスのページに遷移し、内容を登録しなければならないが、それはとても面倒である。
    • 上記アイコンのサービスはそれぞれでシェア用のbookmarkletを作成している場合もあるが、サービスごとのbookmarklet管理はユーザの負担。
    • addthisというマルチシェアサービスには多サービスへの展開可能なbookmarkletが存在するが、アイコンが小さく使いづらいのとsmartphone非対応。

設定

  • 以下のいずれかの方法でbookmark登録してください。※対応しているブラウザはページ下部で確認してください。
javascript:void((function(){var%20s=document.createElement('script');s.setAttribute('src','http://mobiles-proxy.appspot.com/statics/js/multishare.js');s.setAttribute('id','multishare');document.body.appendChild(s)})())

動作イメージ

  • 閲覧しているWebページ上で登録したbookmarkletをクリックするとアイコンメニューがページ左に表示されます。

  • 各サービスアイコンのどれかをクリックします。下の画像はtwitterの例です。クリックするとtwitterの画面に遷移し、タイトルと短縮URLがつぶやきのエリアに入ります。その他のソーシャルサービスでも同じ様にbookmarkやshareが簡単にできます。

  • iPhoneでも同様の事が可能です。twitterのボタンをクリックするとmobileのtwitterページに遷移します。後は上の例と同じです。

シェア対象サービス

以下のサービスにシェアすることを可能としています。

動作確認

以下のブラウザで動作確認をしています。android端末は現在動作確認中です。

補足

  • URL短縮機能はtwitterのみ対応しています。
  • 追加してほしいソーシャルサービスがあればコメントに記述してください。またボタンアイコン配置のUIもちょっとイケテナイ感満載なので、改善希望もあればお願いします!