第三方分享最简（facebook,twitter,whatsapp...）
推广网站页面，并进行跟踪，怎么把链接分享到第三方平台呢
看看看看（热乎着呢）：直奔主题，主打一个快准狠
/**
* We use shorter names to reduce the final bundle size
*
* Properties:
* @u = url
* @t = title
* @d = description
* @q = quote
* @h = hashtags
* @m = media
* @tu = twitterUser
*/
export default {
baidu: 'http://cang.baidu.com/do/add?iu=@u&it=@t',
buffer: 'https://bufferapp.com/add?text=@t&url=@u',
email: 'mailto:?subject=@t&body=@u%0D%0A@d',
evernote: 'https://www.evernote.com/clip.action?url=@u&title=@t',
facebook: 'https://www.facebook.com/sharer/sharer.php?u=@u&title=@t&description=@d"e=@q&hashtag=@h',
flipboard: 'https://share.flipboard.com/bookmarklet/popout?v=2&url=@u&title=@t',
hackernews: 'https://news.ycombinator.com/submitlink?u=@u&t=@t',
instapaper: 'http://www.instapaper.com/edit?url=@u&title=@t&description=@d',
line: 'http://line.me/R/msg/text/?@t%0D%0A@u%0D%0A@d',
linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=@u',
odnoklassniki: 'https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@u&st.comments=@t',
pinterest: 'https://pinterest.com/pin/create/button/?url=@u&media=@m&description=@t',
pocket: 'https://getpocket.com/save?url=@u&title=@t',
quora: 'https://www.quora.com/share?url=@u&title=@t',
reddit: 'https://www.reddit.com/submit?url=@u&title=@t',
skype: 'https://web.skype.com/share?url=@t%0D%0A@u%0D%0A@d',
sms: 'sms:?body=@t%0D%0A@u%0D%0A@d',
stumbleupon: 'https://www.stumbleupon.com/submit?url=@u&title=@t',
telegram: 'https://t.me/share/url?url=@u&text=@t%0D%0A@d',
tumblr: 'https://www.tumblr.com/share/link?url=@u&name=@t&description=@d',
twitter: 'https://twitter.com/intent/tweet?text=@t&url=@u&hashtags=@h@tu',
viber: 'viber://forward?text=@t%0D%0A@u%0D%0A@d',
vk: 'https://vk.com/share.php?url=@u&title=@t&description=@d&image=@m&noparse=true',
weibo: 'http://service.weibo.com/share/share.php?url=@u&title=@t&pic=@m',
whatsapp: 'https://api.whatsapp.com/send?text=@t%0D%0A@u%0D%0A@d',
wordpress: 'https://wordpress.com/press-this.php?u=@u&t=@t&s=@d&i=@m',
xing: 'https://www.xing.com/social/share/spi?op=share&url=@u&title=@t',
yammer: 'https://www.yammer.com/messages/new?login=true&status=@t%0D%0A@u%0D%0A@d'
}
ps:html
<a class="button" v-for="share in format.shareList" :key="share.value" :class="share.icon" @click="toShare(item, share)">
<img :src="getAssetsFile(share.img)" alt="" />
</a>
//这里的item也是上一个结构循环的数据
//{
// "materialUrl": "https://www.hsb.co.id/",
// "updateDate": "2023-08-29 14:53:55",
// "materialType": 3,
// "updateUser": "admin",
// "title": "平台介绍",
// "topTime": null,
// "content": "444444444444444444444",
// "enabled": true,
// "shareCount": 4,
// "isTop": false,
// "createUser": "admin",
// "id": 33,
// "viewCount": 2,
// "createDate": "2023-08-29 14:53:55"
// },
ps:js(vue3)
const shareList= [
{
value: "facebook",
icon: "i-facebook",
url: "https://www.facebook.com/sharer/sharer.php",
img: "promote/facebook.webp",
},
{
value: "whatsapp",
icon: "i-whatsapp",
url: "https://api.whatsapp.com/send",
img: "promote/instagram.webp",
},
{
value: "twitter",
icon: "i-twitter",
url: "https://twitter.com/intent/tweet",
img: "promote/twitter.webp",
},
],
// 分享
const toShare = (item, share) => {
const popupWidth = 600;
const popupHeight = 480;
const left = window.innerWidth / 2 - popupWidth / 2 + window.screenX;
const top = window.innerHeight / 2 - popupHeight / 2 + window.screenY;
const popupFeatures = `scrollbars=no, width=${popupWidth}, height=${popupHeight}, top=${top}, left=${left}`;// 这里只是处理打开的窗口，可不看
let params = "",
shareUrl = encodeURIComponent(item.materialUrl),
title = encodeURIComponent(item.title);//这里你要分享到第三方的的页面和带过去的内容（这里最好处理一下用encodeURIComponent）
switch (share.value) {
case "facebook":
params = `?u=${shareUrl}&title=${title}`;
break;
case "whatsapp":
params = `?text=${title} ${shareUrl}`;
break;
case "twitter":
params = `?url=${shareUrl}&text=${title}`;
break;
}//分享到第三方的时候路径拼接
const url = share.url
if (device == "mobile") {
window.open(url + params);
} else {
window.open(url + params, "sharePopup", popupFeatures);
}
};
需求+分享效果：
问题：
1：facebook不能带过去title(暂时不知道为什么)
2：twitter页面的展示图同一个路径，参数有改动，可能捕捉不到，不能展示
3：其他第三方都比较容易分享有效果，但是一定要注意分享的页面head里面的东西最好全面一点（例如）
注意：所有需要内网才能访问的，twitter都是访问不到的，所以访问不了，不必惊讶
<title>Berhasil meraih profit!</title>
<meta name="description" content="HSB Investasi adalah broker forex terpercaya yang menawarkan trading forex, emas, perak, komoditas, indeks, dan saham AS. Terdaftar/berizin Bappebti." />
<meta name="author" content="HSB Investasi" />
//facebook
<meta property="og:site_name" content="HSB Investasi" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="id_ID" />
<meta property="og:url" content="https://www.hsb.co.id/share/trade/index.html" />
<meta property="og:title" content="Berhasil meraih profit!" />
<meta property="og:description" content="HSB Investasi adalah broker forex terpercaya yang menawarkan trading forex, emas, perak, komoditas, indeks, dan saham AS. Terdaftar/berizin Bappebti.">
<meta property="og:image" content="https://www.hsb.co.id/share/trade/images/bprofit.webp" />
<meta property="og:image:width" content="750" />
<meta property="og:image:height" content="400" />
<meta property="og:image:type" content="image/webp" />
//twitter
<meta property="twitter:type" content="image/webp" />
<meta property="twitter:url" content="https://www.hsb.co.id/share/trade/index.html" />
<meta property="twitter:image" content="https://www.hsb.co.id/share/trade/images/bprofit.webp" />
<meta name="twitter:image:src" content="https://www.hsb.co.id/share/trade/images/bprofit.webp">
<meta name="twitter:site" content="@hsb_investasi" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@greghvns">
4:能不能打开自带的app(这个与浏览器有关，google浏览器一般是可以的)
