> 웹 프론트엔드 > JS 튜토리얼 > Vue는 facebook twitter 공유 예제를 사용합니다.

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

亚连
풀어 주다: 2018-05-30 14:19:21
원래의
4590명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿