網頁平臺分享

時間  2019-12-07
標籤 網頁 平臺 分享 欄目 HTML 简体版
原文   原文鏈接

　　如今分享是一種很潮流的傳播方式，無論是在PC端仍是Moving端，無論是WeChat、QQZnoe、仍是Weibo，均可以將本身喜歡的文章或者信息分享給你們，來讓更多的人關注php

　　但對於本身分享給別人仍是別人分享給本身，能夠怎麼樣分享，正好在一個項目中遇到了這個問題，主要幾個分享機率比較高的渠道，下面一個一個說：html

1、QQ好友瀏覽器

　　將網頁內容分享給本身的QQ好友（據官網透漏，目前PC網頁分享，也就是js方式分享，沒有回調方法，暫時不支持）微信

var obj_QQ = {
        url: shareDara.url,  /*獲取URL，可加上來自分享到QQ標識，方便統計*/
        desc: '',   /*分享理由(風格應模擬用戶對話),支持多分享語隨機展示（使用|分隔）*/
        title: shareDara.title,   /*分享標題(可選)*/
        summary: shareDara.desc,    /*分享描述(可選)*/
        pics: shareDara.pic,   /*分享圖片(可選)*/
        flash: '',    /*視頻地址(可選)*/
        site: '',   /*分享來源 (可選) ，如：QQ分享*/
        sharesource: 'qq'
    };

效果：app

　　

2、QQ空間優化

　　將網頁內容分享給本身的QQ空間url

var obj_QZone = {
        url: shareDara.url,/*獲取URL，可加上來自分享到QQ標識，方便統計*/
        desc: '', /*分享理由(風格應模擬用戶對話),支持多分享語隨機展示（使用|分隔）*/
        title: shareDara.title,      /*分享標題(可選)*/
        summary: shareDara.desc,     /*分享描述(可選)*/
        pics: shareDara.pic,         /*分享圖片(可選)*/
        flash: '',            /*視頻地址(可選)*/
        //commonClient : true, /*客戶端嵌入標誌*/
        site: '',  /*分享來源 (可選) ，如：QQ分享*/
        sharesource: 'qzone'
    };

效果：spa

　　

3、分享給微信好友、微信朋友圈code

　　若是在PC端，經過js方式將信息分享到微信端，目前是經過連接地址，在微信端打開，而後進行分享視頻

var obj_WeChat = {
        url: shareDara.url,     /*分享URL*/
        title: shareDara.title  /*分享標題*/
    };

效果：

　　

4、分享到新浪微博

var obj_Weibo = {
        appkey: '2668171516',  /*用於發佈微博的來源顯示，爲空則分享的內容來源會顯示來自互聯網。(可選，容許爲空)*/
        title: shareDara.title,   /*分享時所示的文字內容，爲空則自動抓取分享頁面的title值(可選，容許爲空)*/
        url: shareDara.url,  /*將頁面地址轉成短域名，並顯示在內容文字後面。(可選，容許爲空)*/
        //source: 'bshare',
        retcode: 0,
        pic: shareDara.pic,    /*自定義圖片地址，做爲微博配圖(可選，容許爲空)*/
        ralateUid: '625200801',  /*轉發時會@相關的微博帳號(可選，容許爲空)*/
        searchPic: true,
        sharesource: 'weibo',
        count: '1',
        language: 'zh_cn'     /*語言設置(zh_cn|zh_tw)(可選)*/
    };

效果：

　　

以上就是基本分享代碼，能夠有些參數不是很全，可是基本參數夠用就行，下面把完整的代碼貼出來

//獲取頁面描述（description）
var meta = window.document.getElementsByTagName('meta');
var share_desc = '';
for (i in meta) {
    if (typeof meta[i].name != "undefined" && meta[i].name.toLowerCase() == "description") {
        share_desc = meta[i].content;
    }
}

//獲取頁面圖片，能夠多張，也能夠一張，看本身的需求
var shareDara = {
    pic: (function () {
        var pics = ''
        var num = 0;
        $("#topicContent > p img").each(function (i, k) {
            if (i < 1) {
                pics += $(k).attr('src');
                if (pics != '')
                    return pics;
            } else {
                if (pics != '')
                    return pics;
                pics += ',' + $(k).attr('src');
            }
        })
        return pics
    })(),
    title: (function () {
        return delHtmlTag($("#tTitle").html().trim());
    })(),
    url: location.href,
    desc: (function () {
        return delHtmlTag($("#topicContent > p").eq(0).html() == undefined ? "" : $("#topicContent > p").eq(0).html().trim());
    })()
}

//去掉全部的html標記  
function delHtmlTag(str) {
    return str.replace(/<[^>]+>/g, "").trim();
}

function ShareAll(type) {

    var obj_QQ = {
        url: shareDara.url,  /*獲取URL，可加上來自分享到QQ標識，方便統計*/
        desc: '',   /*分享理由(風格應模擬用戶對話),支持多分享語隨機展示（使用|分隔）*/
        title: shareDara.title,   /*分享標題(可選)*/
        summary: shareDara.desc,    /*分享描述(可選)*/
        pics: shareDara.pic,   /*分享圖片(可選)*/
        flash: '',    /*視頻地址(可選)*/
        site: '',   /*分享來源 (可選) ，如：QQ分享*/
        sharesource: 'qq'
    };

    var obj_QZone = {
        url: shareDara.url,/*獲取URL，可加上來自分享到QQ標識，方便統計*/
        desc: '', /*分享理由(風格應模擬用戶對話),支持多分享語隨機展示（使用|分隔）*/
        title: shareDara.title,      /*分享標題(可選)*/
        summary: shareDara.desc,     /*分享描述(可選)*/
        pics: shareDara.pic,         /*分享圖片(可選)*/
        flash: '',            /*視頻地址(可選)*/
        //commonClient : true, /*客戶端嵌入標誌*/
        site: '',  /*分享來源 (可選) ，如：QQ分享*/
        sharesource: 'qzone'
    };

    var obj_Weibo = {
        appkey: '266817',  /*用於發佈微博的來源顯示，爲空則分享的內容來源會顯示來自互聯網。(可選，容許爲空)*/
        title: shareDara.title,   /*分享時所示的文字內容，爲空則自動抓取分享頁面的title值(可選，容許爲空)*/
        url: shareDara.url,  /*將頁面地址轉成短域名，並顯示在內容文字後面。(可選，容許爲空)*/
        //source: 'bshare',
        retcode: 0,
        pic: shareDara.pic,    /*自定義圖片地址，做爲微博配圖(可選，容許爲空)*/
        ralateUid: '625200',  /*轉發時會@相關的微博帳號(可選，容許爲空)*/
        searchPic: true,
        sharesource: 'weibo',
        count: '1',
        language: 'zh_cn'     /*語言設置(zh_cn|zh_tw)(可選)*/
    };

    var obj_WeChat = {
        url: shareDara.url,     /*分享URL*/
        title: shareDara.title  /*分享標題*/
    };

    var s = [];

    if (type == 1) {    //朋友圈
        for (var i in obj_WeChat) {
            s.push(i + '=' + encodeURIComponent(obj_WeChat[i] || ''));
        }
        var wechathref = "http://xx.com/WeChatShareQR/index?" + s.join('&');
        winpop(wechathref, 500, 450);
    } else if (type == 2) {     //微信好友
        for (var i in obj_WeChat) {
            s.push(i + '=' + encodeURIComponent(obj_WeChat[i] || ''));
        }
        var wechathref = "http://xx.com/WeChatShareQR/index?" + s.join('&');
        winpop(wechathref, 500, 450);
    } else if (type == 3) {     //QQ好友
        for (var i in obj_QQ) {
            s.push(i + '=' + encodeURIComponent(obj_QQ[i] || ''));
        }
        var qqhref = "http://connect.qq.com/widget/shareqq/index.html?" + s.join('&');
        winpop(qqhref, 800, 600);
    } else if (type == 4) {     //QQ空間
        for (var i in obj_QZone) {
            s.push(i + '=' + encodeURIComponent(obj_QZone[i] || ''));
        }
        var qzonehref = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" + s.join('&');
        winpop(qzonehref, 800, 600);
    } else if (type == 5) {     //微博
        for (var i in obj_Weibo) {
            s.push(i + '=' + encodeURIComponent(obj_Weibo[i] || ''));
        }
        var weibohref = "http://service.weibo.com/share/share.php?" + s.join('&');
        winpop(weibohref, 800, 400);
    }
}

function winpop(url, iWidth, iHeight) {
    var openUrl = url;
    var iTop = (window.screen.availHeight - 50 - iHeight) / 2;
    var iLeft = (window.screen.availWidth - 30 - iWidth) / 2;
    window.open(openUrl, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=" + iWidth + ", height=" + iHeight + ", top=" + iTop + ",left=" + iLeft);
}

　　方法winpop是彈出一個瀏覽器標籤，也能夠在主窗口彈出，看本身的喜愛了，方法沒有怎麼優化，本身用的時候優化吧，

　　目前官網給出的文檔大部分只針對SDK的，js這塊沒有詳細說明，也多是我沒找到，若是有知道的也但願可以指出來，不勝感激！

做者：pengpeng
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程