如何在通过Ajax加载的页面上使用Facebook共享FBML按钮？

在通过Ajax加载的页面上使用Facebook共享FBML按钮，可以采用以下步骤：

在页面加载时，加载Facebook SDK。
在Ajax加载的页面上添加Facebook共享按钮的HTML代码。
在Ajax加载完成后，调用FB.XFBML.parse()方法，将FBML代码解析为可用的按钮。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
 <title>Facebook Share Button with Ajax</title>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'your-app-id',
        cookie     : true,
        xfbml      : true,
        version    : 'v12.0'
      });

      // Load Facebook share button after Ajax content is loaded
      $(document).ajaxComplete(function() {
        FB.XFBML.parse();
      });
    };

    (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 = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
  </script>
</head>
<body>
  <div id="content">
    <!-- Your Ajax content goes here -->
  </div>

 <script>
    // Load Ajax content
    $(document).ready(function() {
      $('#content').load('your-ajax-content-url');
    });
  </script>
</body>
</html>

在Ajax加载的页面上添加Facebook共享按钮的HTML代码：

<div class="fb-share-button" data-href="https://www.example.com" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.example.com%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>

在Ajax加载完成后，调用FB.XFBML.parse()方法，将FBML代码解析为可用的按钮：

$(document).ajaxComplete(function() {
  FB.XFBML.parse();
});

这样，在通过Ajax加载的页面上就可以使用Facebook共享FBML按钮了。

相关·内容

Facebook背后的开源力量

该项目代号为“FBOpen”，其中包含了实现Facebook平台的一些基础设施、功能等，如API架构、FQL分析器、FBML分析器、FBJS，以及许多常用方法和标签的实现，代码基于PHP。...FlashCache 这是一个针对Linux的通用的回写块缓存。它可以作为一个可加载的Linux内核模块，在文件系统之下使用。 4. ...Phabricator 这是一个Web应用程序集合，可以帮助开发者轻松编写、审查和共享源代码。目前数百名Facebook工程师每天都在使用它。 5. ...Cfengine 这是一个基于规则的配置系统，用于服务器的自动配置和维护。Facebook使用Cfengine来维护主机配置，并在产品层面上自动化许多管理操作。 4. ...你可以在Launchpad中找到很多Facebook贡献的补丁，还可以通过MySQL@Facebook页面来了解Facebook如何使用它。 7.

8704 0

关于如何做一个“优秀网站”的清单——规范篇

，确保站点不使用片段标识符，如#之后的所有东西。...下面是优酷的首页加载时的过程，在内容全部加载完成前，先用展位符来展示，而不是白页，这样大大提升了用户的体验。...改善方法：在您的UI中提供社交共享按钮或通用共享按钮。...如果是通用按钮，您可能希望在点击时将URL直接复制到用户的剪贴板，提供他们的社交网络来分享，或尝试新的Web Share API与Android上的本机共享系统集成。...■还可以在服务器上查看使用PRPL模式和工具，如PageSpeed Module。缓存网站使用缓存优先的原则加载确认方法： ■将网络仿真设置为最慢的设置并浏览应用程序。

3.2K7 0

讲一讲Web开发中的跨域

（或者a.com和b.com），就是被浏览器当作两个不同的域名的，一般就会使用JSONP了 JSONP本质上就是让数据变成js代码，使用script标签来加载数据。...callback=render，得到的响应会是render({"name": "kindJeff", "gender": 1}) 在专栏文章页面，不使用ajax去拿取数据，而是嵌入一个script标签：...对于跨域的访问控制，是有HTTP标准的。这也是网上很多讲跨域的文章的主要内容，我就只简单介绍，跨域资源共享（CORS）把跨域行为分三类：简单请求如简单的GET和POST。...实现原理可以如下：假如支付宝有一个页面，页面上的按钮点击是转账1000元给kindJeff 我把这个页面作为一个iframe放在a.com的网页上我把这个iframe设置为透明，在它的按钮位置下面放置一个可以看见的...「下一页」按钮你看见我的网页，毫无防备地点击了下一页，实际上点击的位置是转账按钮这种「跨域」也有类似CORS的控制方式，即X-Frame-Options响应头。

1.1K4 0

pjax 历史管理 jQuery.History.js

更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件，使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作...pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。...然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL（JS，CSS），提供了一个快速的外观，全页面加载。但它确实就是Ajax和pushstate。...请求中，不能更新地址栏，地址栏上的“前进”和“后退”按钮就失效了,带来了另外一种糟糕的用户体验。...onhashchange事件触发ajax请求：到这里工作已经完成了80%，为什么是80%呢，这里面还有一个问题：当你直接在浏览器(新开的标签页

2.4K5 0

关于浏览器后退键遇到的一些问题

事情是这样的，用户登陆后进入首页，点击退出，然后使用浏览器的后退按钮进入了首页，这时候首页走本地缓存，并且一些动态内容和登陆页混在了一起，样式乱了(具体原因没有细纠)。...背景：项目采用的是ssh，使用urlrewrite做的转发，页面数据使用的Ajax加载。...Request缓存　HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息，包括浏览器端，中间缓存服务器端(如：squid等)，Web服务器端。...HTTP1.0中通过Pragma 控制页面缓存，可以设置：Pragma或no-cache。...需要注意的是必须使用GMT时间格式； --> Response缓存如何在点击浏览器前进、后退键时刷新页面而不读取缓存点击浏览器的后退键

1.4K5 0

富Web应用的架构与转化方法：Web应用系列第二篇

一、Rich Web应用富Web应用程序是具有以下特征的应用程序：丰富的用户界面组件无需页面重新加载动态页面更新以响应事件单页工作单位丰富的页面组件，是具有标准安装软件外观的用户界面元素。...在本课程中，我们将使用RichFaces组件。丰富的应用程序的标志之一是缺少页面重新加载和减少页面导航。例如，您在表单上输入数据，然后单击“提交”按钮。没有明显的等待响应。...这是因为是使用了Ajax技术将数据传输到服务器并在后台接收响应。鉴于Ajax和丰富的UI组件的组合，我们看到单个工作单元在一个页面上完成。...使用facelets标记在页面上对组件进行分组，以指示要处理和呈现的组件。虽然有内置的JSF标记可以管理Ajax事务，但我们将把注意力集中在这个单元中的RichFaces标记库上。 ?...快速入门演示了使用jQuery在注册新成员时显示消息。如何在页面上放置一个组件，例如列出当前库存的表格，并在库存发生变化时自动更新，即使库存交易不是来自你？使用RichFaces推送。

3.5K2 0

浏览器用户脚本—打造自己的专属页面

[隐藏右侧边栏] 监听ajax请求如果只有上面那么多代码会有一个问题，通过点击顶部“百度一下”按钮再次搜索时，右侧边栏又出现了！...这是因为用户脚本默认是在页面完成加载后开始执行的，但是在搜索结果页面再次搜索时，百度是通过ajax请求的方式来获取结果的，而在结果返回后，head标签内的所有style标签会被重置掉。...jQuery类库，而自己又习惯了使用jQuery，那么可以在头部的注解块中通过@require来引入，然后脚本里就可以使用熟悉的jQuery啦。...“谷歌一下"的按钮，来使用谷歌搜索当前的关键词并在新页面打开。...，可以上传到内部任何可以通过http访问的服务上，如自己的http服务器或者公司的git仓库（注意设置仓库权限以让别人可以访问），比如这个sample脚本可以在https://qcloud.coding.net

5.3K4 0

pjax使用小结

前言 ---- 上周看到一篇文章在分析简书我的主页页面 3 个 tab 页切换的 bug，起先以为是寻常的样式 bug 而已没怎么在意，后来在文章中看到 pjax 这个术语，长得和 ajax 有点像...简介 ---- 虽然传统的 ajax 方式可以异步无刷新改变页面内容，但无法改变页面 URL，因此有种方案是在内容发生改变后通过改变 URL 的 hash 的方式获得更好的可访问性（如 https://...pjax 结合 pushState 和 ajax 技术，不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。...优化页面跳转体验常规页面跳转需要重新加载画面上的内容，会有明显的闪烁，而且往往和跳转前的页面没有连贯性，用户体验不是很好。如果再遇上页面比较庞大、网速又不是很好的情况，用户体验就更加雪上加霜了。...缺点：不支持一些低版本的浏览器(如IE系列) pjax使用了pushState来改变地址栏的url，这是html5中history的新特性，在某些旧版浏览器中可能不支持。

2.9K4 0

Python每日一练(21)-抓取异步数据

其实这些图片都是通过异步的方式不断从服务端获取的，这就是异步数据，如京东。 1....异步加载与AJAX 传统的网页如果要更新动态的内容，必须重新加载整个网页，因为不管是动态内容，还是静态内容，都是通过服务端以同步的方式按顺序发送给客户端的，一旦某些动态内容出现异常，如死循环，或完成非常耗时的操作...2.4 Flask框架模拟实现异步加载页面本例使用 Flask 框架模拟实现一个异步加载的页面。页面使用模板显示，并且通过 jQuery 向服务端发送请求，获取数据后，将数据显示在页面上。...在之前AJAX 请求到的数据中吗？ ? 那么详情页的 URL 在哪呢？我们分别点开两个不同公司的详情页进行 URL 对比分析：天津银曼家化科技有限公司 ?...通过观察发现，详情页的企业详情数据也是动态加载出来的，该请求是 POST 请求，所有的 POST 请求的 URL 都是一样的，只有参数 id 值是不同。

2.7K2 0

Ajax在jQuery中应用--jQuery基础知识点(5)

XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。..."xml" }) $("#Button1").click(function() { //"姓名”按钮的单击事件 $.ajax({ success: function(data)....click(function() { //"性别”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据...Ajax中的全局事件 ajaxStart和ajaxStop这两个全局事件的使用频率非常高。...前者是当请求开始执行时触发，往往用于编写一些准备性的工作，如提示“正在获取数据...”字样；后者是当请求结束时触发，在这一事件中，常常与前者配合，说明请求的最后进展状态，如将显示中的“正在获取数据...

1.8K3 1

js 分页插件_vue分页组件

filling() 无填充数据，参数为页数四、AJAX动态分页其实做分页最主要的就是通过...是我全部加载数据后平均分配到每一页10条数据，然后依次显示下去吗？？...当然不是，我每当点击页数按钮的时候都要去加载数据，重新发起AJAX请求到服务器，然后返回数据给我们，那我们就大概知道怎么使用这个分页功能了！！（1）.首页，你得知道你分页按钮上需要显示几页吗？？...例如5页的话就是5个按钮。所以首先必须使用AJAX请求得到所有数据的长度是多少，例如：总共50条数据，我需要每页显示10条数据，当前显示第一页的数据。...一个很主要的流程就是，首先要发起ajax得到总条数和返回的条数然后在success回调中使用pagination的方法，在callback回调中再次发起ajax，就是为了点击分页按钮再次显示数据。

15.3K2 0

2019面试题：简单介绍下Ajax

Ajax是Web2.0技术的核心由多种技术集合而成，使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。什么是同步？...直白地说，就是没用Ajax的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。...通过这些技术，我们无序重新加载网页就可以发送和取回数据，完成交互。 Ajax优点： 1.无刷新更新数据，减少用户等到时间，更好的用户体验。 2.异步与服务器通信，无需打断用户，响应更加迅速。...Ajax缺点: 1.破坏了前进后退功能，用户往往通过后退按钮来取消上一步操作，但是使用ajax无法实现。...可以使用Gmail来解决这个问题，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。 2.安全问题。

5570 0

用selenium自动化验收测试

回页首 test runner 模式 Selenium test runner 脚本，也称测试用例（test case），是用 HTML 语言通过一个简单的表布局编写的，如清单 1 所示。...回页首现实中的需求在接下来的两节（现实中的需求和现实中的用例）中，我将描述如何在现实场景中使用 Selenium，并针对用 Ruby on Rails 和一点儿 Ajax 技术编写的一个简单的股票报价查看器应用程序编写...查看股票细节用例查看股票细节用例是在查看股票页面上触发的。用户在一个公司名称上单击鼠标时，就触发了到服务器的一个 Ajax 请求。...验证页面上是否显示该公司的详细信息。单击公司名称 Acme Automotive。验证页面上是否显示该公司的详细信息。由于使用了 Ajax，请求是异步发生的。...如果没有 500 毫秒的暂停，测试将失败（如图 4 所示）。图 4. 失败的查看股票细节测试用例 pause 命令还测试 Ajax 功能的非功能性需求。

6.2K3 0

搭建智能合约开发环境Remix IDE及使用

目前开发智能合约的IDE，首推还是Remix, 而Remix官网, 总是由于各种各样的（网络）原因无法使用，本文就来介绍一下如何在本地搭建智能合约开发环境remix-ide并介绍Remix的使用。...在右侧的功能区域，常用的是Compile、Run及Debuger几个标签页（Tab）。在Compile页，会动态的显示当前编辑区域合约的编译信息，如显示错误和警告。...编译的直接码信息及ABI接口可以通过点击Details查看到。在这篇文章里也有截图说明。在Run页，可以部署合约，以及调用合约函数等，使用非常简单，我们前面也有多篇文章讲解。...Remix ide 加载本地磁盘文件这是一个非常用的功能，但发现使用的人非常少，通过加载本地磁盘文件，就可以方便代码管理工具（如 git）管理我们的合约代码。我详细介绍下如何这个功能怎么使用？...如果是使用在线的Remix，需要使用命令remixd -s shared-folder 来指定共享目录。加载共享目录，在文件浏览区域上有，有这样一个图标，他用来加载本地共享目录，如图: ?

3.2K1 0

你所不知道的React| 趋势解读、底层逻辑、学习路径、实战应用

，Facebook 的工程师又发现他们还可以创建自定义标签，而且通过组合自定义标签有助于构建大型应用。...事实上多数人（包括Facebook的开发者）在创建React组件时使用的是React.createClass()方法。 5.学习路由单页应用是当今的主流。...单页的应用只加载一次网页，当用户点击链接或按钮的时候，JavaScript代码会更新页面的内容和地址栏内容，但是网页并没有刷新。地址栏的管理器就被称为路由。...很多人在创建应用的使用需要定义一个数据模型，然后他们认为他们需要Flux来实现它。这不是Flux的正确使用方法。Flux应该在很多组件加载之后加载。 React组件通常会构成一个层级结构。...它们是非常前沿的技术，如果你的AJAX请求并不是很多，那么你就不需要使用它们。结语说了这么多，你可能还是会觉得要学的东西好多。为什么说你的技术储备是一个技术栈？

7481 0

五分钟了解互联网Web技术发展史

现在，我们可以通过AJAX来动态获取数据，利用DOM操作动态更新网页内容了。...来看看加入了AJAX的网页是怎么工作的：这个时候前端路由还没有兴起，大多数情况下还是后端返回一整个页面，部分内容通过AJAX进行获取。随着智能手机的出现，APP开始萌芽。...扩展资料：第二次浏览器大战 2004年 Firefox 发布，拉开了第二次浏览器大战的序幕。同期市面上诞生的各种新兴浏览器，如Safari、Chrome等，也加入了战争。...很多网页首次加载的时候其实并不需要太多的东西，比如论坛首页与贴子详情页，完全可以将其拆开，用户在新打开的页面阅读反而体验更好（多页应用）。...又比如管理后台，可以在页面框架内，将每个菜单对应的管理页拆出来动态加载（import）。

4.1K2 0

无限滚动加载最佳实践

Facebook 的新闻推送页，Google 的图片搜索，Twitter 的时间线，这些页面都用到了这项技术。虽然听起来还挺有诱惑力的，但并不是对所有网站或应用都通用的。...这构成了一个很简单的交互界面，也使得按需加载额外内容的认知负荷可能是最小。 Instagram 使用“加载”更多按钮以便页脚简单可及，并且不会强制用户再三点击“加载更多”。 ? 3....别让你的用户就因为使用返回按钮，找不到列表的位置。很重要的是，用户通过列表访问了某一个项目的详情页，他们点击浏览器返回按钮返回列表的时候，也应该在相同的位置。...使用进度指示（process indicator）让用户知道，新内容正在加载，很快就会在页面上显示。...也可以有助于为用户添加额外的清晰,包括文本解释了为什么用户等待(例如“加载评论…”)。为用户添加额外声明，提供说明为何用户在等待的文本（如“正在加载评论”），也是很有用的。 ?

4.2K2 0

PowerBI中的书签和导航页，如何选择呢？

在2020 年 3 月的更新中，按钮有了一个名为"页导航"的新功能： ? 那么我们该如何在“页导航”和“书签”之间做出选择呢？...缺点是：页导航只限于按钮，不能使用图片/形状来跳转，如果一定要使用图片或形状，那么需要在图片/形状上再放一个按钮，很麻烦 2.多个可视化对象与多个隐藏显示组合很多时候我不得不去处理这样一些报告。...当在一个页面上有多个可视化对象，此时你要显示一些并隐藏一些时，使用书签往往很复杂，而且容易出错。此时如果使用不同的页面来实现，可能会更好一些。...，你可能会使用一些花哨的布局（如可滚动页面、选项卡式导航、弹出窗口等）时，页面导航将不起作用。...隐藏一个可视化对象时，它是不会被加载的，这很合理，所以我就应该使用书签吗？严格来说，对你来讲，哪些是重要的，哪些是次要的，这决定了你该如何选择。

6.9K3 1

Native和H5分久必合，Weex会带来移动端的巨变吗？

刚诞生的移动端还没聚集到足够多的开发者，这个阶段的Native App中有不少H5页面 1 ，移动浏览器也还被较多使用。...• 2012年，H5和Native成长路径上的拐点出现了。Facebook宣称：“Facebook 的应用完全依赖 HTML5 是最大的错误，导致浪费了两年宝贵的时间，将来要改为原生应用。”...（2）客户端上的JS Framework负责加载JS Bundle并与Native通信。（3） iOS使用系统的JSCore运行JS，Android使用V8 运行JS。...（3） 2015年，大部分页面使用H5，主会场使用了Weex的最初版本，在单个页面上实现了高性能和高发布效率。...Weex的未来今天的Weex似乎走在和AJAX相似的一条道路上。Weex出现之前，大部分移动端开发是使用H5或Native技术的，各有优点，但缺点也非常明显。

1.9K0 0

【ASP.NET Core 基础知识】--前端开发--使用ASP.NET Core和JavaScript进行通信

增强的交互性：AJAX使得网页可以实现更多样化和交互性更强的功能，如动态加载内容、实时更新数据等。...如果需要向其他域发送AJAX请求，可能需要使用CORS（跨域资源共享）或JSONP等技术来解决跨域问题。...下面是一个简单的示例，演示了如何在ASP.NET Core中使用AJAX与后端进行通信。...测试现在，您可以运行ASP.NET Core应用程序，并访问包含AJAX请求的HTML页面。页面加载后，它将通过AJAX请求从后端API端点获取用户信息，并将其显示在页面上。...通过这个简单的示例，您可以了解如何在ASP.NET Core中使用AJAX与后端进行通信。您可以根据实际需求扩展这个示例，处理更复杂的数据和交互逻辑。

2260 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云