- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
所以我使用 MEAN.js 构建了一个应用程序,并且我对文章(博客)部分进行了一些更新,以获得更好的搜索引擎优化、可读性、设计等。不过,我似乎无法弄清楚的一个问题是如何使用 Facebook、Google+、Twitter 等分享文章,并让它们使用 og 元标记填充正确的数据。
我想要什么
我想要的只是能够从我的 MEAN.js 应用程序共享文章(博客文章),并在我将链接发布到社交网站(例如 Facebook)时显示文章内容。
我尝试了什么
我已经尝试过专门为博客文章创建一个单独的服务器布局,但这会破坏很多其他事情,我意识到工作量可能不值得 - 必须有更聪明的方法。
我也试过在客户端用 Angular 更新 og 元标签数据,但是在社交网站获取这些标签之前,这些值不能得到更新……换句话说,它实际上并没有按照我的意愿进行到。
我尝试在呈现索引时获取 Angular 路由 URL,以便我可以在呈现索引之前更新那些 og 元值,但我无法在 req
的任何位置找到这些值数据。
我认为问题是什么
从概念上讲,这就是我认为正在发生的事情:
请求到达我的服务器,但由于它是一个使用 Angular 路由的单页应用程序,req.url
值只是根页面 ('/')。
索引文件被加载,它使用标准服务器模板布局。
Angular 被加载并进行 AJAX 调用以获取文章数据,然后将该数据绑定(bind)到页面上的变量。
所以基本上,在 Angular 确定要获取的文章信息之前,布局已经被渲染(使用 og 元值)。
我猜理想的解决方案是什么
在我的 express.js
文件中,应用程序的局部变量设置如下:
// Setting application local variables
app.locals.siteName = config.app.siteName;
app.locals.title = config.app.title;
app.locals.description = config.app.description;
app.locals.keywords = config.app.keywords;
app.locals.imageUrl = config.app.imageUrl;
app.locals.facebookAppId = config.facebook.clientID;
app.locals.jsFiles = config.getJavaScriptAssets();
app.locals.cssFiles = config.getCSSAssets();
这些局部变量随后由 Swig 在 layout.server.view.html
文件中呈现,如下所示:
// Note the {{keywords}}, {{description}}, etc. values.
<!-- Semantic META -->
<meta id="keywords" name="keywords" content="{{keywords}}">
<meta id="desc" name="description" content="{{description}}">
<!-- Facebook META -->
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}">
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}">
<meta id="fb-title" property="og:title" content="{{title}}">
<meta id="fb-description" property="og:description" content="{{description}}">
<meta id="fb-url" property="og:url" content="{{url}}">
<meta id="fb-image" property="og:image" content="{{imageUrl}}">
<meta id="fb-type" property="og:type" content="website">
<!-- Twitter META -->
<meta id="twitter-title" name="twitter:title" content="{{title}}">
<meta id="twitter-description" name="twitter:description" content="{{description}}">
<meta id="twitter-url" name="twitter:url" content="{{url}}">
<meta id="twitter-image" name="twitter:image" content="{{imageUrl}}">
理想情况下,我认为我们希望在呈现页面之前使用文章特定信息更新这些值。问题是,如果布局在 Angular 确定要填充哪些文章数据之前就已呈现,那么如何我可以这样做吗?同样,Angular 路由似乎在 req
对象中的任何地方都不可用,所以我完全不知道如何执行此操作。
所以我回到最初的愿望 - 如何使用 MEAN.js 以“漂亮”的方式在社交媒体上分享我的文章?我在正确的轨道上吗?当前的 Article 设置是否可行?我是否需要构建一个完全不使用 Angular 的完整博客模块?
最佳答案
我终于在没有 Nginx 或 MEANJS 框架之外的任何其他东西的情况下为我的应用程序工作了。你的里程可能会有所不同,但我想我还是会分享结果。它适用于我,但可能不适合你。
基本上我已经设置的是一种获取非散列 URL 并重定向到散列 URL 的方法。因此用户可以分享他们的个人资料,例如example.com/myprofile
,它将重定向到 example.com/#!/profile/myprofile
。
然后我专门为社交机器人创建了一个单独的布局(尽管回想起来我不确定这是否完全必要)并在网站被抓取时提供单独的布局。我这样做:
social-layout.server.view.html
...some stuff here...
//Note the variable names, e.g. {{siteName}}
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}">
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}">
<meta id="fb-title" property="og:title" content="{{socialTitle}}">
<meta id="fb-description" property="og:description" content="{{socialDescription}}">
<meta id="fb-url" property="og:url" content="{{socialUrl}}">
<meta id="fb-image" property="og:image" content="{{socialImageUrl}}">
<meta id="fb-type" property="og:type" content="website">
...other stuff here...
然后在我的 Express 文件中,我明确检查 user-agents
以确定是否需要新布局。如果我找到一个机器人,我会从我的数据库中获取一些与 URL 相关的关键数据,然后填充变量,如下所示:
express.js
// This code happens just after app.locals variables are set.
// Passing the request url to environment locals
app.use(function(req, res, next) {
// Let's check user-agents to see if this is a social bot. If so, let's serve a different layout to populate the og data so it looks pretty when sharing.
if(req.headers['user-agent'] === 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)' ||
req.headers['user-agent'] === 'facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)' ||
req.headers['user-agent'] === 'facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)' ||
req.headers['user-agent'] === 'facebookexternalhit/1.0 (+https://www.facebook.com/externalhit_uatext.php)' ||
req.headers['user-agent'] === 'visionutils/0.2' ||
req.headers['user-agent'] === 'Twitterbot/1.0' ||
req.headers['user-agent'] === 'LinkedInBot/1.0 (compatible; Mozilla/5.0; Jakarta Commons-HttpClient/3.1 +http://www.linkedin.com)' ||
req.headers['user-agent'] === 'Mozilla/5.0 (Windows NT 6.1; rv:6.0) Gecko/20110814 Firefox/6.0 Google (+https://developers.google.com/+/web/snippet/)' ||
req.headers['user-agent'] === 'Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko Firefox/11.0 (via ggpht.com GoogleImageProxy)') {
var urlAttempt = req.url;
urlAttempt = urlAttempt.substr(1);
Users.findOne({ link: urlAttempt }, function(err, results) {
if(err) {
res.locals.url = req.protocol + '://' + req.headers.host;
next();
} else if (results !== null) {
// Found link. Populate data.
res.status(200).render('social-index', {
// Now we update layout variables with DB info.
socialUrl: req.protocol + '://' + req.headers.host + req.url,
socialTitle: results.orgName,
socialDescription: results.shortDesc,
socialImageUrl: req.protocol + '://' + req.headers.host + '/profile/img/' + results.imgName
});
} else {
res.locals.url = req.protocol + '://' + req.headers.host;
next();
}
});
} else {
res.locals.url = req.protocol + '://' + req.headers.host;
next();
}
});
同样,您的里程可能会有所不同,但这对我有用(部分)。我仍在致力于社交分享整个 URL(包括哈希)。希望它能以某种方式提供帮助。
关于javascript - MEAN.js 社交分享?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30605210/
有没有人将 Socialize (getsocialize.com) 与 PhoneGap 集成?我正在开发一个 PhoneGap 应用程序,所以所有的 UI 都是 HTML5,但我的客户希望我们将
晚安 我试图掌握社交 SSO(Facebook/Google 等)如何在微服务架构中工作的概念。 场景 假设我有 2 个后端微服务(Order、User)和一个前端(WebApp) 用户:包含用户个人
Socialblade如何使用youtube api生成live subscriber count? 每个 channel 每秒更新一次。那会不会轻易超过速率限制? 他们从app store desc
我正在尝试在我的(maven)spring MVC secure(spring security)应用程序中配置springsocial,但是当我尝试访问/connect/或/connect/prov
我有一张 table CREATE TABLE `tbl_users` ( `user_id` int(11) NOT NULL auto_increment, `user_username`
这是当前的样本结构 Posts(Collection) - post1Id : { viewCount : 100, likes : 45,
我正在使用快速入门示例中的 Spring Social 和 Thymeleaf 进行开发,但我意识到每个 Controller 只支持一个 Facebook 对象。这意味着示例无法为多个用户提供支持,
我关注了基本的 Spring Social Facebook,它很有效。但它要求我登录浏览器。 您知道如何使用在 Spring 程序中输入的电子邮件和密码登录吗? 图表: 其他程序(发送电子邮件和密码
我想获取我关注的用户帖子列表。在conrtoller我写: @posts = Post.where(id: current_user.followers(User).map(&:id)); 在 Vie
我试图了解 ProviderSignInController 是做什么的,但我很难理解它。 因此,当我单击使用 facebook 登录时,我会转到 facebook 登录页面,然后在输入我的凭据后调用
我正在使用 Spring Boot starter social Facebook 来通过 Facebook 对用户进行身份验证/授权。 我想添加一些 Permissions ,例如 邮箱 为了检索用
我正在使用 Spring Social 通过 Facebook 或 LinkedIn 获取信息。它工作完美,我得到了我想要的,但我遇到了一个问题:它非常慢。 例如,使用 linkedin 访问我的联系
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我们正在构建一些“sociable”单元测试(大于“单元”但明确不调用外部服务或数据库的测试)。我想知道如果 future 的开发人员编写了一个确实调用的测试,C# 中是否有一种方法可以让测试运行器抛
有什么方法可以使 Follow Us 文本与 sprite 图像内联? http://jsfiddle.net/e2ScF/66/ Follow us:
我是新来的,在互联网上看过很多这个网站和视频,现在我的 CSS fort 有问题,我会打个招呼,看看是否有人可以帮助我。我正在纠正一个网站,并在我的导航栏上有一个滑动条。但是文本 witch is h
对于那些只想切入正题并知道我在问什么的人。我的问题在下面的段落中进行了编号和加粗。 我费了好大劲想弄清楚1.)如何为 Android 社交网络应用程序实现适当的通知系统?到目前为止,我收集到的所有
我使用 spring 安全登录。现在我正在尝试添加 spring social facebook 登录,但是我得到很多错误信息。 首先,当我尝试使用与 spring social guide 相同的方
我在使用 spring-social 获取 id 和 name 以外的参数时遇到问题。 依赖关系: org.springframework.social
我正在启动 ServiceStack 社交引导 API 示例来看看它是如何工作的。 我点击了“登录”链接,但什么也没发生。我查看了代码(参见附件图片1) sign in 在“登录”链接的点击事件中,我
我是一名优秀的程序员,十分优秀!