FDavidov FDavidov - 6 months ago 24
Javascript Question

Issues integrating Facebook Share in my SPA application

This question is specifically for client-side Javascript developes with vast experience integrating Facebook Share buttons.

My SPA application is developed using Javascript and AngularJS.

As part of the functionality, there is a page with a couple of divs, each presenting a list of documents references, each reference with its own status.

The divs include a

ng-show
directive, such that only one of the two divs is presented at any given time.

This information (lists of documents) is received from the remote server and arranged within a JSON collection (array), where each entry includes the document title, its status,
and an encoded string (later on its used will become clear).

The documents may be in two statuses: EDIT or VIEW.

What I want to do is to add next to each document a SHARE button with a URL that would look as follows:

http://MyTestSite.com/Index.html?action=<action>&reference=<reference>


where may be either EDIT or VIEW and the will be the encoded string. For instance:

http://MyTestSite.com/Index.html?action=view&reference=23lkj32oi4j23kl2j2lk2l34kj23


A visitor that clicks on this URL (with the parameters) will be directly routed to the view page of the relevant document (as specified by the encoded string).

I am using the following code as extracted from Facebook's site:

Once within the page:

<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')
);
</script>
<style>
.fb-share-button
{
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
</style>


For each document reference:

<button type="button" class="btn btn-default"
aria-haspopup="true"
aria-expanded="false"
style="width:100%;height:40px;text-align:left">
<div id="fb-root" style="width:100%;height:0px;margin:-10px 0 0 0 "></div>

<div class="fb-share-button" data-href="{{Get_Path_for_Facebook(One_Article)}}" data-layout="button"></div>
</button>


Notes:


  • I'm wrapping Facebook's button with one of my own since I'm offering other options that are not related to Facebook and I want all the options to look the same.

  • The function
    Get_Path_for_Facebook(One_Article)
    returns a string that includes the whole path (e.g.
    http://MyTestSite.com/Index.html?action=view&reference=23lkj32oi4j23kl2j2lk2l34kj23
    ).



So, here are my problems:


  1. When I am viewing one of the two divs and click on any of the SHARE buttons I get the Facebook login window. This works repeatedly if I click at different documents within
    the same div. As soon as I switch to the other div, the Facebook logo is no longer shown and, obviously, nothing happens when clicking on the button. I should add that it does not matter which div I begin with,
    Facebook's login window will appear the first time and any additional time I click on the SHARE button as long as I remain within the same div, and will stop working as soon as I switch div.

  2. How can I share a URL that includes parameters as exemplified above?



Last, this is not the first post I create with this issue. I got a suggestion of building a server-side page (or something like that) which is far beyond my current knowledge. If that is the only way to implement what I need, I would very much appreciate if a clear example is also provided so I can just copy-paste and adapt things to my needs.

Thanking immensely in advance for any assistance.




EDIT



From the feedback received, it would appear that my question is not clear, so here is a different approach to describe it.

I want to reach a situation in which links shared from my SPA application appear within Facebook and, when clicking on them, a separate window/tab is open with the URL of the link.
This is much the same as when you get a link in an e-mail and click on it.

Now, these links would look like:

http://MyTestSite.com/Index.html?action=view&reference=dfklj34lkdjawoet4jw4oige9034


and are dynamically generated within my SPA.

Though obvious, it is important to note that my SPA uses these parameters such that, for instance, the visitor would be brought directly to the view of the document without the need
to log into the application and search for the document.

My SPA has two divs whose visibility is conditioned by an
ng-show
directive. Each such div contains a list of documents (being the list a result of
ng-repeat
).

I want to display, next to each listed document, a SHARE button that will share a link like the example above (but with different parameters of course).

It is important to note that I don't need anything of my page to be shown neither within the Share window nor within Facebook's page. Only a link and, (if the sharing user wishes) a
comment.

My problems are:

1) How do I share a link with parameters like shown above?

2) I am using the sample code shown above and, while starting and remaining within one of the divs all the share buttons cause a Facebook window to pop (and this regardless of which
div I started). As soon as I switch from one div to the other, share buttons stop showing at all.

Hoping this time my explanation is clear, I'd very much appreciate a solution. Thanks!




EDIT 2



I should add that the best solution for me would be if I could use buttons of my own (instead of Facebook's) and have the sharing mechanism handled within a function of the page's controller.

Thanks again!

Answer

I found a working solution using Facebook's sharer in this example:

"http://codepen.io/anon/pen/yOdVXr?editors=1111"

I created a simple function within my controller which does the job, exactly the way I needed.

Yes, I know it is depreciated, but it works perfectly the way I want and, most of all, it is straightforward.