share 分享參考
在頁面中添加twitter分享按鈕
- 創(chuàng)建一個新的錨元素,使Twitter for Websites JavaScript能夠發(fā)現(xiàn)該元素并增強指向Tweet按鈕的鏈接。將href 屬性值設(shè)置 為 https://twitter.com/intent/tweet葬馋， 以創(chuàng)建指向Twitter Web Intent編寫器的鏈接匆光。
<a class="twitter-share-button"
>
Tweet</a>
- 通過自定義Tweet Web意向查詢參數(shù)鞭达，預(yù)先填充Tweet文本并建議相關(guān)帳戶 。
<a class="twitter-share-button"
>
Tweet</a>
++注意：url中的符號需要轉(zhuǎn)換為%+ASCII碼值 如%20則表示url空格符++
- 使用data- *屬性或JavaScript來自 定義 Tweet按鈕參數(shù)兄淫。
<a class="twitter-share-button"
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');
}
// 調(diào)用的方法
btn.onclick = function () {
shareToTwitter('https://www.baidu.com/', '哈哈哈,我要分享到 twitter 呀');
};
</script>
參考文檔 https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview
步驟：
1.選擇網(wǎng)址或主頁
選取您要分享的網(wǎng)站網(wǎng)址或 Facebook 主頁茫陆。
2.代碼配置器
將網(wǎng)址粘貼到代碼配置器，并調(diào)整“分享”按鈕的 layout悲幅。點擊 Get Code 按鈕生成“分享”按鈕代碼。
https://developers.facebook.com/docs/plugins/share-button/#configurator
示例：
將代碼示例復(fù)制并粘貼到您的網(wǎng)站站蝠。將 data-href 值調(diào)整為您網(wǎng)站的網(wǎng)址汰具。然后使用 og:*** 元標記調(diào)整鏈接預(yù)覽。og:url 和 data-href 應(yīng)使用相同的網(wǎng)址菱魔。
<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-
data-layout="button_count">
</div>
</body>
</html>
- demo：
"http://www.facebook.com/sharer/sharer.php?u=" + url;
//如果只是單純的想分享一個鏈接到 facebook 去,而不添加過多的自定義內(nèi)容,則只需要將需要分享的url作為參數(shù)的形式傳遞到facebook網(wǎng)站即刻.為了增加體驗,可以先彈出一個彈框
//示例
<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);
}
}
分享調(diào)試器 https://developers.facebook.com/tools/debug/sharing/
開放圖譜對象調(diào)試器: https://developers.facebook.com/tools/debug/og/object/
未查詢到instagram 官網(wǎng)API關(guān)于網(wǎng)頁分享的接口留荔，目前只提供ios與Android客戶端分享功能，建議砍掉攜帶參數(shù)分享到instagram的需求或跳轉(zhuǎn)到instagram讓用戶自行發(fā)布內(nèi)容澜倦。
官方給出了相關(guān)解釋
- 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" 可以跳轉(zhuǎn)到instagram的分享頁面（取相冊中第一張圖片）
注：這里需要用戶同意相冊權(quán)限
不推薦：
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>
- 主題及內(nèi)容
<a href="mailto:?to=&subject=mailto%20with%20examples&body=https%3A%2F%2Fen.patazon.net%2Fwiki%2FMailto">Share this knowledge...</a>
Tips: href中的符號需要轉(zhuǎn)換編碼格式 如utf8 空格應(yīng)該編碼成 %20
