SNSのシェアリンクを設置する【動的生成も】【FB,Twitter,LINE,はてブ,ピンタレスト】

WEB制作



SNSシェアボタン一覧

シェアするページのURL』という部分にURLを埋め込むとそのページがSNSにシェアされます。

<!-- Facebook -->
<a href="//www.facebook.com/sharer/sharer.php?u=シェアするページのURL&t=" target="_blank" rel="nofollow noopener noreferrer">
    Facebook
</a>

<!-- Twitter -->
<a href="//twitter.com/intent/tweet?url=シェアするページのURL&text=" target="_blank" rel="nofollow noopener noreferrer">
    Twitter
</a>

<!-- LINE -->
<a href="//timeline.line.me/social-plugin/share?url=シェアするページのURL&text=" target="_blank" rel="nofollow noopener noreferrer">
    LINE
</a>

<!-- はてなブログ -->
<a href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer">
    はてなブログ
</a>

<!-- ピンタレスト -->
<a href="//www.pinterest.com/pin/create/button/?url=シェアするページのURL&media=シェアする画像のURL" target="_blank" rel="nofollow noopener noreferrer">
    Pin it
</a>





シェアボタンの動的生成

シェアボタンをユーザが押したときは、大抵は今開いてるページをシェアさせたいはずだと思います。
そういう時は下記のように書くといいと思います。

※シェアしたいページのURLの部分は空にしておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Facebook -->
<a class="js-sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer">Facebook</a>

<!-- Twitter -->
<a class="js-sns-link" href="//twitter.com/intent/tweet?text=&url=" target="_blank" rel="nofollow noopener noreferrer">Twitter</a>

<!-- LINE -->
<a class="js-sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer">LINE</a>

<!-- はてなブログ -->
<a class="js-sns-link" href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer">はてなブログ</a>

<!-- ピンタレスト -->
<a class="js-sns-link" href="//www.pinterest.com/pin/create/button/?url=&media=" target="_blank" rel="nofollow noopener noreferrer">Pin it</a>

<script>
    let url = location.href
    let snsLinks=$(".js-sns-link")
    for(let i=0; i<snsLinks.length; i++){
        let href=snsLinks.eq(i).attr('href');
	   //シェアページのURL上書き
        href=href.replace("u=","u="+url)     //facebook
        href=href.replace("url=","url="+url) //twitter,LINE,はてなブログ,ピンタレスト
        snsLinks.eq(i).attr('href',href);
    }
</script>






下記のデモで動きをご確認頂けます。

デモ
Facebook Twitter LINE はてなブログ Pin it









最後にコードを全文載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Facebook -->
<a class="js-sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer">Facebook</a>

<!-- Twitter -->
<a class="js-sns-link" href="//twitter.com/intent/tweet?text=&url=" target="_blank" rel="nofollow noopener noreferrer">Twitter</a>

<!-- LINE -->
<a class="js-sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer">LINE</a>

<!-- はてなブログ -->
<a class="js-sns-link" href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer">はてなブログ</a>

<!-- ピンタレスト -->
<a class="js-sns-link" href="//www.pinterest.com/pin/create/button/?url=&media=" target="_blank" rel="nofollow noopener noreferrer">Pin it</a>

<script>
    let url = location.href
    let snsLinks=$(".js-sns-link")
    for(let i=0; i<snsLinks.length; i++){
        let href=snsLinks.eq(i).attr('href');
	   //シェアページのURL上書き
        href=href.replace("u=","u="+url)     //facebook
        href=href.replace("url=","url="+url) //twitter,LINE,はてなブログ
        snsLinks.eq(i).attr('href',href);
    }
</script>

コメント

タイトルとURLをコピーしました