-2

Is there a way that I can style how I want a facebook share button or link by using my own background image or simple image? I've been wrapping my head around this issue, googled a lot but I couldn't find any concrete answer. I saw that all the code from this link is creating an iframe that I don't think is possible to style(because that was the first thing to try). Thanks in advance. As you can see in my button I have the facebook link text over my background image. How do I get rid of that text and use a display: inline-block; on my link?

enter image description here

7
  • 2
    Ofcourse design your own ones.
    – Dipen Shah
    Aug 7, 2015 at 12:06
  • How? I think you misunderstood me. I already have my own button design I know how to implement it but I don't know how to get rid of the facebook's link text or the image in iframe. Thanks. Aug 7, 2015 at 12:08
  • Please read stackoverflow.com/help/mcve
    – Dipen Shah
    Aug 7, 2015 at 12:08
  • I've updated my question with my example. Aug 7, 2015 at 12:12
  • And if I do that you think that my button will still work? :)) I think you're joking. Aug 7, 2015 at 12:18

2 Answers 2

2

You could just apply opacity: 0 on the real Facebook button and put your own design behind it with a little bit of CSS:

HTML:

<div class="parent">
    <!-- your button -->
    <div class="myownbutton"></div> 

    <!-- real button -->
    <div class="fb-share-button"></div> 
</div>

CSS:

.parent {
    position: relative;
}

/** position it so the Facebook button sits at the same location as this button **/
.myownbutton {
    position: absolute;
    top: 0;
    /** add your design **/
}

/** it still lets you click but you can't see it. **/
.fb-share-button {
    opacity: 0;
}
1

You can not use the IFRAME, if you want to have a custom share button.

You would need to dynamically generate your own one like.

WORDPRESS

<a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share this post on Facebook!" onclick="window.open(this.href); return false;">Facebook</a>

You could also generate it through the backend and serve it.

Bottom line, you can not use the IFRAME.

1
  • Can I make a popup appear instead of a new tab? and is there possible to change the image to be shared in the dialog. Thanks. Aug 7, 2015 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.