instagram facebook twitter分享

2019-11-09 本文已影响0人飞过的沙

share 分享参考

twitter

在页面中添加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

facebook

步骤：

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/sharing/

开放图谱对象调试器: https://developers.facebook.com/tools/debug/og/object/

参考资料 https://developers.facebook.com/docs/sharing/web

instagram

未查询到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