首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在AJAX驱动的页面上添加Facebook"赞"按钮

在 AJAX 驱动的页面上添加 Facebook "赞" 按钮,需要遵循以下步骤:

  1. 在页面中添加 Facebook SDK:

在页面的 <head> 标签中添加以下代码,以加载 Facebook SDK:

代码语言:html
复制
<div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0" nonce="随机字符串"></script>
  1. 在页面中添加 "赞" 按钮:

在页面中添加以下代码,以添加 Facebook "赞" 按钮:

代码语言:html
复制
<div class="fb-like" data-href="页面链接" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>

其中,data-href 属性应设置为页面的 URL 地址。

  1. 使用 AJAX 加载新内容:

在 AJAX 请求完成后,需要调用 FB.XFBML.parse() 函数,以重新解析并呈现 "赞" 按钮。例如:

代码语言:javascript
复制
$.ajax({
  url: "example.php",
  success: function(data) {
    // 更新页面内容
    // ...

    // 重新解析并呈现 "赞" 按钮
    FB.XFBML.parse();
  }
});

这样,在 AJAX 驱动的页面上就可以成功添加 Facebook "赞" 按钮了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用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.1K30

六、文章详情显示及点实现《iVX低代码无代码个人博客制作》

接下来我们创建了列后,在当前页面显示时,给予返回数据到创建对象变量: 接着我们在详情页面中分别绑定这些值到页面上组件中: 接着我们预览查看后数据可以照常显示: 三、评论内容实现...创建好之后,我们创建一个服务提交当前用户评论信息: 接着该服务接收两个内容,一个是评论内容,另一个是评论文章ID: 接着我们给评论按钮添加事件,调用评论服务即可,并且清空评论输入框内容...接着创建一个循环,把评论内容放到之下,并且设置循环数据来源为评论信息对象数组: 接着我们为显示内容做数据绑定: 接着我们在评论按钮添加一个动作,给对应对象数组添加值,并且创建时间为...,发现当前文章评论结果已经显示: 五、点实现 接下来我们增加一个点服务,接受一个文章数据ID以及一个点用户列表作为参数,当点动作发生时,添加当前用户到点用户列表更新到对应数据之中...,表示当前用户已点击: 此时那如何在页面中判断用户是否已经点击了呢?

34840

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

丰富应用程序标志之一是缺少页面重新加载和减少页面导航。例如,您在表单上输入数据,然后单击“提交”按钮。没有明显等待响应。这是因为是使用了Ajax技术将数据传输到服务器并在后台接收响应。...鉴于Ajax和丰富UI组件组合,我们看到单个工作单元在一个页面上完成。这大大减少了Web应用程序中页面数量,但代价是单个页面内复杂性增加。...JSF2生命周期本机处理Ajax处理。可以在执行和呈现阶段部分更新组件树。使用facelets标记在页面上对组件进行分组,以指示要处理和呈现组件。...如何在面上放置一个组件,例如列出当前库存表格,并在库存发生变化时自动更新,即使库存交易不是来自你? 使用RichFaces推送。 RichFaces推送组件适用于基于JMS或CDI事件数据源。... 探索客户端验证 我们为表单中每个输入组件添加了丰富验证器(包括单选按钮等)。

3.5K20

niRvana · 轻拟物主题4.8完美版

不刷新加载 全局提供ajax加载文章 打赏 允许通过多种途径打赏,:支付宝二维码、微信二维码、Paypal链接 点 每篇文章均提供点功能,可展示访客最喜欢文章列表(后台可以修改点数据) 生成封面二维码...包含文档,详见:主题压缩包内文档说明 2、废弃:原有的“不刷新加载页面”回调方法,使用新ajax_render_complete”钩子。用法详见第1条。...文章分类、全部文章时间排序在一定尺寸屏幕上出现边栏,且顶栏也有边栏按钮BUG,:小尺寸iPad横屏状态 v1.5.1 1、增强:批量发送垃圾评论再也不可能进入本站了!...2、REST API错误不再清空页面,而是显示错误提示 v1.4.2 1、修复:启用Ajax不刷新加载页面时,文章二维码封面显示后,使用返回按钮不消失bug;鼠标悬停显示tooltip提示文字后,使用返回按钮不消失...(浏览器前进后退)会仍然存留bug v1.2.2 1、Gutenberg增加了alignfull功能,并调整了对应样式 2、Ajax加载页面增加了一个方法,用于加载并渲染完成后预留给第三方插件处理

8.5K10

【依葫芦画瓢】SSM-CRUD-3

请求将获取到json数据处理,员工列表信息展示; 二、完成员工新增功能 点击“新增”按钮,弹出“员工添加”模态框,用户数据录入,页面显示新增员工。...a、绑定“新增”按钮点击事件 b、页面中增加模态框,参考文档:https://v3.bootcss.com/javascript/#modals c、模态框中部门列表,在模态框弹出前通过ajax请求服务器获取...d、填写新增人员信息,进行前后端校验,检验环节会在下文中详细说明 e、点击“保存”按钮ajax发起请求,将表单数据序列化(serialize())后提交 f、保存失败,输出错误提示;保存成功,关闭模态框...,显示最后一。...在输入用户名后触发change事件,发送ajax请求,服务器端返回结果,在用户名不可用情况下,设置“保存”按钮不可用。

1.1K50

FreeFileSync:在 Ubuntu 中对比及同步文件

支持深入详细错误报告。 支持复制 NTFS 扩展属性,(压缩、加密、稀疏)。 还支持复制 NTFS 安全权限和 NTFS 备用数据流。 支持超过 260 个字符长文件路径。...支持免故障文件复制防止数据损坏。 允许扩展环境变量,例如 %UserProfile%。 支持通过卷名访问可变驱动器盘符(U盘)。 支持管理已删除/更新文件版本。...如何在 Ubuntu 中安装 FreeFileSync 我们会添加官方 FreeFileSync PPA,这只在 Ubuntu 14.04 和 Ubuntu 15.10 上有,那么像这样更新系统仓库列表并安装它...,进入 FreeFileSync 下载为你 Ubuntu 和 Debian 获取合适包。...(默认设置),只要点击比较按钮

3.8K20

Web前端学习 第9章 教务管理系统开发1 开发流程

一、需求分析 有登陆功能 可以对班级信息进行增、删、改操作 可以对学生信息进行增、删、改操作 班级中存在学生时,不可删除 退出登录时,要返回到登录 二、原型设计 需要有学生管理和班级管理切换菜单栏...需要有增加学生和增加班级添加按钮 需要有注销登录按钮 学生和班级基本信息要渲染在页面上 学生和班级要有删除和修改按钮 三、技术选型 前端页面:用Vue来写,网页尺寸用px, 后台编程:用Egg...来写后台,Cortonter与service来实现功能, 数据库:用Mysql,建了一个库,然后库里建了User,Clazz,Student表等, 另外用到技术: Ajax(前后台数据交互,局部刷新...), Squlize(Egg链接Mysql从而实现数据传输)), Element-ui(增加页面效果), Md5(密码加密), 四、确定接口 登陆接口:/login 班级查询:/getclazz 添加班级...|--src |--assets(静态资源,css,以及一些外部引入文件) |--components(公共文件) |--router(路由,配置项目路由) |--App.vue

59530

谷歌跟踪代码管理器(GTM) 入门指南 第4部分——社交媒体

记录了在您网站发生社交动作。这包括在访客对你Twitter主页访问,点Facebook主页或是在把你文章分享到LinkedIn。...这些都属于与你网站内容互动指标,在我们博客页面上,我们也同样跟踪了所有的这些指标。因此,请随意分享这篇文章(看看文章左边那些按钮),这样我就可以测试它们是否能正常运行了!...页面的点数 由于我们网站没有此功能,因此我没有记录网页赞助示例,但“社交分享”说明将涵盖你所需要设置所有内容。如果你使用第三方插件提供按钮,那么记录事件可能会很棘手。...你可以通过运行GTM预览模式来查看点击“”时是否记录了任何点击。 如果GTM没有记录到点击,那么点按钮实际上是不属于该网站。...在谷歌分析“社交/插件”中点击“社交来源”和“行动”,添加一个“社会实体”次要维度,就可以看到所有的社交分享数据出现都在同一个报告中。 谷歌分析社交媒体报告图示 ?

2.4K60

【融职培训】Web前端学习 第9章 教务管理系统开发1 开发流程

一、需求分析 有登陆功能 可以对班级信息进行增、删、改操作 可以对学生信息进行增、删、改操作 班级中存在学生时,不可删除 退出登录时,要返回到登录 二、原型设计 需要有学生管理和班级管理切换菜单栏...需要有增加学生和增加班级添加按钮 需要有注销登录按钮 学生和班级基本信息要渲染在页面上 学生和班级要有删除和修改按钮 三、技术选型 前端页面:用Vue来写,网页尺寸用px, 后台编程:用Egg...来写后台,Cortonter与service来实现功能, 数据库:用Mysql,建了一个库,然后库里建了User,Clazz,Student表等, 另外用到技术: Ajax(前后台数据交互,局部刷新...), Squlize(Egg链接Mysql从而实现数据传输)), Element-ui(增加页面效果), Md5(密码加密), 四、确定接口 登陆接口:/login 班级查询:/getclazz 添加班级...|--src |--assets(静态资源,css,以及一些外部引入文件) |--components(公共文件) |--router(路由,配置项目路由) |--App.vue

31410

如何使用Selenium Python爬取多个分页动态表格并进行数据整合和分析

动态表格数据通常是通过JavaScript或Ajax动态加载,这给爬虫带来了一定挑战。...Selenium Python提供了一个WebDriver API,它可以让我们通过Python代码控制不同浏览器驱动Chrome、Firefox、Edge等,从而实现对不同网站和平台爬取。...有些网站可能使用数字按钮来表示分页,有些网站可能使用上一和下一按钮来表示分页,有些网站可能使用省略号或更多按钮来表示分页,我们需要根据不同情况来选择合适翻页方法。 需要处理异常情况和错误处理。...pandas:用于处理数据结构和分析 matplotlib:用于绘制数据图表 首先,我们需要导入这些库,并设置一些全局变量,浏览器驱动路径、目标网站URL、代理服务器信息等: # 导入库 import...data.append(record) # 判断当前分页元素是否是上一或下一按钮 elif current_page_text

92840

java论坛贴子网站ssm论坛项目发帖子网站论坛系统论坛源码

ssm开发论坛系统,用户注册后可以发布帖子,其他人可以评论回复点评论和点回复,用户可以在个人中心管理自己帖子,以及查看自己对他人回复,和他人对自己回复。...ed0f04fbb713154db5cc611225d92156环境:jdk8+mysql5+tomcat8.5技术:ssm(spring+springMVC+myibats)+maven+pagehlper+css+jq+js+ajax...回复主贴,可回复图文信息,点击用户头像即可回复用户,回复楼中楼展示,收藏帖子,点回复,删除回复;个人中心,编辑资料,上传头像,修改密码,修改个性签名;查看我发布帖子,删除我发布帖子,分页展示;查看我收藏...,取消收藏,分页展示;查看我回复了谁,删除我回复,分页展示;查看谁回复了我,不下再现实回复信息,分页展示;退出账号;快捷按钮菜单:主页,刷新,返回上一,发帖,回复,收藏等.管理员功能分类管理:分页,...添加,编辑,删除,根据名称搜索帖子管理:分页,审核通过,审核不通过,根据标题、用户昵称、分类、审核状态搜索回复评论管理:分页,删除,根据回复内容查找用户管理:分页,禁用,启用,根据昵称、禁启用状态查找修改密码退出登录图片图片图片

4.7K10

Fastadmin了解一下??

如果我们只需要其中部分按钮,则可以传入参数来实现, {:build_toolbar('refresh,add')},这样将只会生成刷新和添加按钮。...')},如果当前管理员没有添加权限,添加按钮仍然不会显示 。...目前 build_toolbar支持按钮有: refresh: 刷新按钮 add: 添加 edit: 编辑 del: 删除 import: 导入 批量操作按钮是直接在视图页面上添加HTML代码,直接修改即可...url 按钮链接/Ajax事件请求URL/弹窗链接/选项卡链接,直接 function和 string类型,此链接会自动在链接后添加 ids/{ids}, {ids}为当行主键ID,如果需要传递其它字段值...其次 Table.api.formatter.operate也支持 buttons属性来配置多个其它按钮示例图中 详情按钮。请参考下方完整代码中JS部分。

5.2K20

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

事情是这样,用户登陆后进入首页,点击退出,然后使用浏览器后退按钮进入了首页,这时候首页走本地缓存,并且一些动态内容和登陆混在了一起,样式乱了(具体原因没有细纠)。...背景:项目采用是ssh,使用urlrewrite做转发,页面数据使用Ajax加载。...Request缓存  HTMLHTTP协议头信息中控制着页面在几个地方缓存信息,包括浏览器端,中间缓存服务器端(:squid等),Web服务器端。...需要注意是必须使用GMT时间格式; --> Response缓存 如何在点击浏览器前进、后退键时刷新页面而不读取缓存 点击浏览器后退键...,总是会读取缓存,这样会导致有时候获取不到页面上值,如果点击后退键时刷新页面而不读取缓存,这样就不会产生获取不到值问题。

1.4K50

测试思想-测试设计 公共用例设计实践

第一:观察 发现页面, 我-个人资料-动态,页面,这两个页面表面上看,似乎不一样,但是仔细看看,本质是一样,都是“动态”列表,而且动态记录显示方式,大同小异;再进一步分析,点击“动态”,都是进入...评论按钮操作: 情形1:评论按钮>>评论对话框>>返回动态列表>>评论按钮评论数加1 情形2:评论按钮(评论数不为0)>>动态详情(显示转发标签或评论标签)>>评论标签评论数加1...仔细分析情形1,情形2,我们可以很好划分出两个测试点:动态评论(情形1),动态评论查看(情形2) 转发按钮操作: 转发按钮>>转发对话框>>返回动态列表>>转发按钮转发数加1 按钮操作...: 按钮>>按钮高亮,按钮数加1 动态详情 评论按钮操作: 评论按钮->评论对话框->返回动态详情(显示转发标签或评论标签)->评论标签评论数加1 转发按钮操作:...转发按钮>>转发对话框>>返回动态详情(显示转发标签或评论标签)>>转发标签转发数加1 按钮操作: 按钮>>按钮高亮,标签上数加1 再次点击按钮>>按钮灰色,标签上数减

47430
领券