CODEWITHSUNDEEP
angularjsfacebook-opengraphphantomjs
Oleg Belousov
Oleg Belousov

Reputation: 10121

Open graph issue with AngularJS + Phantom

I am running a setup of AngularJS AJAX application, and using PhantomJS and the Angular-seo library in order to serve the crawlers with actual mark up instead of JS code.

Unfortunately I am getting an error that says:

The privacy settings for this attachment prevent you from posting it to this Timeline.

This seems to be an issue that concerns many users, bu has received no attention whatsoever at the developers community.

My of meta tags, which I must mention that are all filled with the current information from test that I've conducted:

  <meta property="og:type" content="website">
  <meta property="og:title" content="{{model.title}}" />
  <meta property="og:description" content="{{layout.og.description()}}" />
  <meta property="og:image" content="{{layout.og.image()}}" />
  <meta property="og:url" content="{{layout.og.currentUrl()}}" />

What could be the problem

Upvotes: 3

Views: 3026

Answers (3)

Janka
Janka

Reputation: 1988

The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives. http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

Upvotes: 0

NicolasMoise
NicolasMoise

Reputation: 7279

Actually you can't have Angular (or any other front-end js) do that because the Facebook crawler Doesn't execute javascript. Therefore, these tags have to be created in the backend (using node.js or php for example)

See How to do Facebook Open Graph friendly meta tags with client-side template engines like AngularJS, Mustache, Handlebars

Upvotes: -1

kwhitley
kwhitley

Reputation: 755

If you Inspect those meta tags, even while angular is running, the content attribute is left like that... unlike a ng-bind or something that will replace at runtime. To circumvent this, I created the following directive:

angular
  .module('app')
  .directive('ngContent', [
    function() {
      return {
        link: function($scope, $el, $attrs) {
                $scope.$watch($attrs.ngContent, function(value) {
                  $el.attr('content', value);
                });
              }
      };
    }
  ])
;

Then implemented in the following manner:

<meta property="og:description" ng-content="myDescriptionFunction()" />

This will create a clean content="Some description here." attribute in the meta tag as that content dynamically changes... (watch the element in chrome inspector as you browse) seems to work for me!

Upvotes: 2

Related Questions