onClick: udostępnij obraz na facebooku

Question

Chciałbym ustawić funkcję onClick na obraz na mojej nowej stronie internetowej, która uruchamia Facebook Sharer.

Oto kilka pices kodu, które mogą pomóc zrozumieć, co mówię

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

src obraz jest pusty poniewaz to jest wstrzykiwany przez siebie funkcji JavaScript za pomocą „my_image”

tak, próbowałem skonfigurować funkcję onClick z tą metodą:

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

prace funkcja onClick dobrze, ednak, że linki do strony, na której znajduje img i n ot img!

Masz jakieś sugestie dla mnie?

Gio

Answer 1

spróbuj tego:

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

Nie trzeba używać < się > tag (otaczający <img> tag) dla przypadku, JS wyłączona, ponieważ w takim przypadku JS który powinien wstrzyknąć atrybut src również nie będzie działał.

Answer 2

Po prostu wywołaj poniższą funkcję i możesz udostępnić obraz za pomocą linku i tekstu na Facebooku.

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'); 
     } 
    } 
); 

Answer 3

Ponieważ Facebook API JavaScript API 2.9 jest martwe od zeszłego tygodnia powyższe rozwiązanie już nie działa (wziąłem pół dnia, aby to znaleźć !!!). W wersji v2.10 parametr obrazu FB.ui już nie istnieje. Ale znalazłem obejście generujące indywidualny parametr adresu URL dla każdego obrazu, więc Facebook musi skrobać dane Open Graph dla każdego udostępnionego obrazu indywidualnie. Udostępniam swój kod w this post w celach informacyjnych.