javascript - Custom image for Facebook share button

Question

I've been searching around the internet for a while now and am unable to find anything that works. I want to use my own custom image for the share button but whenever I try to surround the image the share button disappears. Sorry for lack of information because I'm new to the Facebook SDK. Any help would be greatly appreciated, thanks.

Current code that I have:

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button"><img src="Images/Icons/facebook.png" class="link"></div>

Answer 1

This code works fine for me:

<!-- facebook -->
<img src="[YOUR_FACEBOOK_PIC]" alt="Share on Facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('[YOUR_PAGE_URL]'),'facebook-share-dialog','width=626,height=436'); return false;">

<!-- twitter -->
<img src="[YOUR_TWITTER_PIC]" alt="Share on Twitter" onclick="javascript:window.open('https://twitter.com/share?text=[SOME_TEXT_TO_PREPOLUTATE_TWEET]&amp;url=[YOUR_PAGE_URL]','Twitter-dialog','width=626,height=436'); return false;">

<!-- google+ -->
<img src="[YOUR_GOOGLE_PIC]" alt="Share on Google Plus" onclick="window.open('https://plus.google.com/share?url=[YOUR_PAGE_URL]','Google-dialog','width=626,height=436'); return false;">

Just replace the text between brackets, and don't forget to "url encode" all the text that goes in the url to avoid issues.

And it doesn't need the SDK for any of them.

---

Here are references to the official documentation for each of them:

• Facebook (you can see it under the URL redirection section)
• Twitter (you could also use https://twitter.com/intent/tweet as described here)
• Google+ (under Share Link section)