1

I was trying to implement facebook like button using iframe in my AngularJS website. But facebook button is not loading.

//html portion
<div ng-controller="FBCtrl">
  <iframe ng-src="{{likeURL}}"></iframe>
</div> 

//controller portion
.controller('FBCtrl',['$scope', function($scope){
  $scope.likeURL = 'http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fflyerbd&width&layout=standard&action=like&show_faces=true&share=true&height=80';
}]);

Basically i want a simplified way to use facebook like button in my website.

Thanks in advance.

Fahad Billah
  • 429
  • 1
  • 6
  • 19

1 Answers1

2

You should use the $sce service in your controller and recognize the URL as trustworthy:

.controller('FBCtrl',['$scope', '$sce', function($scope, $sce){
  $scope.likeURL = $sce.trustAsResourceUrl('http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fflyerbd&width&layout=standard&action=like&show_faces=true&share=true&height=80');
}

Related: How to set an iframe src attribute from a variable in AngularJS .

Community
  • 1
  • 1
musically_ut
  • 34,028
  • 8
  • 94
  • 106
  • I used it but nothing happened. In fact app crashed. i ran it from my localhost. – Fahad Billah Nov 24 '13 at 19:30
  • @FahadBillah Define "app crashed"? What was the error produced? Could you post an example? – musically_ut Nov 24 '13 at 19:31
  • 1
    its my chrome's problem and i can't determine why this button is not showing in chrome cause no error report shows in my chrome's console(its my chrome's problem again). But your method did work. i ran my site in firefox and everything is fine. like button is showing where it suppose to be. Thanks a lot. – Fahad Billah Nov 24 '13 at 19:43