将Facebook分享到我的SPA应用程序中的问题 [英] Issues integrating Facebook Share in my SPA application

查看：264
本文介绍了将Facebook分享到我的SPA应用程序中的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

此问题专门针对客户端JavaScript开发，具有丰富的Facebook Share按钮体验。



我的SPA应用程序是使用Javascript和AngularJS开发的。



作为功能的一部分，有一个页面有几个div，每个页面都有一个文档列表，每个引用都有自己的状态。



div包含一个 ng-show 指令，以便在任何给定时间只显示两个div之一。



此信息（文档列表）从远程服务器接收并排列在JSON集合（数组）中，其中每个条目包括文档标题，其状态
和编码字符串（稍后将被清除）。



文档可能有两种状态：编辑或查看。



我想做的是在每个文档的旁边添加一个SHARE按钮，其URL包含如下内容：

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

其中可能是编辑或VIEW，将是编码字符串。例如：

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

点击此URL（带参数）的访问者将直接路由到相关文档的视图页面由编码的字符串指定）



我使用从Facebook网站提取的以下代码：



一次在页面内：

 < 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：左上角; 
 -ms-transform-origin：左上角; 
 -webkit-transform-origin：左上角; 
 -moz-transform-origin：左上角; 
 -webkit-transform-origin：左上角; 
} 
< / style>

对于每个文档参考：

 < button type =buttonclass =btn btn-default
 aria-haspopup =true
 aria-expanded =false
风格= 宽度：100％;高度：40像素;文本对齐：左 > 
< div id =fb-rootstyle =width：100％; height：0px; margin：-10px 0 0 0>< / div> 
 
< div class =fb-share-buttondata-href ={{Get_Path_for_Facebook（One_Article）}}data-layout =button>< / div> 
< / button>

注意：




    因为我提供与Facebook无关的其他选项，所以我将所有的选项看起来都一样，我正在用自己的一个包装Facebook的按钮。
  • 函数 Get_Path_for_Facebook（One_Article）返回一个包含整个路径的字符串（例如 http://MyTestSite.com/Index.html?action=view&参考= 23lkj32oi4j23kl2j2lk2l34kj23 ）。



所以，这是我的问题：


  1. 当我查看两个div之一，点击任何SHARE按钮时，我会收到Facebook登录窗口。如果我点击
    中相同的div的不同文档，这个工作可以重复。一旦我切换到另一个div，Facebook徽标就不再显示，显然，点击按钮时没有任何反应。我应该补充说，我开始没有关系，
    只要我保持在同一个div内，Facebook的登录窗口将首次出现，并且任何额外的时间点击共享按钮，并且将停止工作一旦我切换div。


  2. 如何共享包含上述参数的网址？


最后，这不是我用这个问题创建的第一个帖子。我建议建立一个远远超出我目前的知识的服务器端页面（或类似的东西）。如果这是实现我所需要的唯一方法，我将非常感谢，如果还提供了一个明确的例子，那么我可以复制粘贴和适应我的需要。



非常感谢任何帮助。





编辑



从收到的反馈看来，我的问题似乎不清楚，所以这里是一种不同的方法来描述它。



我想达成一个情况从我的SPA应用程序共享的链接出现在Facebook中，当点击它们时，单独的窗口/选项卡将打开链接的URL。
这与您在电子邮件中获得链接并点击它相同。



现在，这些链接将如下所示： p> 

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

，并在我的SPA内动态生成。



虽然很明显，请注意，我的SPA使用这些参数，例如，访问者将被直接带到文档的视图，而不需要
登录到应用程序并搜索文档。



我的SPA有两个 divs ，其可见性受 ng-show 指令的限制。每个这样的 div 包含文档列表（作为 ng-repeat 的结果列表）。



我想在每个列出的文档旁边显示一个SHARE按钮，将共享一个链接，如上面的示例（但当然有不同的参数）。



重要的是要注意，我不需要在共享窗口或Facebook的页面中显示我的页面的任何内容。我的问题是：



1）如何与上述参数共享一个链接？



2）我使用上面显示的示例代码，并且在启动并保留在一个的 divs ，所有的共享按钮都会导致一个Facebook窗口弹出（无论是哪个
div ）一旦我从一个 div 切换到另一个，分享按钮就会停止显示。



希望这一次我的解释很清楚，我非常感谢一个解决方案。谢谢！





编辑2



我应该补充说如果我可以使用我自己的按钮（而不是Facebook的）并且在页面的控制器的功能内处理共享机制，那么最好的解决方案是。



再次感谢

解决方案

在这个例子中，我找到了一个使用Facebook分享者的工作解决方案：

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

我在我的控制器中创建了一个简单的功能，完成了所需的工作。



是的，我知道是贬值，但它完全按照我想要的方式工作，最重要的是直截了当。


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!

解决方案

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.

这篇关于将Facebook分享到我的SPA应用程序中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆