CODEWITHSUNDEEP
javascriptfacebookfacebook-javascript-sdk
Luis
Luis

Reputation: 437

error while trying to customize a facebook share button

I wanted to customize a facebook share button, then I tried this:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v6.0"></script>


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

But this generate a button that I can not customize, I already have a facebook icon with css effects. Then I try this with my icon:

<div id="fb-share-button">

    <a href="#" target="_blank" class="Facebook">
        <div class="inside">
            <i class="fa-facebook" style="color:#848484;font-size:16px;width:44px;height:44px;-webkit-border-radius: 50% 50% 50% 50%;-moz-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;line-height:44px;border-width:1px; border-style:solid;border-color:#848484;text-align:center;"></i>
            <div class="desc">Facebook</div>
        </div>
    </a>
</div>

<script>

var fbButton = document.getElementById('fb-share-button');
var url = window.location.href;

fbButton.addEventListener('click', function() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + url,
        'facebook-share-dialog',
        'width=800,height=600'
    );
    return false;
});

</script>

This works, but the problem is that it generates a warning on my browser, about popups:

enter image description here

What can I do to avoid that warning? thank you.

Upvotes: 0

Views: 122

Answers (2)

Luis
Luis

Reputation: 437

The answer is to have an app registered on facebook: https://developers.facebook.com/apps/ Create your app to get an app id. Also don't forget to add your main domain in your settings. Then copy this code on your site:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'XXXXXXXXX',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v6.0'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/de_DE/sdk.js"></script>

<script>
    $("#fb-share-button a").click(function(e){
        e.preventDefault();
        var url = window.location.href;

        FB.ui({
            method: 'share',
            href: url,
        }, function(response){});
    });
</script>

html:

<div id="fb-share-button">

    <a href="#" target="_blank" class="Facebook">
        <div class="inside">
            <i class="fa-facebook" style="color:#848484;font-size:16px;width:44px;height:44px;-webkit-border-radius: 50% 50% 50% 50%;-moz-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;line-height:44px;border-width:1px; border-style:solid;border-color:#848484;text-align:center;"></i>
            <div class="desc">Facebook</div>
        </div>
    </a>
</div>

Upvotes: 0

andyrandy
andyrandy

Reputation: 73984

You are not supposed to change the appearance of Social Plugins by CSS, but you have 2 other options:

Upvotes: 1

Related Questions