9

I would like to setup an onClick function to an image on my new website that launch Facebook sharer.

Here are some pieces of code that may help understand what I'm talking about

<div id="mImageBox">
<img id='my_image' src='' width="auto" height="auto"/>
</div>

The image src is blank because it's injected by another JavaScript function by using "my_image"

so, I tried to setup the onClick function with this method:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>

<div id="mImageBox">
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank"><img id='my_image' src='' width="auto" height="auto"/></a>
</div>

The onClick function works well, however, it links to the page where the img is located and not the img itself!

Have you got any suggestion for me?

Pang
  • 9,564
  • 146
  • 81
  • 122
iGio90
  • 3,251
  • 7
  • 30
  • 43
  • It seems the function `fbs_click()` shares the page. Notice how it uses `u=location.href;`. I think that somehow, you've got to change `u` to the url of the image, instead of the current page. – uber5001 Jun 17 '13 at 01:24
  • i also noticed it.. have you got any solution for retrive the url image from the img id? – iGio90 Jun 17 '13 at 01:25

3 Answers3

16

try this: 

<div id="mImageBox">
<img id='my_image' src='' alt='' width="auto" height="auto" onclick="fbs_click(this)"/>
</div>

<script>
     function fbs_click(TheImg) {
     u=TheImg.src;
     // t=document.title;
    t=TheImg.getAttribute('alt');
    window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;
}
</script>

You don't need to use <a> tag (surrounding the <img> tag) for case that JS disabled, because in that case the JS that should inject the src attribute will not work also.

Atish Kumar Dipongkor
  • 10,220
  • 9
  • 49
  • 77
Dani-Br
  • 2,289
  • 5
  • 25
  • 32
  • 2
    What happens if `TheImg.src` is not a full url? e.g.: `TheImg.src = "/assest/images/imageExample.jpg"` – uber5001 Jun 17 '13 at 01:35
  • 1
    It returns the absolute URL. But in IE6 it will return the relative URL. here is the solution for IE6: http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue – Dani-Br Jun 17 '13 at 01:39
  • is it also possible to setup a button that share the image? – iGio90 Jun 17 '13 at 01:50
  • Dani: what should i put there? – iGio90 Jun 17 '13 at 02:02
  • that is a little more complicated. you should give id to the IMG tag. and then detect the tag by ID. Example: – Dani-Br Jun 17 '13 at 02:13
  • This code work perfects but someone tells me how to add a title for the image. which is look when sharing on facebook? – Brij Sharma Oct 09 '18 at 16:33
14

Just call below function and you can share Image with your Link and Text on Facebook.

function sharefbimage() {
    FB.init({ appId: `your appid`, status: true, cookie: true });
    FB.ui(
    {
        method: `share`,
        name: 'Facebook Dialogs',
        href: $(location).attr('href'),
        link: 'https://developers.facebook.com/docs/dialogs/',
        picture: 'your image url',
        caption: 'Ishelf Book',
        description: 'your description'
    },
    function (response) {
        if (response && response.post_id) {
            alert('success');
        } else {
            alert('error');
        }
    }
);
nativegrip
  • 892
  • 10
  • 20
  • Thank you! I've been looking around for about 2 days and that is the only one that worker properly for me. I just had to add , version : 'v2.5' in the init method. Thank you again! – Diogo Garcia Dec 02 '15 at 12:40
  • I used same code and got the error - Uncaught ReferenceError: FB is not defined. What should I do? – Kunjan Shah Apr 28 '16 at 11:27
  • 1
    @KunjanShah You first need to add Facebook JS SDK to your website. [See here](https://developers.facebook.com/docs/javascript/quickstart) – Nikola Stojaković Oct 29 '16 at 19:26
0

Since Facebooks Javascript API 2.9 is dead since last week the solution above doesn't work any more ( I took me half a day to find this out!!! ). In v2.10 the picture-parameter of FB.ui doesn't exist any more. But I found a workaround generating an individual URL parameter for each image so Facebook has to scrape Open Graph data for each shared image individually. I've shared my code in this post for your reference.

Hannes
  • 135
  • 3