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

今やWebサイトやブログにとってSNSでページや記事をシェアしてもらう事はとても重要なことになっていますね。

当記事では、クリックするだけでページや記事を各SNSでシェアしてもらえるSNSリンクの作成方法を記します。対象SNSはFacsbook、Twitter、LINE、はてなブックマーク、ピンタレストとなっております。

Contents

SNSシェアボタン一覧
シェアボタンの動的生成
ボタンを画像にする
各SNSの公式アイコン

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>

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

ボタンを画像にする

上記のようにテキストのシェアボタンでは味気ないので、ボタンを画像にしてみます。
先ほどテキストにしていた部分をimgタグに置き換えるだけでOKです。（画像パスの部分は適宜お書換えください）

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

<style>
    .sns-share-links{
        display: flex;
        align-items: center;
        gap: 0px 50px;
    }
</style>

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

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

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

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

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

<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>