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

sns share buttonFrontend


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


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



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>






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

FacebookTwitterLINEはてなブログPin it





ボタンを画像にする

上記のようにテキストのシェアボタンでは味気ないので、ボタンを画像にしてみます。
先ほどテキストにしていた部分を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>






connaiconnai

各SNSの公式アイコン

上記SNSアイコンはすべて公式画像を使用しております。
各SNSアイコンがダウンロードできるリンクを貼っておきます。

Facebook

ロゴ | Facebook app | Brand Portal

Twitter

Twitterロゴ、ブランドガイドライン、ツイートツール

LINE

LINE APP ICON GUIDELINE

はてなブックマーク

はてなブックマーク - Hatena Brand Resources

ピンタレスト

Pinterest ブランド使用ガイドライン | Pinterest Business




以上、SNSのシェアリンクを設置する方法でした。

コメント

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