6

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>
Improve this question
2
  • Could you please provide a bit of the code you created so far? Commented Feb 13, 2015 at 23:19
  • I found that very difficult too, so I normally use Addthis, so that can easily change the the look of the button. Commented Feb 13, 2015 at 23:27

1 Answer 1

Reset to default
16

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Is there a way to do this for other social networks such as Twitter and Google+?
Yes. I have this code on a Web page, let me find it and copy it here
Where is the documentation for this?. I feel like this is a secret. This is such an easier way of going about than what I was planning on doing. I feel like this is too good to be true.
@jackblank I edited the answer to add links to the official pages with (sometimes scarce) documentation

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.