好友
阅读权限10
听众
最后登录1970-1-1
|
最近的接手项目中有一个需求：用户将自己喜欢的商品以图文的方式分享到Facebook，且分享到Facebook的图文要根据商品的图片和描述动态进行填充。
那么首先百度一下，看看Facebook分享的实现。
关键代码：
<meta property="og:url" content="Your url" /> ---->分享的地址<meta property="og:type" content="website" /> <meta property="og:title" content="Your Website Title" /> ---->分享的标题<meta property="og:description" content="Your description" /> ---->分享的图文中的描述<meta property="og:image" content="Your image" /> ---->分享的图文中的图片
注意点
<meta property="og:url" content="Your url" /> ---->分享的地址content中的网址，必须是标注网址，不得包含任何计数器和会话变量！也就是网址后面不可加“?id=1&name=”类似的代码
接下来操练起来，因为分享的图文是动态填充的，那么就需要查询分享商品，将商品的信息填充到上面的代码。
效果：
发现图片是默认的，其他信息也没有填充进来。最后发现facebook分享是是抓取页面的代码（由js操作后的html它们是抓不到的）。
那么就换一种思路，动态生成html或者使用jsp对页面进行动态填充。因为商品数量很多，动态生成html的话不是很好，所以就选择了jsp对页面动态填充
效果
内容可以分享，然后到facebook分享中点击链接，看看能不能定位到这个页面，测试发现，链接到还是分享页面。
而且这两个地址必须是一致的。
思前想后，看看能不能将[size=1em]og:url与其他的几个分到两个不同的页面。最后终于实现。
代码：
前端调用接口获取被分享的用户的信息，跳转到facebook.jsp
@RequestMapping(value = "share/{type}/{uid}")
public String shareGet(@PathVariable("type") String type, @PathVariable("uid") String uid, Model model) {
HgUser user = new HgUser(uid);
user.setUserType(type);
model.addAttribute("hgUser",user);
model.addAttribute("serverUrl",Global.getConfig("hg.server.url"));
return "modules/cms/front/facebook";
}
关键是这个页面，用户点击分享的图文和facebook抓取图文信息链接定下来
上述图片的会调用这个接口，获取详细信息，跳转到share.jsp
@RequestMapping(value = "info/{type}/{uid}")
public String sharePost(@PathVariable("type") String type, @PathVariable("uid") String uid, Model model) {
if (StringUtils.equals(type, GlobalConstant.HG_USER_TYPE_EMPLOYER)) {
model.addAttribute("description",hgEmployerService.get(uid).getJobDescription());
}
if (StringUtils.equals(type, GlobalConstant.HG_USER_TYPE_HELPER)) {
model.addAttribute("description",hgHelperService.get(uid).getSelfDescription());
}
model.addAttribute("hgUser",hgUserService.get(uid));
model.addAttribute("serverUrl",Global.getConfig("hg.server.url"));
return "modules/cms/front/share";
}
share.jsp//facebook抓取图文信息。点击分享的图文信息也会在这个页面进行跳转，并且定位到被分享人物信息详情页
<!DOCTYPE html>
<html>
<head>
<meta property="og:type" content="website" />
<meta property="og:title" content="${hgUser.firstName}" />
<meta property="og:description" content="${description}" />
<meta property="og:image" content="https://xxxx/userfiles/1/images/share-facebook.png" />
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<input id="type" type="hidden" value="${hgUser.userType}">
<input id="uid" type="hidden" value="${hgUser.id}">
<input id="serverUrl" type="hidden" value="${serverUrl}">
</body>
<script type="text/javascript">
$(document).ready(function() {
location.href = $("#serverUrl").val()+'/detail/'+$("#type").val()+'/'+$("#uid").val();
})
</script>
</html>
以上就是全部内容，，，
第一次发帖，语言组织不好，这个分享也是自己的理解，如有错误，请大佬指出 |
免费评分
-
查看全部评分
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
发表于 2019-11-15 12:22
