Menu
I'm trying to implement the facebook share button in my app, however I can't seem to get it to work on and idk why this is what I have so far.
html(/post/some-random-string)
<div id="fb-root"></div>
<meta property="og:site_name" content="App">
<meta property="og:url" content="/post/{{data.permalink}}">
<meta property="og:title" content="{{data.title}}">
<meta property="og:type" content="blog">
<meta property="og:image" content="https://i1.ytimg.com/vi/tIWPnxEpNQg/maxresdefault.jpg">
<meta property="og:description" content="{{data.preview}}">
<body >
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=580882498674160&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
// this facebook share button doesn't appear.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
//so i manually make one.
<a href="" ng-click='facebookShare();'>Share</a>
</body>
controller.js
$scope.facebookShare= function(){
return window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
}
it works however it didn't read the meta tag i have written above on the html page instead it reads from my index page
index page
<!DOCTYPE html>
<html ng-app='app'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript>
<meta http-equiv="refresh" content="7">
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="pure-u-1 text-center">
<title>Symsal- Oh no ! We need Javascript to work !</title>
<h3> Please Enable javascript </h3>
</div>
</noscript>
<head>
<title ng-bind='title'></title>
// some css file
</head>
<body>
<div class='puretype'>
<div ng-controller="MasterCtrl">
<div id="layout">
<!-- Menu toggle -->
<a href="" id="menuLink" class=" white menu-link">
<span></span>
</a>
<div id='menu' class="pure-u-1">
<div ng-bind-html="userView"></div>
</div>
</div>
<div class="pure-g-r">
<div id="feed-container" class='pure-u-1 slide'ng-view=''></div>
</div>
</div>
</div>
// some javascript files
</body>
</html>
facebook debugger
854
Not All Pages Matter Equally for SEO Don't let your consultant or toolset fool you; you don't need a meta description on every page, or even close to every page. Remember that all content requires future maintenance. It would be far better to have no meta description than a poor or outdated one.
Facebook documentation recommends one additional <meta> tag, though it's not required. A tag that denotes the name of the Web site in which the shared page resides: <meta property="og:site_name" content="European Travel, Inc."> This provides an alternative image description for those who are visually impaired.
How to Check and Validate a Meta Tag. To make sure the meta tag has been added, go to the site on this domain and check the source code. Go back to Facebook settings in the "Meta tag confirmation" tab and click Confirm. After confirmation, a "Confirmed" mark will appear next to your domain.
Android App Links are only available on Android Marshmallow (6.0) and upwards. They are HTTP URLs that can be used to link to content inside a native app if it is installed on the device. For example, you have the URL https://example.com/product/red-shoes and the same content is also available on your native app.
What jackypan1989 said is true, you will have to use the absolute url. But one other thing that I'm pretty sure happens is that Facebook won't run your JavaScript code, thus the part
<meta property="og:url" content="/post/{{data.permalink}}">
will never get replaced with
<meta property="og:url" content="/post/the-page-that-was-shared">
This problem that you are having could also prevent Google from crawling your page.
We had the same problem, and we used https://prerender.io to get around it. You can use it on your own server, or use one of their free/paid services.
154
You already have a body defined around your ng-view. Then your view has its own body. So you are trying to inject a body inside of a body which isn't going to do what you want.
Notice that your controller does not control the HTML element that contains the Meta tags. It only controls code that it contains (a div within the body in your case).
You can add a controller to the HTML tag or you can use $rootScope.
Lots of answers to this here: How to dynamically change header based on AngularJS partial view?
In your controller that handles the ng-view:
app.controller('MainControl', function ($rootScope, $scope, Config) {
...
$rootScope.canonical = Config.domain;
});
I needed to dynamically set a canonical link, but the principal for metas is the same. In your header:
<link rel="canonical" ng-href="{{ canonical }}" />
You'll probably want to use ng-bind for a meta tag.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
