CODEWITHSUNDEEP
javascriptfacebooksdk
Viraj Kaulkar
Viraj Kaulkar

Reputation: 321

Can i add a custom facebook icon for facebook share button?

Can i add a custom facebook icon for facebook share button??

following is code i tried but i could't replace default logo with a custom icon

<div class="fb-share-button"
  data-href="<?php echo SITE_URL;?>product/<?php echo $this->uri->segment(2);?>"  
  data-layout="link"></div>

Upvotes: 4

Views: 15374

Answers (4)

ibomi
ibomi

Reputation: 11

This is what I've done.I used the information at this page: Make Your Own Social Media Sharing Buttons.But I couldn't achieve to open share dialog in a pop up window. In this page,in Martina's answer (Optional 2) I've found the solution.Thanks.I hope this syntesis will be helpfull to the people as an example.

<ul class="sharing-buttons">
  <li>
    <a class="fb-xfbml-parse-ignore" target="popup" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdengdeney.blogspot.com.tr%2F&amp;src=sdkpreparse','popup','width=600,height=500'); return false; " href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdengdeney.blogspot.com.tr%2F&amp;src=sdkpreparse">
      <img src="
https://drive.google.com/uc?id=0B6hjXoGtqTbPRDN0cG9BVnozdEk" border="0" /></a>
  </li>
</ul>

Upvotes: 1

martina
martina

Reputation: 11

I was struggling for hours to make a custom share with just an image and a popup, and this is the only way it worked for me.

  • Taking the code from the button configurator from the link listed in the post on top "Facebook-Social-Button-Plugin"

  • Adding the adjusted meta data showed below the configurator

  • Rewriting the css

    `.fb-share-button, .fb_iframe_widget, #facebook { width: 70px !important; height: 70px !important; margin: 0 auto; margin-top: -46px !important; background: url(../img/like.png) no-repeat !important; background-size: contain !important; }

    .fb-share-button a { width: 70px; height: 70px; }

    .fb_iframe_widget span { display: inline-block; position: relative; vertical-align: bottom; width: 70px !important; height: 70px !important; text-align: justify; }

    .fb_iframe_widget iframe { position: absolute; width: 70px !important; height: 70px !important; }

    .fb_iframe_widget iframe #facebook .inlineBlock { display: inline-block; zoom: 1; background: transparent !important; width: 70px !important; height: 70px !important; }

    ._2tga._3e2a { background: transparent !important; color: transparent !important; border-radius: 35px !important; width: 70px !important; height: 70px !important; }

    path[Attributes Style] { fill: transparent !important; }`

  • Removing the "Share" in anchor (my layout was just a picture) or changing it

  • Optional: if you want to display quoted text just add it on the end of the link like this (you can also change the title and description of the link like that)

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

-Optional 2: if you want to share/open the link as a popup, add window.open onclick function to the anchor

Full div example with popup and quote without text :

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

(the data-size and data-layout are not important cause the css is overwritten)

I'm sure there are better ways of doing it but i couldn't find any! I tried with the FB.ui but it didn't work.

I hope this helps somebody!

Button looked like this

Upvotes: 0

Kostiantyn
Kostiantyn

Reputation: 1853

Create your custom html element and trigger the facebook share dialog by clicking on it.

<a href="#" class="facebook-bg"><i class="fa fa-facebook"></i></a>

$('a.facebook-bg').click(function(event){
        event.preventDefault();
        event.stopPropagation();
        FB.ui({
            method: 'share',
            href: 'http://url_of_your_page'
        }, function(response){});
    });

Don't forget to load fb SDK before.

https://developers.facebook.com/docs/sharing/reference/share-dialog

Upvotes: 0

Tymek
Tymek

Reputation: 3113

There is limited number of styles, that you can choose from using Facebook API. You can change "layout", not "icon". One of, and default, layout is "icon_link".

If you want to use your own style/image: Can I use the Share Dialog without using the Share Button?

Other simple, but primitive way to do this:

<a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com">
    <img src="./youimage.png" alt="share icon">
    Link text
</a>

Upvotes: 7

Related Questions