Facebook Plug-in Facepile Issue - javascript

I'm having trouble with understanding the basics of the Facepile plug-in for Facebook developers. I've successfully got Facepile up and running and displaying a picture of someone who 'likes' the page, as long as they're a friend.
That's all good. But there's another feature of Facepile that I just can't get working. And that's to simply display how many people have liked the page. On the Facepile developers page it says:
If some users have liked your page, but none of the viewing users friends have liked it, the plugin will display the total number of users who have liked your page.
However, this simply just doesn't show up for me. Is there something I might be missing? Here's my code as it appears:
<div id="fb-root"></div>
<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_GB/all.js#xfbml=1&appId=00000000";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="http://connect.facebook.net/en_US/all.js
#appId=0000000000000&xfbml=1"></script>
<div class="fb-like" data-href="http://myurl" data-send="false" data-width="450" data-show-faces="true"></div>
<div class="fb-facepile" data-href="http://myurl" data-action="watch" data-max-rows="1" data-width="300"></div>
Bare in mind that I replaced the App ID and URL with dummies. An insights you might have will be hugely appreciated!

Update: After reading your question carefully, I'd recommend you to try the IFRAME version once to see if that works for you.
<iframe src="http://www.facebook.com/plugins/facepile.php?href={SITE_URL}&size=small&width=292&max_rows=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px;"></iframe>
Old Answer:
You don't need facepile, assuming "like count" is the only thing you need. Simply use Open Graph for it.
Open Graph:
https://graph.facebook.com/{PAGE_ID}
eg. https://graph.facebook.com/314467614927
Returns:
{
"id": "314467614927",
"name": "Angry Birds",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/276791_314467614927_795266395_s.jpg",
"link": "http://www.facebook.com/angrybirds",
"likes": 20292918,
...
}
Now retrieve the like count from the JSON, and populate it wherever you wish to display it using JS.

Related

Increase variable if an action has happened

I am currently working on a website, on this website I have a Facebook share button and a Twitter tweet button. Then I have a javascript variable set to 0, now the problem I am having is that I would like to check if a person has shared on Facebook and made a tweet on Twitter by increasing the variable by 1 for when sharing on Facebook and increasing by 1 when tweeting and then if the variable is 2 then I would like to create a pop up.
I have gotten this which is the Facebook button
<div id="fb-root"></div>
<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/da_EN/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then I have the tweet button
<div id="twitbut">
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
And lastly the Javascript variable which I have in the same html script
<script type="text/javascript">
var shares=0;
if (shares == 2)
</script>
My issue is that I am not really sure how to check if a person has shared on Facebook or Twitter, but I would think I have to get the variable in the button codes and then when a person clicks that button it would increase the variable. But then if I were to do it like this, wouldn't you just have to click the button and then the person doesn't have to share the actual post? which is kind of the goal.
I am sorry if it is a bit cluttered, but in simple what I want to do is ask the user to share on both Facebook and Twitter and if the person does this they are rewarded with a coupon code. This code would then be in a pop up.
Thanks in advance.
The method based on subscribing to the click event on the buttons is not reliable. You absolutely do not know if the user did or didn't like your page.
If you do it for business purpose, please stop!
The only safe way to know if the user did like your page is by having him authenticate via facebook/twitter, then ask their apis.
I think you should take a look to :
https://developers.facebook.com/docs/graph-api/reference/user/likes/

FB-Javascript API

I am implementing Facebook feed functionality in my website using 'FB-like-box' I was able to replicate it similar to that shown in Facebook developer site.
But when I again started testing the code(no change has been done) today I am getting additional link in the like box and I am not able to get rid of it.
You can see the additional links 'Like Page', 'Boom Post' in the screenshot. Can some one please advice me how to get rid of the additional links. Please find the code below.
<div id="fb-root"></div>
<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=515052318562357&version=2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-container">
<div class="fb-like-box" data-href="https://www.facebook.com/NayaCompLtd" data-width="300" data-ajax="false" height="360" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false">
</div>
The Like Button is there because it´s a major element of the Like Box.
The "Boost Post" Button is only visible for you, and i highly doubt that you can remove it either.

Including facebook event on page throws errors

I'm trying to embed a facebook event on my website. I got the code from facebook with the 'embed event' button, but it keeps throwing errors: Invalid App Id: Must be a number or numeric string representing the application id., FB.getLoginStatus() called before calling FB.init(). and This Facebook post is no longer available. It may have been removed or the privacy settings of the post may have changed.
This is the code:
<div id="fb-root">
</div>
<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="#" data-width="466">
<div class="fb-xfbml-parse-ignore">
Post
by
User.
</div>
</div>
Note: I replaced all href's with "#" for the sake of my privacy :P
If your website is based on a Wordpress installation please double check your post page source code. If the <script> tag was stripped probably it's caused by the user's permissions. Try to embed a facebook post as Wordpress administrator and it'll work. In my case that was the stupid problem...

Facebook Like Box Won't Appear (Bootstrap)

So this has been driving me crazy, I've been searching similar questions but they all have solutions that seem not to work for me. I am trying to add a like box to my bootstrap website, but it won't appear. I am using the HTML5 version of the widget but have tried others to no avail, have this after my body tag:
<div id="fb-root"></div>
<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 = "js/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I made a local verison of all.js since GET was failing to retrieve it from the Facebook servers, even after I uninstalled Ghostery.
Next, I added my like box using:
<div class="fb-like-box" data-href="MYSITEURL" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
With my actual URL of course, and no go, no matter how I arrange the code in a div by itself or anything. Any help is greatly appreciated!
I'm assuming that you're testing the site on a local server, so all you need to do is add "https:" to this line:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
Like this:
js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1";
Cheers!
I don't think your problem is related to Bootstrap. See http://bootply.com/94974, this use the same code as you do and works well.
Note in your example code js.src = "js/all.js#xfbml=1"; refers to a local all.js where something like //connect.facebook.net/nl_NL/all.js will be needed.
It works without problem. Need to be sure the referred fanpage (data-href) is a valid one.
It can be FB page permissions setup issue. If the page visibility is restricted for audience from specific location(s), then the likebox doesn't appear.

How to show facebook like button even if user isn't logged into Facebook?

Currently, the code <div class="fb-like" data-href="https://facebook.com/myappurl" data-send="false" data-width="450" data-show-faces="false"></div>
Only shows the like button if I am logged into Facebook in the browser. How do I get it to display even if the user is logged out?
Like wordpress.org for example...See the bottom left hand corner of the page.
Thanks in advance!
Best,
Alex
The only situation where a like button will not show up (assuming it has been implemented properly) is if the page that is to be liked is a Facebook page that has a restriction placed on it. This includes country and age restrictions. If your Facebook page has a restriction, the user needs to be logged in to Facebook so that the user can be verified as to be allowed to see the like button.
It displays regardless of whether a user is logged in or not. If the user is not logged in and clicks on Like, they get a popup that says
"You must log in to see this page."
Are you sure you're including the fb-root div and the Javascript?
<div id="fb-root"></div>
<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_GB/all.js#xfbml=1&appId=Your-App-ID-HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Categories