Как стилизовать кнопки обмена Facebook и Twitter?

Question

Я добавил кнопку общего доступа в Facebook и работает отлично. Тем не менее, я хочу настроить стиль кнопки и не работает. Я попытался стилизовать кнопку с помощью внешнего файла style.css, вызвав классы, которые я нашел с помощью Fire Bug, но когда я укажу свой собственный стиль с использованием этих классов, ничего не происходит.

Это как мой код выглядит:

HTML:

<div class="fb-share-button" data-href="http://localhost/dfs/jersey.php" data-layout="button_count"></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> 

Может кто-нибудь помочь мне, пожалуйста?

У меня также есть проблема с моей кнопкой Twitter.

Answer 1

Вы не можете, вы можете использовать только кнопку, предоставленную самим Facebook. Если вы нашли способ сделать это так, вы все еще не разрешено, как указано в Platform Policy

Что касается Twitter, увидеть этот пост here

Answer 2

Я нашел этот пост слишком http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/. Нельзя изменять эти кнопки.

Answer 3

Вы, безусловно, можете создать свои собственные кнопки Facebook (и Twitter) ... Я сделал это сам.

я стиль моих кнопку Facebook следующим образом:

1. Я создал подразделение стиль моей кнопки Facebook.
2. Я разместил атрибут <a>provided by Facebook вокруг моей кнопки Facebook div.

Примечание: Я не использовал div предоставленный Facebook, и я не нужно использовать какие-либо из data атрибутов для моей доли ссылку на Facebook. Я не слишком уверен, как вы собираетесь добавлять такие атрибуты.

Для Twitter, я использовал аналогичный метод:

1. Я создал подразделение стиль моей кнопки Twitter.
2. Я разместил атрибут <a>provided by Twitter вокруг моей кнопки Twitter div.
3. Я удалил класс «twitter-share-button» из атрибута Twitter <a>, чтобы удалить стиль кнопки, предоставленный Twitter.
4. Я использовал метод, описанный here, чтобы добавить необходимые данные к моей кнопке (например, текст для включения в общий твит).

Код будет выглядеть примерно так:

... 

<style> 

    .facebookButton { 
     /* Style Button */ 
    } 

    .twitterButton { 
     /* Style Button */ 
    } 

</style> 

... 

<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"> 
    <div class="facebookButton">Share</div> 
</a> 

<a href="https://twitter.com/share?url=http%3A%2F%2Fyourwebsite.com%2F&text=Youre%20Text%20Here%20" target="_blank"> 
    <div class="twitterButton">Tweet</div> 
</a> 

... 

Если вам нужна дополнительная помощь по как стилизовать кнопки социальных средств массовой информации, я предлагаю посетить this w3schools link.

Примечание: глядя на link от Osman, я не вижу ничего в разделе социальных плагинов Facebook, в котором говорится, что нам не разрешено стилизовать кнопку общего доступа Facebook. Однако, Возможно, я не захожу в нужное место.

Последнее примечание: это не относится к ОП, но для всех, кто читает этот ответ, не забудьте предоставить необходимые , предоставленные Facebook и Twitter, чтобы сделать функциональные кнопки!