分享到foocebook、twitter、pinterest功能

最新推荐文章于 2024-11-08 10:30:00 发布

面壁思过程

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量732

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/candy_mi/article/details/108670003

版权

参考官方api :

foocebook

https://developers.facebook.com/docs/sharing/webmasters#markup

twitter

twitter https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

pinterest https://developers.pinterest.com/docs/widgets/save/?

demo

foocebook跟twitter分享，你要分享哪个页面就在哪个页面增加元标记

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- facebook -->
    <meta property="og:url" content="./pint.html" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="文章标题" />
    <meta property="og:locale" content="en-US" />
    <meta property="og:image" content="http://candymi.cn/share/4.jpg">
    <meta property="og:image:width" content="670">
    <meta property="og:image:height" content="470">
    <meta property="og:description" content="文章描述" />
    <meta property="og:site_name" content="我的网站">

    <!-- twitter-->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="　文章标题" />
    <meta name="twitter:description" content="文章描述" />
    <meta name="twitter:url" content="./pint.html" />
    <meta name="twitter:image" content="http://candymi.cn/share/4.jpg" />


    <!-- pinterest-->
    <script type="text/javascript" async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
</head>

<body>

    <button class="btn1">
        facebook
    </button>
    <button class="btn2">
        twitter分享
    </button>
    <button class="btn3">
        pinterest分享
    </button>

    <button class="btn4">
        pinterest分享单张图
    </button>

    <a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark " data-pin-custom="true">
        pinterest用a标签分享的写法
    </a>


    <div class="pinterest-box">
        <div class="mate-left">
            <img src="http://candymi.cn/share/5.jpg">
        </div>
        <div class="mate-right">
            <img src="http://candymi.cn/share/4.jpg">
        </div>

        <!-- 加标记的 -->
        <div class="mate-left">
            <img src="http://candymi.cn/share/6.jpg" data-pin-url="./pint.html" data-pin-description="hhahah ">
        </div>
        <div class="mate-right">
            <img src="http://candymi.cn/share/7.jpg" data-pin-url="./pint.html" data-pin-description="xxxxxxxxxx">
        </div>
    </div>


</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js?1600077286"></script>
<script>

    $('.btn1').click(() => {
        let url1 = 'http://www.facebook.com/sharer.php?u=' + encodeURIComponent('./pint.html');
        let title1 = '&t=' + encodeURIComponent('　一个真正优秀的人，从来不会抱怨生活。');
        popupwindow(url1, title1, 600, 450)
    })

    $('.btn2').click(() => {
        let url2 = 'http://twitter.com/share/?url=' + encodeURIComponent('./pint.html');
        let title2 = '&text=' + encodeURIComponent('　一个真正优秀的人，从来不会抱怨生活。');
        popupwindow(url2, title2, 600, 450)
    })


    $('.btn3').click(() => {
        PinUtils.pinAny();  //上传全部
    })

    $('.btn4').click(() => {
        //上传一张图
        PinUtils.pinOne({
            media: 'http://candymi.cn/share/5.jpg',
            description: '图片描述',
            url:'http://candymi.cn/share'
        });
    })

    // 链接  标题  宽  高
    function popupwindow(url, title, w, h) {
        wLeft = window.screenLeft ? window.screenLeft : window.screenX;
        wTop = window.screenTop ? window.screenTop : window.screenY;
        var left = wLeft + (window.innerWidth / 2) - (w / 2);
        var top = wTop + (window.innerHeight / 2) - (h / 2);
        return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    }

</script>

</html>

其他分享

Linkein、facebook、twitter对应的分享接口和调试工具 - JonPan - 博客园