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

sns share buttonFrontend



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





connaiconnai

ボタンを画像にする

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






各SNSの公式アイコン

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

Facebook

ロゴ | Facebook app | Brand Portal

Twitter

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

LINE

LINE APP ICON GUIDELINE

はてなブックマーク

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

ピンタレスト

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




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

コメント

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