html 分享链接到facebook telegram twitter whatsapp

在网页中分享一个网页到facebook。

在线测试-分享网页到facebook

 

设置meta

      <meta property="twitter:url" content="https://yooul.com/share/share.php?post_uuid=9463af08-660d-11ea-9965-4ffecca286d7&amp;locale=zh-CN&amp;hide=0">
        <meta property="twitter:type" content="article">
        <meta property="twitter:title" content="1111">
        <meta property="twitter:description" content="1111">
        <meta property="twitter:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim">
        <meta name="twitter:image:src" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/1200/interlace/1|imageslim">

Facebook的meta tags

        <meta property="fb:app_id" content="748486512258997">
        <meta property="og:url" content="https://www.baidu.com"> //自定义分享的链接
        <meta property="og:type" content="article">
        <meta property="og:title" content="网页title">
        <meta property="og:description" content="111descripton">
        <meta property="og:image" content="https://qnidyooulimage.mmantou.cn/FmQeJquE5Q_oMbGD_Td0Q8BjoRve.jpg?imageView2/2/w/200/h/200/interlace/1|imageslim"> // 自定义图片

•   <meta property="og:url" content="https://www.eoway.cn/show/share/facebook.html" /> // 自定义需要分享的链接
    <meta property="og:type" content="article" />
    <meta property="og:title" content="这是一个网页title" />
    <meta property="og:description" content="这是网页的description" />
    <meta property="og:image" content="http://oss.eoway.cn/upload/files/2020-05-02-20-37-08-rn383.jpg" /> // 自定义图片

• 以上mata标签只需要编辑content的内容
• url不可以带参数

// 错误的url
https://www.eoway.cn/show/share/facebook.html?id=123

测试您的标记

设置好后，可以在调试器中检测网页设置

facebook-分享调试器

分享到facebook

var url = 'https://www.eoway.cn/show/share/facebook.html'

 

 

#### 分享功能的实现

打开新窗口并设置URL

let windowObjectReference = window.open();
windowObjectReference.location.href = 'https://www.facebook.com/sharer/sharer.php?u='+ url;
// 注意：url必须为meta设置的url

分享功能函数

share(type) {
    let windowObjectReference = window.open();
    // 把域名地址当做url的参数,需要encodeURIComponent编码
    let url = encodeURIComponent(this.share_link + '?code=') + this.userinfo.share_code + encodeURIComponent('DIF Investment and financial management to realize the dream of wealth!');
    
    // 根据分享的类型决定分享的URL
    if(type === 'facebook') {
        windowObjectReference.location.href = 'https://www.facebook.com/sharer/sharer.php?u=' + url;
    } else if(type === 'telegram') {
        windowObjectReference.location.href = 'https://t.me/share/url?url=' + url;
    } else if(type === 'twitter') {
        windowObjectReference.location.href = 'https://twitter.com/intent/tweet?text=' + url;
        // https://twitter.com/who 跳转到个人信息页面 可关注 who是用户名账号
    } else if(type === 'whatsapp') {
        windowObjectReference.location.href = 'https://api.whatsapp.com/send?text=' + url;
    }
}

代码实现了一个分享功能，用户可以选择不同的社交平台进行分享。通过使用`window.open()`方法，可以在新窗口中打开相应的分享链接，从而允许用户在所选的社交平台上分享指定的URL。