I found a helpful post on deploying the Facebook share button in my app from Hyperarts. You can check it out here:
However, I encountered two issues while trying to implement this feature. First, I struggled passing post.id and post.caption to the Facebook script.
The second problem lies in the link shared on Facebook wall for each post. The link should lead to a specific post on my single-page site when clicked, but it currently needs an auto-scroll function to achieve this.
Any suggestions or help would be greatly appreciated! Here is a snippet of my AngularJS controller:
function MyController($scope) {
$scope.posts = [{"title": "AAtitle",
"content":"AAcontent",
"caption":"AAcaption",
"id":"adfddsf"dfsdfdsds
},
{"title": "BBtitle",
"content":"BBcontent",
"caption":"BBcaption",
"id":"dfgfddrggdgdgdgfd"
},
{"title": "CCtitle",
"content":"CCcontent",
"caption":"CCcaption",
"id":"dhgfetyhnncvcbcqqq"
}
]
}
Additionally, here is the code for integrating the Facebook SDK:
<div id="fb-root"></div>
window.fbAsyncInit = function() {
FB.init({appId: 'MY APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
And finally, here's a glimpse at how I've set up my HTML:
<div ng-controller = "MyController">
<ul>
<li ng-repeat = "post in posts">
<div> {{post.title}} </div>
<div> {{post.content}} </div>
<div> <script type="text/javascript">
$(document).ready(function(){
$('#{{post.id}}').click(function(e){ //unrecognized expression: {{post.id}}
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: ' link to every {{post.id}}',
caption: '{{post.caption'}},
});
});
});
</script>
<div id = "{{post.id}}">share </div>
</div>
</li>
</ul>
</div>