0

그래서 나는 Facebook-Social-Button-Plugin페이스 북 소셜 버튼 플러그인

에 페이스 북에서 제공하는이 플러그인을 통합하는 데 시간을 위해 노력하고있다 그리고 거기에 심지어 행동에 그것을보고, 주어진 코드를 복사/붙여 넣기하는 언급했다 : -

<html> 
<head> 
<title>Your Website Title</title> 
<!-- You can use Open Graph tags to customize link previews. 
Learn more: https://developers.facebook.com/docs/sharing/webmasters --> 
<meta property="og:url"   content="http://www.your-domain.com/your-page.html" /> 
<meta property="og:type"   content="website" /> 
<meta property="og:title"   content="Your Website Title" /> 
<meta property="og:description" content="Your description" /> 
<meta property="og:image"   content="http://www.your-domain.com/path/image.jpg" /> 
</head> 
<body> 

<!-- Load Facebook SDK for JavaScript --> 
<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/sdk.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<!-- Your share button code --> 
<div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count"> 
</div> 

</body> 
</html> 

하지만 내가하지 실행중인 웹 서버에 그것을 얻을 필요가 같이 그래서 내가 뭔가를 놓치고 또는이이 플러그인에 문제있는 페이지에 아무것도 표시되지 일부에서는 localhost 또는이 기능을 사용하려면 fb에서 응용 프로그램을 만드는 것과 관련이 있습니다.


그리고 그래 내가 laravel 프레임 워크 내 웹 응용 프로그램을 구축하고 나의 로컬 호스트에 따라 올바른 메타 속성 및 데이터 href가 퍼팅 시도했습니다. 당신이 당신에게 데이터를 추가하고 클릭하면

+0

브라우저 콘솔의 모든 오류/경고/정보? localhost는 서버가없는 브라우저에서 html 파일을 열지 않는 한 괜찮습니다. 하지만 당신은 확실히 그것에 대한 애플 리케이션을 생성하고 js SDK 코드에 애플 리케이션 ID를 포함해야합니다. – luschn

+0

아, 예, 저는 FB API를 신뢰 했으므로 콘솔을 점검하지 않았지만, 여기에 문제가 있습니다. 'GET file : //connect.facebook.net/en_US/sdk.js net :: ERR_FILE_NOT_FOUND' 테스트를 위해 아무 것도 추가하지 않고 코드를 붙여 넣은 후 복사하는 이유는 궁금합니다. – Drazxier

+0

이 코드는 브라우저에서 'http : //'또는'https : // '를 통해 호출하는 웹 사이트에서 사용하기위한 것입니다. '//'로 시작하는 URL은 protocol-relative입니다. 즉, 페이지 자체를 요청하는 데 사용 된 동일한 프로토콜을 사용하여 완료됩니다. 물론 (로컬) 웹 서버를 통해 "적절하게"가 아니라 로컬 파일 시스템을 통해 페이지를 테스트하는 경우 물론 작동하지 않습니다. – CBroe

답변

1

코드를 시도하고 당신이 할 GET 코드 버튼을 클릭하여 코드를 생성하지만 경우, VM114 sdk.js:99 Uncaught Error: invalid version specified 복사 할 의미 및 붙여 넣기되지 않은 자신의 코드 또는 예에 오류 것 같다 오류 보인다

connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=XXXXXXXXXX 

당신은 로컬 호스트의 서버를 시작하거나 라이브 서버에 넣어해야

+0

그래, 나는 페이스 북에 연결하기 위해 APP와 APP ID를 사용해야 만했지만, 문서에는 그것에 관해 쓰여진 것이 없다. – Drazxier

0

가 다시

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Share</a></div> 

이 방법을 사용해보십시오이 마크 업을 줄 버튼 "코드 가져 오기".

+0

나는이 코드를 이미 시도해 봤지만 성공했다.하지만 공유 템플릿을 사용자 정의 할 수 있도록 메타 태그를 구현하고 싶다. – Drazxier

2

을 작업 : 당신의 AppID와 다른 URL을 포함하고 버전이 같이 보입니다 약간 다른 코드를 얻을 , 또는 작동하지 않습니다. 주석에 언급 된 오류 메시지는 HTML 파일을 직접 열려고 시도했음을 알려줍니다.

또한 URL (https://connect.facebook.net...)에 https를 추가 할 수 있지만 대신 localhost에서 서버를 사용합니다. 또한 OG 태그를 작동 시키려면 공개로 사용할 수 있어야합니다 (MUST). Facebook은 서버에서 데이터를 구문 분석 할 수 있어야합니다.

, BTW 당신은 ​​항상 앱을 사용하고 앱 ID를 추가해야합니다 - 발전기의 코드를 사용 :이 도움이하지만 난 텍스트가없는 사용자 정의 공유 링크를 만들기 위해 시간 동안 고군분투 경우 https://developers.facebook.com/docs/plugins/share-button

+0

음 ... 나는 당신이 무엇을하는지 모르지만 실제 서버에서 사용해보십시오. 내 편집 내용을 읽으려면 어쨌든 OG 태그를 작동시키기 위해 실제 편집이 필요합니다. – luschn

+0

뭔가 잘못 서버에 있습니다. 그것은 단지 "localhost"가 아닌 프로토콜을 추가해야합니다 : //connect.facebook.net/en_US/sdk.js는 자동적으로 https://connect.facebook.net/en_US/sdk.js가 될 것입니다. – luschn

+0

나는 무엇이 잘못되었는지 궁금합니다. 내가 다시 시도하고 이번에는이 오류'sdk.js : 99 Uncaught Error : invalid version specified'이 발생했습니다. – Drazxier

1

확실하지 않음 단지 사용자 정의 이미지와 근무 방식이었다 :

  • 최고 "페이스 북 - 사회 - 버튼 - 플러그인"

  • 추가의 게시물에 나와있는 링크에서 버튼 구성 프로그램의 코드를 복용 나를 조정했다. 타 데이터가 CSS를 다시 쓰기 피규

  • 아래에 보여

    `.fb 공유 버튼, .fb_iframe_widget, #facebook { 폭 :! 70 픽셀 중요합니다; 신장 : 70px! 중요; 여백 : 0 자동; margin-top : -46px! important; 배경 : url (../ img/like.png) no-repeat! important; background-size : contains! important; }

    .fb- 공유 버튼 a { 너비 : 70px; 신장 : 70px; }

    .fb_iframe_widget span { 디스플레이 : 인라인 블록; 위치 : 상대적; vertical-align : bottom; 너비 : 70px! important; 신장 : 70px! 중요; 텍스트 정렬 : 양쪽 맞춤; }

    .fb_iframe_widget iframe { 위치 : 절대; 너비 : 70px! important; 신장 : 70px! 중요; }

    .fb_iframe_widget iframe #facebook .inlineBlock { 디스플레이 : 인라인 블록; 줌 : 1; 배경 : 투명! 중요; 너비 : 70px! important; 신장 : 70px! 중요; }

    .2tga._3e2a { background : transparent! important; 색상 : 투명! 중요; border-radius : 35px! important; 너비 : 70px! important; 신장 : 70px! 중요; }

    경로 [속성 스타일] { fill : transparent! important; 앵커의 "공유"를 제거 }`

  • 는하거나

  • 옵션 변경 (내 배치는 단지 그림이었다) : 당신이 인용 텍스트를 표시하려면 단지 같은 링크의 끝에 추가 이

(당신은 또한 제목과 같은 링크의 설명을 변경할 수 있습니다)

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse&quote=here+comes+the+quote

- 선택 2 :/공유 팝업으로 링크를 열려면, onclick을 window.open 추가 functi 앵커에게

텍스트없이 팝업 및 견적 전체 사업부 예 :

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse&quote=here+comes+the+quote','popup','width=600,height=500'); return false;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse&quote=here+comes+the+quote"></a></div> 

(데이터 크기 및 데이터 레이아웃은 CSS를 덮어하지 중요한 원인이다) 그것을하는 더 좋은 방법이있다라고 확신한다. 그러나 나는 아무것도 발견 할 수 없었다! FB.ui로 시도했지만 작동하지 않았습니다.

이 정보가 도움이 되었기를 바랍니다.

Button looked like this

관련 문제