share 分享参考
在页面中添加twitter分享按钮
- 创建一个新的锚元素,使Twitter for Websites JavaScript能够发现该元素并增强指向Tweet按钮的链接。将href 属性值设置 为 https://twitter.com/intent/tweet， 以创建指向Twitter Web Intent编写器的链接。
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet">
Tweet</a>
- 通过自定义Tweet Web意向查询参数，预先填充Tweet文本并建议相关帐户 。
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=Hello%20world">
Tweet</a>
++注意：url中的符号需要转换为%+ASCII码值 如%20则表示url空格符++
- 使用data- *属性或JavaScript来自 定义 Tweet按钮参数。
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-size="large"
data-text="custom share text"
data-url="https://dev.twitter.com/web/tweet-button"
data-hashtags="example,demo"
data-via="twitterdev"
data-related="twitterapi,twitter">
Tweet
</a>
twttr.widgets.createShareButton(
"https:\/\/dev.twitter.com\/web\/tweet-button",
document.getElementById("tweet-container"),
{
size: "large",
text: "custom share text",
hashtags: "example,demo",
via: "twitterdev",
related: "twitterapi,twitter"
}
);
- demo:
<input id="btn" type="button" value="分享到 Twitter">
<script>
var btn = document.getElementById("btn");
function shareToTwitter(url, title='', w=600, h=400) {
return window.open('http://twitter.com/share?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(title), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
// 调用的方法
btn.onclick = function () {
shareToTwitter('https://www.baidu.com/', '哈哈哈,我要分享到 twitter 呀');
};
</script>
参考文档 https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview
步骤：
1.选择网址或主页
选取您要分享的网站网址或 Facebook 主页。
2.代码配置器
将网址粘贴到代码配置器，并调整“分享”按钮的 layout。点击 Get Code 按钮生成“分享”按钮代码。
https://developers.facebook.com/docs/plugins/share-button/#configurator
示例：
将代码示例复制并粘贴到您的网站。将 data-href 值调整为您网站的网址。然后使用 og:*** 元标记调整链接预览。og:url 和 data-href 应使用相同的网址。
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
- demo：
"http://www.facebook.com/sharer/sharer.php?u=" + url;
//如果只是单纯的想分享一个链接到 facebook 去,而不添加过多的自定义内容,则只需要将需要分享的url作为参数的形式传递到facebook网站即刻.为了增加体验,可以先弹出一个弹框
//示例
<input id="share_button" type="button" value="share to facebook"/>
<script type="text/JavaScript">
/**
* 分享到 facebook
* @param url
* @param title「无用可忽略」
* @param w
* @param h
* @returns {Window}
*/
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);
}
window.onload = function () {
document.getElementById('share_button').onclick = function () {
var shareUrl = "http://www.facebook.com/sharer/sharer.php?u=http://www.chinahub.guru/question/1";
popupwindow(shareUrl, 'facebook', 600, 400);
}
}
开放图谱对象调试器: https://developers.facebook.com/tools/debug/og/object/
未查询到instagram 官网API关于网页分享的接口，目前只提供ios与Android客户端分享功能，建议砍掉携带参数分享到instagram的需求或跳转到instagram让用户自行发布内容。
官方给出了相关解释
- Instagram is about your life on the go – we hope to encourage photos from within the app. However, in the future we may give whitelist access to individual apps on a case by case basis.
- We want to fight spam & low quality photos. Once we allow uploading from other sources, it's harder to control what comes into the Instagram ecosystem.
如一定要分享可采取通过openURL进入instagram的分享页（此url在官方API中没有）
使用 openURL 打开"instagram://library?AssetPath=assets-library" 可以跳转到instagram的分享页面（取相册中第一张图片）
注：这里需要用户同意相册权限
不推荐：
if let instagramURL = URL(string: "instagram://library?AssetPath=assets-library"), UIApplication.shared.canOpenURL(instagramURL) {
if #available(iOS 10.0, *) {
UIApplication.shared.open(instagramURL, options: [:], completionHandler: { (_) in })
} else {
UIApplication.shared.openURL(instagramURL)
}
} else {
// 提示没有instagram
}
email分享
- 分享给收件人：mailto后跟收件人邮箱
<a href="mailto:someone@example.com">Send email</a>
- 主题及内容
<a href="mailto:?to=&subject=mailto%20with%20examples&body=https%3A%2F%2Fen.patazon.net%2Fwiki%2FMailto">Share this knowledge...</a>
Tips: href中的符号需要转换编码格式 如utf8 空格应该编码成 %20
