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

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

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

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

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

미리 감사드립니다.



답변

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

<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/ 에서 찾을 수 있습니다.


답변

페이스 북에서 제공하는 비동기 자바 스크립트 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">

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


답변

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 확인


답변

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


답변

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의 페이지에 오픈 그래프 메타 태그를 포함하십시오.

답변

자신의 특정 서버 또는 다른 페이지 및 이미지 버튼의 경우 다음과 같이 사용할 수 있습니다 (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>

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


답변