내 웹 사이트에 Facebook 공유 버튼을 추가하는 방법은 무엇입니까?

99

작동한다고 가정하지만 작동하지 않는 코드가 있습니다. 이것이 어쨌든 당신을 돕는다면 그것은 좋을 것입니다.

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

내 웹 사이트에 페이스 북 공유 버튼을 추가하고 싶습니다. 내 웹 사이트의 콘텐츠를 벽에 게시해야합니다. 공유하고 싶은 사람.

나는 많이 조사했지만 아무것도 얻지 못했습니다. 이걸 도와주세요.

미리 감사드립니다.

javascript  facebook  facebook-javascript-sdk  share  facebook-social-plugins 
— Sahibjot Singh
소스
2
— 로니 로이스 톤

답변:

252

모든 코드가 필요하지는 않습니다. 다음 줄만 있으면됩니다.

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

문서는 https://developers.facebook.com/docs/reference/plugins/share-links/ 에서 찾을 수 있습니다.

— asifrc
소스
7
종류 트윗 버튼 등으로하는 스타일 링크가 있었으면 좋겠어 ... 정말이 옵션을 좋아하세요
— Serj 세이건
104
그렇다면 링크 스타일을 지정하지 않으시겠습니까? 이 옵션을 확실히 선호합니다. 나는 내 디자인이 어떻게 보이는지 제어하는 ​​것을 좋아합니다.
— sheriffderek 2013
6
또한 이러한 방식은 페이지 속도를 저하시키는 facebook 정크 코드를 추가하지 않습니다. sharrre.com jquery 플러그인을 참조하면 모양을 쉽게 사용자 정의하고 여러 개의 소셜 "좋아요"버튼을 하나로 묶을 수 있습니다.
— pixeline 2013-10-12
3
예, 여전히 단순 공유 링크를 사용할 수 있습니다. 또한 모든 인기있는 소셜 미디어 사이트에 대한 간단한 링크를 만드는 데 도움이되는이 간단한 페이지를 확인하십시오. sharelinkgenerator.com
— pistol-pete
1
중요 사항 : 모바일에서이 아이디어는 Facebook 웹 사이트를 엽니 다 (FB 앱이 아님). 작은 (또는 큰) 사기.
— Ezra Siton
26

페이스 북에서 제공하는 비동기 자바 스크립트 SDK를 사용하면됩니다.

다음 코드를 살펴보십시오

FB Javascript SDK 초기화

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

참고 : 앱 ID를 페이스 북 AppId로 바꾸는 것을 잊지 마십시오. facebook AppId가없고 만드는 방법을 모르는 경우이 항목을 확인하세요.

JQuery 라이브러리 추가, Google 라이브러리 선호

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

공유 추가 대화 상자 (매개 변수를 설정하여이 대화 상자를 사용자 정의 할 수 있습니다.

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

이제 마지막으로 이미지 버튼 추가

<img src = "share_button.png" id = "share_button">

더 자세한 정보를 원하시면 여기 를 클릭하십시오

— Virat Gaywala-CSM
소스
7
... 이것을 Twitter의 초기화와 비교하십시오. 견과류.
— Michael
6
귀하의 접근 방식에는 앱 ID가 필요합니다.
— horseyguy
이것은 여전히 ​​매력처럼 작동합니다! 훌륭한 작품!
— Coding Freak
좋은!! 이해하기 쉬운. 그러나 사용자가 실제로 콘텐츠를 공유했는지 어떻게 알 수 있습니까? 추신 : 당신의 응용 프로그램을 사용하는 사람이 앱 authenciated 경우에만 response.error_message가 나타납니다
— 진주
14

Facebook 개발자 웹 사이트에서 공유 버튼에 대한 자세한 내용을 읽을 수 있습니다.

작업 JSFIDDLE

맞춤형 Facebook 공유 버튼 JSFIDDLE도 살펴보십시오.

여는 <body>태그 바로 뒤에 Facebook JavaScript SDK 코드 포함

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

그리고 Facebook 공유 버튼을 표시하려는 위치에 코드 아래에 배치하십시오.

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

여기에 이미지 설명 입력

작동하는 JSFIDDLE 확인

— 수 보드 굴 락스
소스
8
이 코드가 더 이상 작동하지 않을 수 있습니까? jsfiddle에서도
— erdomester
8
네,이 작업을 직접 수행하는 데 심각한 문제가 있습니다 ... 그냥 빈 div로 끝납니다.
— Michael
@erdomester 바이올린은 Chrome 또는 Firefox에 표시되지 않습니다. 샌드 박스 처리 된 iframe을 방지하는 브라우저 보안 때문입니다. Safari에서 jsfiddle을 열면 표시되어야하며 jsfiddle 외부에서 구현하면 다른 브라우저에 표시되어야합니다.
— JisuKim82
4

API 없이 이미지 를 공유 하고 하위 페이지에 대한 딥 링크를 사용하는 Facebook 공유의 경우 트릭은 이미지를 다음 과 같이 공유하는 것이 었습니다 .#picture=

mainUrlhttp://yoururl.com/ 

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});
— tq
소스
2

Facebook 로그인없이 대화 공유

링크를 공유하기 위해 share 메소드 매개 변수와 함께 FB.ui 함수를 사용하여 공유 대화 상자를 트리거 할 수 있습니다. 이 대화 상자는 URL에 대한 전체 리디렉션을 수행하여 JavaScript, iOS 및 Android 용 Facebook SDK에서 사용할 수 있습니다.

이 호출을 트리거 할 수 있습니다.

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

이 URL의 페이지에 오픈 그래프 메타 태그를 포함하여 Facebook에 다시 공유되는 스토리를 사용자 정의 할 수도 있습니다.

response.error_message는 앱을 사용하는 누군가가 Facebook 로그인으로 앱을 인증 한 경우에만 나타납니다.

또한 Javascript Facebook SDK를 사용하여 호출과 직접 링크를 공유 할 수 있습니다.

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}

  • app_id => 앱의 고유 식별자. (필수)

  • redirect_uri => 사용자가 대화 상자에서 버튼을 클릭 한 후 리디렉션 할 URL입니다. URL 리디렉션을 사용할 때 필요합니다.

  • display => 대화 상자가 렌더링되는 방법을 결정합니다.

URL 리디렉션 대화 상자 구현을 사용하는 경우 Facebook.com에 표시되는 전체 페이지 표시가됩니다. 이 표시 유형을 페이지라고합니다. iOS 또는 Android SDK 중 하나를 사용하여 대화 상자를 호출하는 경우 이는 자동으로 지정되고 장치에 적합한 디스플레이 유형을 선택합니다. JavaScript 용 Facebook SDK를 사용하는 경우 기본적으로 앱에 로그인 한 사용자의 경우 모달 iframe 유형으로 설정되고, Facebook.com의 게임 내에서 사용하는 경우 비동기로, 다른 모든 사용자에게는 팝업 창이 표시됩니다. 필요한 경우 JavaScript 용 Facebook SDK를 사용할 때 팝업 또는 페이지 유형을 강제 할 수도 있습니다. 모바일 웹 앱은 항상 터치 디스플레이 유형으로 기본 설정됩니다. 공유 매개 변수

  • href =>이 게시물에 첨부 된 링크. 메소드 공유를 사용할 때 필요합니다. 공유되는 스토리를 사용자 정의하려면이 URL의 페이지에 오픈 그래프 메타 태그를 포함하십시오.
— Somnath Muluk
소스
1

자신의 특정 서버 또는 다른 페이지 및 이미지 버튼의 경우 다음과 같이 사용할 수 있습니다 (PHP 전용).

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

이 스 니펫을 공유 할 수는 없지만 아이디어를 얻을 수 있습니다.

— DagicCross
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.