javascript - MEAN.js Social Sharing? -

-

so built app using mean.js, , made updates articles (blog) section better seo, readability, design, etc. 1 problem can't seem figure out, though, how share articles using facebook, google+, twitter, etc. , have them populate right data using og meta tags.

what want

all want able share articles (blog posts) mean.js application, , have article content show when post link in social sites (e.g. facebook).

what have tried

i've tried creating separate server layout blog posts, breaks many other things realized amount of work wasn't worth - there has smarter way.

i've tried updating og meta tag data angular on client side, these values must not updated before social sites grab tags...in other words, didn't wanted to.

i've tried grabbing angular route url when index rendering can update og meta values before index rendered, can't find these values anywhere in req data.

what think problem is

conceptually, believe happening:

  1. the request hits server, since it's single page application using angular's routing, req.url value root page ('/').

  2. the index file gets loaded, uses standard server template layout.

  3. angular gets loaded , makes ajax call article data, binds data variables on page.

so layout getting rendered (with og meta values) before angular figures out article information grab.

what i'm guessing ideal solution is

in express.js file, app's local variables set follows:

// 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();

these local variables rendered swig in layout.server.view.html file follows:

// note {{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}}">

so ideally think want update these values article specific information before rendering page. problem is, if layout gets rendered before angular figures out article data populate, how can this? again, angular route doesn't appear available anywhere in req object, i'm stumped on how this.

so go original desire - how can share articles on social media in "pretty" way using mean.js? on right track? possible current article setup? need build complete blogging module doesn't use angular @ all?

i got working application without nginx or else outside of meanjs framework. mileage may vary, thought i'd share results anyway. works me, may not you.

basically had setup way grab non-hashed urls , redirect hashed urls. user share profile, e.g. example.com/myprofile , redirect example.com/#!/profile/myprofile.

i created separate layout strictly social bots (though in retrospect i'm not sure entirely necessary) , served separate layout when site scraped. thusly:

social-layout.server.view.html

...some stuff here... //note 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...

then in express file, explicitly check user-agents determine if new layout necessary. if find bot, fetch key data related url db, populate variables, so:

express.js

// code happens after app.locals variables set.     // passing request url environment locals     app.use(function(req, res, next) {         // let's check user-agents see if social bot. if so, let's serve different layout populate og data 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', {                          // update layout variables 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();         }     });

again, mileage may vary, worked me (partially). i'm still working on social sharing whole url (including hash). hope helps in way.


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more