Facebook 공유 API 단추 스타일 지정

Question

처음으로 사이트 공유 기능을 통합하려고하는데 버튼 모양을 변경하는 방법을 찾는 데 약간의 문제가 있습니다. 현재 내 코드는 다음과 같습니다

<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&version=v2.0"; 

     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

<div id="share"> 
    <div class="share-box"> 
     <div class="fb-share-button" data-layout="icon" data-href="https://developers.facebook.com/docs/plugins/"></div> 
    </div> 
</div> 

을 그리고이 같은 작은 이미지 생성 :이 버튼을 스타일을 시도, 너무 작 나는이 표시되는 버튼을 변경하려면

을 CSS를 통해 너비와 높이를 늘리면 작동하지 않습니다. 맞춤 Facebook 이미지를 설정하는 방법이 있습니까?

Answer 1

페이스 북 자바 스크립트 SDK를 사용하여 내가 원하는대로 스타일을 지정할 수있는 내 공유 버튼을 만드는 방법을 발견했습니다.

<div id="share"> 
    <div class="share-box"><div class="facebook-share">f</div></div> 
</div> 

이 마지막으로 당신의 자바 스크립트에 페이스 북의 공유 기능을 추가

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId  : 'your-app-id', 
     xfbml  : true, 
     version : 'v2.1' 
    }); 
    }; 

    (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"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

그런 다음 당신이 당신의 공유 버튼 역할을하고자하는 요소를 생성 첫째, 자바 스크립트 SDK 스크립트 바로 body 태그 후 페이스 북을 포함 (저는 jQuery를 사용하고 있습니다)

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