How to add a share functionality within facebook?

问题

I am using a script on my blogger blog which uses externally source images with previous and next button. The script include currentUrl function to create a page impression whenever next or previous button is clicked.

I want to add facebook share button, which enables a user to share the picture they are viewing, but i believe it cant be done,because i tried to copy paste the link on the address bar (which changes with picture due to currentUrl function) on facebook but it couldn't retrieve the image associated with url, is it possible to make any changes to the script so that images can be shared social media? Help would be much appreciated. Thanks

HTML Code:

<body onload="showPicNo(a)">
    <div id="picture"><img name="picturegallery"></div>
    <div id="navigation">
       <a href="javascript:bw()">previous</a> | <a href="javascript:fw()">next</a>
    </div>
  <body>

javascript code:

var pics=new Array ("http://4.bp.blogspot.com/_UdzqQpb36Jo/R9kVS0h1BFI/AAAAAAAAD_o/SRGugAQSF0A/s1600/timming_pictures_37.jpg","https://lh3.googleusercontent.com/-et1BbdI-Dqk/UbM0JNa5VSI/AAAAAAAAAdw/cd6yN5HWvmc/s480-no/Funny+Lady+French+Kiss+With+Lion.jpg","https://lh3.googleusercontent.com/-pSwjTBzFDM0/UbMukN2vTbI/AAAAAAAAAbc/ZMLSTtO-JUk/w460-h511-no/funny-pictures-auto-woman-boobs-477558.jpeg")
var a=0;
var b = pics.length;
var currentUrl = document.URL;
var existsPicParameter = currentUrl.match(/picnoparam\S*/i);

var tmpPicParameter, tmpPicParameterOld;

if (existsPicParameter != null)
{
  tmpPicParameter = existsPicParameter[0].match(/picnoparam=\d+/i);
  if (tmpPicParameter != null)
  {
    a = parseInt(tmpPicParameter[0].match(/\d+/i));
    tmpPicParameterOld = tmpPicParameter[0];
  }
} else {
  a = Math.floor(Math.random() * (b - a)) + a;
}

function fw()
{
 if (a == (b - 1))
 {
  a = 0;
 } else {
  a++;
 }
 navigate(a);
}

function bw()
{
 if (a == 0)
 {
  a = b - 1;
 } else {
  a--
 }
 navigate(a);
}

function navigate(a)
{
 if (existsPicParameter == null)
 {
  if (currentUrl.indexOf("?") == -1)
  {
    currentUrl += "?";
  } else {
  currentUrl += "&";
  }
  currentUrl += "picnoparam="+a;
 } else {
  tmpPicParameter[0] = tmpPicParameter[0].replace(/\d+/i,a);
  currentUrl = currentUrl.replace(tmpPicParameterOld,tmpPicParameter[0]);
 }
  window.location.replace(currentUrl);
}

function showPicNo(picNumber)
{
  window.document.images["picturegallery"].src=pics[picNumber];
}

function randomPicture()
{
  erg = Math.floor(Math.random() * (b - a)) + a;
  showPicNo(erg);
}

回答1:

You need to use the Facebook Javascript SDK to do this. - here is a simple sharing class I made to make this easy. https://github.com/DrewDahlman/Social-Sharing

回答2:

I added the functionaly to original source code. Back to the topic:

Based on How does the Facebook 'share' button on Stack overflow work? I think the source code works, but not so as expected.

If you read the provided thread you will find following sentence:

Facebook will parse that page and grab the first few images it finds

This is the reason why you cannot see the selected picture in Facebook. Then, if Facebook parses the given site it will find an empty image tag. First the javascript assigns -at runtime- the picture adresses to this. Too late for Facebooks site parser. Also he is not able to execute inserted Javascript.

And gives a solution for my problem? In my eyes.. not for a pure client side picture show. You have to accept that only a static picture can be used as icon on Facebook.

P.S.: Everybody is inveted to tell me I am wrong. I'm eager to lern new things.

来源：https://stackoverflow.com/questions/20884329/how-to-add-a-share-functionality-within-facebook

标签

javascript

jquery

html

facebook

blogger