Vue utilise Facebook Twitter pour partager des exemples-js tutoriel-php.cn

Vue utilise Facebook Twitter pour partager des exemples

亚连

Libérer： 2018-05-30 14:19:21

original

4625 Les gens l'ont consulté

Cet article présente principalement l'exemple de Vue utilisant Facebook et Twitter pour partager. Maintenant, je le partage avec vous et le donne comme référence.

Enregistrer un partage d'utilisation de vue

Document de référence de partage de contenu fixe

document de partage Facebook

document de partage Twitter

vue utilise

facebook et utilise le partage

pour trouver index.html et ajoutez le 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>

Copier après la connexion

et utilisez

< en vue 🎜>La première façon 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>

Copier après la connexion

La deuxième façon 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) {}
   );
  },

Copier après la connexion

twitter utilise share

trouver index.html ajouter Le 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>

Copier après la connexion

est utilisé sur la page vue

est ajouté dans xxx.vue Le code

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

Copier après la connexion

est le mien. , j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

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"
  }
 );
}

Copier après la connexion

Vue implémente la méthode de commutation par clic actif

Explication détaillée de l'API du projet Vue.js et de la configuration du routeur split Practice

Méthode de NodeJS pour implémenter le cryptage irréversible et enregistrer le texte chiffré du mot de passe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!