Programing

Facebook 공유 버튼 및 맞춤 텍스트

lottogame 2020. 9. 3. 23:36
반응형

Facebook 공유 버튼 및 맞춤 텍스트


벽이나 뉴스 피드에 사용자 지정 텍스트를 게시하는 Facebook 공유 버튼을 만드는 방법이 있습니까?


우리는 다음과 같은 것을 사용합니다 [한 줄로 사용] :

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>

Facebook 공유에 사용자 지정 매개 변수를 제공하려면 링크 만 제공하는 것이 더 좋습니다. Facebook 은 공유중인 페이지에서 제목 + 설명 + 그림을 자동으로 가져옵니다. 페이스 북 API가 이러한 것들을 "도움"하기 위해 당신이 공유하고있는 페이지의 헤더에 다음과 같은 것들을 넣을 수 있습니다 :

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

여기에서 확인

페이지가 귀하의 통제하에 있지 않은 경우 AllisonC 가 위에서 공유 한 내용을 사용하십시오 .

팝업 modalview 유형 동작의 경우 :

자신의 버튼 / 링크 / 텍스트를 사용하면 다음과 같은 방법으로 모달보기 유형의 팝업을 사용할 수 있습니다.

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

여기서 twitterbtn-link와 facebookbtn-link는 모두 앵커의 ID입니다.


IJas에서 제공하는 링크에서 파생 된이 기능을 사용하십시오.

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

또는보다 제어 된 콜백 함수를 위해 FB JavaScript SDK를 사용하는 경우 최신 FB.ui 함수를 사용할 수도 있습니다.

참조 : FB.ui

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }

몇 가지 옵션이 있습니다.

  1. 표준 FB 공유 버튼을 사용하고 Open Graph API 및 페이지의 메타 태그를 통해 텍스트를 설정합니다 .
  2. Share 대신 FB.ui 의 stream.publish 메서드를 사용하여 런타임 에 URL, 제목, 캡션, 설명 및 썸네일을 제어 할 수 있습니다.
  3. 또는 적절한 매개 변수와 함께 http://www.facebook.com/sharer.php사용 하십시오 .

Facebook에서 제공하는 비동기 JavaScript SDK를 사용하고 해당 매개 변수 값을 설정하여 Facebook 공유 대화 상자를 사용자 지정할 수 있습니다.

다음 코드를 살펴보십시오.

<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: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Before copying and pasting the below code you must first initialize the SDK and set up jQuery library. Please click here to know a step by step how to set information on the same.


This is the current solution (Dec 2014) and works quite well. It features

  • open a popup window
  • self-contained snippet, doesn't require anything else
  • works with or without JS. If JS is disabled, the share window still opens, albeit not as a small popup.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$url var should be defined as the URL to share.


This is a simple dialog feed that Facebook offer's. Read here for more detail link


you could combine AllisonC's idea with window.open function: http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

And then on each link you call the openWin function with the right social net url.


Try this site http://www.sharelinkgenerator.com/. Hope this helps.

참고URL : https://stackoverflow.com/questions/6138780/facebook-share-button-and-custom-text

반응형