single page application can't get current page meta tag for facebook share
angularjs, facebook, html, javascript
Solution
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.
Problem
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