アドオン使えないとか、各サービスのを使うとサイズが統一できないから自分でやりたいとか、そういうときの。
前提
とりあえずTwitter、Facebook、Line、はてな、Pocketでやる。
開いてるページのURL、ページタイトルを投稿する。
中身
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<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>
TwitterはURL・本文・ハッシュタグをやれるんで、もうちょいいじれる。
<li class="twitter"><a href="https://twitter.com/intent/tweet?url=https://www.google.com/&;text=Google&hashtags=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>
解説
要はaタグでシェアできるんで、各サービスに合ったパラメータをjQuery上で生成して上書きしてる。
jsが死んでる場合に対応するためにhtml上でもトップページ情報くらいは打っとけばまあいいのかなみたいな(サンプルではGoogleに飛ぶようにしてる)。
jsじゃなくても例えばphpとか、要素を引っ張ってこれる言語が使えるならそれで作れる。
まとめ
WPならアドオンでいいんだけどさ。
そればっかりの案件じゃないので考えとかんとね。
あとまあこれに限ってはjsで制御してるんで、Adblockとかに引っかかる可能性もあるっちゃある。
あんまり安心できないな
コメント