Укладка кнопки Facebook share API

Question

Я пытаюсь интегрировать общий доступ к Facebook на сайте в первый раз, и у меня есть небольшая проблема, пытающаяся выяснить, как изменить внешний вид кнопки. В настоящее время мой код выглядит следующим образом:

<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

Я нашел решение, которое включает использование javascript-SDK для создания моей собственной кнопки совместного доступа, которую я могу использовать по своему усмотрению. Во-первых, включить яваскрипта SDK скрипт сразу после тега тела в Facebook:

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

Затем создать элемент, который вы хотите работать в качестве кнопки доля:

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

Наконец добавить функцию доли facebook в вашем JavaScript (Я использую jQuery)

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