[jQuery]SNSシェアボタンの自作について

WEB

2021.04.20 2019.06.04

アドオン使えないとか、各サービスのを使うとサイズが統一できないから自分でやりたいとか、そういうときの。

Contents

1 前提
2 中身
3 解説
4 まとめ

前提

とりあえず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とかに引っかかる可能性もあるっちゃある。
あんまり安心できないな