javascript – MEAN.js社交分享？

2023年6月1日 180次阅读

所以我使用MEAN.js构建了一个应用程序,我对文章(博客)部分进行了一些更新,以获得更好的搜索引擎优化,可读性,设计等.但是,我似乎无法弄清楚的一个问题是,如何分享文章使用Facebook,谷歌,Twitter等,让他们使用og元标记填充正确的数据.

我想要的是

我想要的是能够从我的MEAN.js应用程序分享文章(博客文章),并在我在社交网站(例如Facebook)中发布链接时显示文章内容.

我做了什么

我已经尝试专门为博客文章创建一个单独的服务器布局,但这打破了很多其他的东西,我意识到工作量可能不值得 – 必须有一个更聪明的方法.

我也尝试在客户端使用Angular更新og元标记数据,但在社交网站获取这些标记之前,这些值不得更新…换句话说,它实际上并没有按照我的意愿行事.

我已经尝试在索引呈现时抓取Angular路由URL,这样我可以在呈现索引之前更新这些og元值,但是我无法在req数据中的任何位置找到这些值.

我认为问题是什么

从概念上讲,这是我认为正在发生的事情：

>请求命中我的服务器,但由于它是使用Angular路由的单页应用程序,因此req.url值只是根页(‘/’).
>加载索引文件,该文件使用标准服务器模板布局.
> Angular被加载并进行AJAX调用以获取Article数据,然后将该数据绑定到页面上的变量.

所以基本上布局是在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以“漂亮”的方式在社交媒体上分享我的文章？我是在正确的轨道上吗？目前的文章设置是否可行？我是否需要构建一个完全不使用Angular的博客模块？

最佳答案 我终于在没有Nginx或MEANJS框架之外的任何其他东西的情况下为我的应用程序工作了.你的里程可能会有所不同,但我认为无论如何我都会分享结果.它适用于我,但可能不适合你.

基本上我已经设置的是一种获取非散列URL并重定向到散列URL的方法.因此用户可以共享他们的个人资料,例如example.com/myprofile,它将重定向到example.com/#!/profile/myprofile.

然后我创建了一个严格用于社交机器人的单独布局(虽然回想起来我不确定这是完全必要的)并在网站被抓取时提供单独的布局.我这样做：

社会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文件中,我明确检查用户代理以确定是否需要新的布局.如果我找到机器人,我会从我的数据库中获取与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();
        }
    });

同样,您的里程可能会有所不同,但这对我(部分)有用.我还在努力社交分享整个网址(包括哈希).希望它在某种程度上有所帮助.

点赞