var app = angular.module('plunker', ['ezfb']);
app.config(function (ezfbProvider) {
ezfbProvider.setInitParams({
appId: '386469651480295',
version: 'v2.5'
});
});
app.controller('MainCtrl', function ($scope) {
$scope.fanPages = [
'https://www.facebook.com/ParrotTalks',
'https://www.facebook.com/G.E.M.OfficialPage',
'https://www.facebook.com/ArtistaPerfetto',
'http://pymaster.logdown.com'
];
});
app.controller('WidgetCtrl', function ($scope) {
var widget = this;
$scope.$watch(function () {
return widget.href;
}, function () {
widget.rendered = false;
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script src="https://pc035860.github.io/angular-easyfb/angular-easyfb.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a href="https://github.com/pc035860/angular-easyfb">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
</a>
<div class="container">
<h2>angular-easyfb social plugins demo2</h2>
<p> </p>
<div class="row" style="margin-bottom: 20px;"
ng-repeat="pageHref in fanPages" ng-controller="WidgetCtrl as widget">
<span ng-init="widget.href = pageHref"></span>
<div class="col-sm-6">
<input class="form-control" type="text" ng-model="widget.href" />
</div>
<div class="col-sm-3" style="padding-top: 5px;">
<div class="fb-like" onrender="widget.rendered = true" data-href="{{ widget.href }}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="col-sm-3" style="font-size: 18px;">
<strong ng-show="widget.rendered" class="text-success">Rendered</strong>
<span ng-show="!widget.rendered" class="text-muted">Rendering</span>
</div>
</div>
</div>
</body>
</html>
/* Put your css in here */