How to add a share functionality within facebook?

Question

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

so the actual script works, you are asking for guidance to add the share functionality within facebook? If so, your title is wrong — Christian, Jan 02 '14 at 13:47
@Christian yes the actual script is working fine, but it is not working with facebook. I want to implement share button on my funny pictures website. The script changes url with each image load, but when i copy pasted the url with parameter , on facebook status bar (to check whether i can use a share button) it fails to retreive the image associated with that url. I beleive that script needs to be modified in some way to work with share button. For your understanding of sturcture this is website url www.woofhits.com and its hosted on blogger. — Sam Mak, Jan 02 '14 at 16:53
The original source comes is http://stackoverflow.com/questions/18235156/adding-next-random-previous-buttons-to-this-random-image-script ;-) — Reporter, Jan 07 '14 at 14:13

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

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.

edited May 23 '17 at 10:25

Community

1
1

answered Jan 09 '14 at 15:56

Reporter

3,897
5
33
47

Thanks you so much for helping me all the way. I read the post you referenced in your answer and understood a bit of it. It means that using this image script is not a good idea, as it cannot be modified to work with social sharing, as a image and its title need to be on a specific page so that Facebook can parse it. If JavaScript is not a option for pictures website , what language should i use to achieve this, Please advice. I have seen this [Pictures Website](http://www.damnlol.com) which works perfectly in all respect, and i wanted to do the same on my website. – Sam Mak Jan 09 '14 at 17:35
The mentioned website goes a different way. There is code that runs on server side and generates always a new valid webpage. So then no problem vor Facebook's parser to grab the picture. Maybe you should try the way from the bottom answer. – Reporter Jan 10 '14 at 09:32
I am trying to implement facebook javascript sdk and sharing class provided in the 2nd answer. I have registered a fb app and included the javascript sdk.I am having trouble in filling these field in the sharing class var share_obj = { app_id: YOUR_FACEBOOK_APP_ID, method: "feed", link: **"LINK TO SHARE"**, picture: **"URL TO IMAGE MUST BE ABSOLUTE PATH"**, name: "THE NAME DISPLAYED", caption: "THE CAPTION", description: "THE DESCRIPTION" } – Sam Mak Jan 10 '14 at 13:08
i think link to share will be +=document.url but i dont know how to iclude absolute path of images in array – Sam Mak Jan 10 '14 at 13:15
I think the value for link to share is `""+document.URL`, the value for picture is `""+pics[a]`. What you write to other variables is up to you. – Reporter Jan 10 '14 at 14:26
Create the sharer var sharer = new SocialShare(); Create a share object which will look like this - var share_obj = { app_id: 490866674364389, method: "feed", link: "+document.URL", picture: "+pics[a]", name: "THE NAME DISPLAYED", caption: "THE CAPTION", description: "THE DESCRIPTION" } I have included all this under script tag, is it ok? And i am not sure where to include this sharer.facebook_share(share_obj); under script tage or as HTML (a href tag)? I tried both but its not working. Please reply at your convenience – Sam Mak Jan 10 '14 at 16:27
Based on https://github.com/DrewDahlman/Social-Sharing/blob/master/example.html you should review my previous comment. Take an eye on the positions of the quotations signs – Reporter Jan 10 '14 at 16:33
As concernd as your last question, please ask Drew Dahlman. I think he can give a better support than I can do. It is also new for me. – Reporter Jan 10 '14 at 16:35
Thanks for all the support. I have asked Drew regarding it. Will update you if there is any success. – Sam Mak Jan 10 '14 at 17:32
I have implemented the Drew's code. The link to share is working fine with this `document.URL` but image thumbnail is not loading with this `pics[a]` as Drew said above, this `pics[1]` also didn't work. As you have written this code, I believe you know what causing this problem. Please help me on this. – Sam Mak Jan 14 '14 at 12:07
See my comment at Drew's answer. – Reporter Jan 14 '14 at 12:46
thanks alot, Now every thing is working perfectly. I just want know if i want to use a like button, could this be done with the same scirpt? – Sam Mak Jan 14 '14 at 13:07
If you want to like the current picture, you have to change the "like" url with javascript. The code `pics[a]` reads out the adress of the picture you want to like it. – Reporter Jan 14 '14 at 14:17
I could'nt get how to modify the script to use it with like function.The Share function is working perfectly , I want to implement a Like function which works similarly and also a comments box displaying comments only on picture currently being viewed. I would much appreciate it if you can guide me on this. – Sam Mak Jan 17 '14 at 14:01

score 0 · Accepted Answer · answered Jan 09 '14 at 16:24

0

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

answered Jan 09 '14 at 16:24

Drew Dahlman

4,952
1
22
34

I am trying to implement your sharing class. I have included all this code under script tag var sharer = new SocialShare(); var share_obj = { app_id: 490866674364389, method: "feed", link: ""+document.URL, picture: ""+pics[a], name: "THE NAME DISPLAYED", caption: "THE CAPTION", description: "THE DESCRIPTION" } (the link and picture vairable are base on my image script) I am having trouble with sharer.facebook_share(share_obj); Shall this be included under script tag or as HTML as link (a href). – Sam Mak Jan 10 '14 at 17:26
You need to include the js in your html ... what is the error you're getting? – Drew Dahlman Jan 10 '14 at 18:53
I am not getting any error but i am having difficulty in implement this, there is little explanation provided in the link you provided. – Sam Mak Jan 10 '14 at 19:28
did you look at the example? https://github.com/DrewDahlman/Social-Sharing/blob/master/example.html spells it out pretty clearly... – Drew Dahlman Jan 10 '14 at 19:31
In the example there is a JS that loads the SDK. as for the share, include that at the top of your page, then at the bottom put the var sharer = .... – Drew Dahlman Jan 10 '14 at 20:30
I am waiting for your response – Sam Mak Jan 12 '14 at 11:20
@SamMak did you make sure your facebook app is not in sandbox mode? – Drew Dahlman Jan 13 '14 at 18:14
i disabled it, and now its working. But now the problem is that facebook fails to load the thumbnail of picture shared.As reporter suggested below, i am using ""+document.URL as link to share,and ""+pics[a] the value for picture (based on my image script).I believe The link to share is working fine but the associated image thumbnail is not loading. – Sam Mak Jan 13 '14 at 18:28
change the links - link: document.URL, picture: pics[a] remove the ""+ no real reason for that. Also where are you setting 'a'? It appears that may not be set yet.. if you try to do just pics[1] does it work? – Drew Dahlman Jan 13 '14 at 18:40
I have changed the links by removing ""+. Nothing has changed, and appears that only the link is shared correctly but image don't load. Change pics[a] to pics[1] but it doesn't work. You can check the image script in the question for your understanding of the script. – Sam Mak Jan 13 '14 at 18:53
I think I found a mistake. In my eyes, the following declaration is wrong: `picture: share_obj.image,`. It must be `picture: share_obj.picture,` because the sharer_obj has only this property, not the first one. – Reporter Jan 14 '14 at 12:45
@DrewDahlman i am trying to add a share button with counter to replace text link Share on Facebook. Tried `Share` but it doesn't work with this code. Can you help me with creating a share button with counter same as available on Facebook's puglins. Also I want to if want to use a like button & comment box on my site , could this code be modified to work with both. If it can be used ,please guide me how can it be done – Sam Mak Jan 16 '14 at 17:39
This doesn't work like this. if you really want to - make use of this http://graph.facebook.com/http://yourdomain.com it will return JSON of how many times that URL has been shared. You will need to do that via ajax then read the data. – Drew Dahlman Jan 16 '14 at 19:15
I think a found a way to add a like button with current selected picture. Take a look at the code example of Optikool, from the following site: http://dorianroy.com/blog/2010/04/how-to-make-a-friendly-facebook-like-button/ . You only have to change following line `fbFrame.setAttribute("src", fbURL); `into `fbFrame.setAttribute("src", pics[a]);` Can you triy it? – Reporter Jan 22 '14 at 16:36
I forgot to mention that you habe to url encode first, before you can add it to the like-button. `fbFrame.setAttribute("src", encodeURIComponent(pics[a]));` – Reporter Jan 23 '14 at 10:08

How to add a share functionality within facebook?

2 Answers2

Linked