Vue는 facebook twitter 공유 예제를 사용합니다.

이 글에서는 주로 Vue를 Facebook, Twitter를 활용하여 공유하는 사례를 소개하고 참고용으로 올려드립니다.

vue 사용 공유 기록

고정 콘텐츠 공유 참조 문서

facebook 공유 문서

twitter 공유 문서

vue 사용

facebook 사용 공유

index.html을 찾아 코드를 추가

 <!-- 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>

사용

첫 번째 방법 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>

두 번째 방법 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) {}
   );
  },

twitter 사용 share

index.html 찾기 코드 추가

<!-- 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>

vue 페이지에서 사용

xxx.vue에서

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

javascript 추가 code

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

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

Vue는 활성 클릭 전환 방법을 구현합니다.

Vue.js 프로젝트 API 및 라우터 구성 분할 실습에 대한 자세한 설명

NodeJS 방법으로 되돌릴 수 없는 암호화 및 암호 암호문 저장을 구현합니다.

위 내용은 Vue는 facebook twitter 공유 예제를 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!