アドオン使えないとか、各サービスのを使うとサイズが統一できないから自分でやりたいとか、そういうときの。
前提
とりあえずTwitter、Facebook、Line、はてな、Pocketでやる。
開いてるページのURL、ページタイトルを投稿する。
中身
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> </head> <body> <script> $(function(){ var pageUrl = $(location).attr('href'); var pageTtl = $('title').html(); var hrefTwitter = 'https://twitter.com/intent/tweet?url='+pageUrl+'&text='+pageTtl; var hrefFacebook = 'https://www.facebook.com/sharer.php?src=bm&u='+pageUrl+'&t='+pageTtl; var hrefLine = 'https://line.me/R/msg/text/?'+pageTtl+'%0A'+pageUrl; var hrefHatena = 'https://b.hatena.ne.jp/add?mode=confirm&url='+pageUrl; var hrefPocket = 'https://getpocket.com/edit?url='+pageUrl+'&title='+pageTtl; $('ul li.twitter a').attr('href',hrefTwitter); $('ul li.facebook a').attr('href',hrefFacebook); $('ul li.line a').attr('href',hrefLine); $('ul li.hatena a').attr('href',hrefHatena); $('ul li.pocket a').attr('href',hrefPocket); }); </script> <ul> <li class="twitter"><a href="https://twitter.com/intent/tweet?url=https://www.google.com/&text=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">twitter</a></li> <li class="facebook"><a href="https://www.facebook.com/sharer.php?src=bm&u=https://www.google.com/&t=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">facebook</a></li> <li class="line"><a href="https://line.me/R/msg/text/?Google%0Ahttps://www.google.com/" target="_blank" rel="noopener noreferrer">LINE</a></li> <li class="hatena"><a href="https://b.hatena.ne.jp/add?mode=confirm&url=https://www.google.com/" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">はてな</a></li> <li class="pocket"><a href="https://getpocket.com/edit?url=https://www.google.com/&title=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">Pocket</a></li> </ul> </body> </html> |
解説
要はaタグでシェアできるんで、各サービスに合ったパラメータをjQuery上で生成して上書きしてる。
jsが死んでる場合に対応するためにhtml上でもトップページ情報くらいは打っとけばまあいいのかなみたいな(サンプルではGoogleに飛ぶようにしてる)。
jsじゃなくても例えばphpとか、要素を引っ張ってこれる言語が使えるならそれで作れる。
まとめ
WPならアドオンでいいんだけどさ。
そればっかりの案件じゃないので考えとかんとね。
あとまあこれに限ってはjsで制御してるんで、Adblockとかに引っかかる可能性もあるっちゃある。
あんまり安心できないな
コメント