Vue uses facebook twitter to share examples-JS Tutorial-php.cn

Vue uses facebook twitter to share examples

亚连

Release： 2018-05-30 14:19:21

Original

4646 people have browsed it

This article mainly introduces the example of Vue using Facebook and Twitter to share. Now I share it with you and give it as a reference.

Record a vue usage share

Sharing reference document for fixed content

facebook sharing document

twitter sharing document

vue uses

facebook and uses sharing

to find index.html and add the code

 <!-- facebook 分享 -->
 <p id="fb-root"></p>
 <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 = &#39;https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.12&appId=你的APPID&autoLogAppEvents=1&#39;;
   fjs.parentNode.insertBefore(js, fjs);
  }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
 </script>

Copy after login

Use in vue

The first way is html

<p class="fb-share-button" data-href="http://dev.XXXX.io/" data-layout="button_count" data-size="small" data-mobile-iframe="true">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" 
class="fb-xfbml-parse-ignore">分享</a>
</p>

Copy after login

The second way is js

 facebook() {
  // 初始化  
   FB.init({
    appId: 你的appid,
    autoLogAppEvents: true,
    xfbml: true,
    version: "v2.12"
   });
   FB.ui(
    {
     method: "share",
     mobile_iframe: true,
     href: "http://dev.XXXX.io/?test=12345"
    },
    function(response) {}
   );
  },

Copy after login

twitter Use sharing

Find index.html and add the code

<!-- twitter 分享 -->
 <script>window.twttr = (function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
   if (d.getElementById(id)) return t;
   js = d.createElement(s);
   js.id = id;
   js.src = "https://platform.twitter.com/widgets.js";
   fjs.parentNode.insertBefore(js, fjs);
   t._e = [];
   t.ready = function (f) {
    t._e.push(f);
   };
   return t;
  }(document, "script", "twitter-wjs"));
 </script>

Copy after login

Use on the vue page

Add

<p class="twitter-share-button" id="container"></p>

Copy after login

javascript code in xxx.vue

twitter() {
 console.log(twttr)
 twttr.widgets.createShareButton(
  "http://dev.XXXX.io/?test=12345",
  document.getElementById("container"),
  {
   text: "分享测试",
   size: "large",
   hashtags: "example,demo",
   via: "twitterdev",
   related: "twitterapi,twitter"
  }
 );
}

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Vue implements active click switching method

Detailed explanation of Vue.js project API and Router configuration split Practice

NodeJS method to implement irreversible encryption and password cipher text storage

The above is the detailed content of Vue uses facebook twitter to share examples. For more information, please follow other related articles on the PHP Chinese website!