Detect a successful share with the new Facebook Share button - facebook

I am using the new Share button on Facebook. Is there a way to detect a share event? I had a look at the FB.Event API but I couldn't find which event matches a successful share.
I used the Share Button documentation page to generate the code I'm using.
JS:
<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=xxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
HTML:
<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button_count"></div>

the share button doesn't provide the possibility to track the share event, at least as far as I know.
If you want to "listen" to share events, you want to do what Fabio suggest and use the share dialog: https://www.facebook.com/dialog/feed?app_id=APP_ID&display=popup&link=http://example.com&redirect_uri=http://example.com/someone_shared_on-fb.php, or something like that.

You can try something like this with FQL : Facebook query language.
SELECT share_count, like_count, comment_count, total_count
FROM link_stat
WHERE url="http://www.mysite.com/some-page"
Check your reponse from this link
https://developers.facebook.com/tools/explorer
SO everything a user share and u want a track just hold its url and run a query there will provide count of likes,share and comments as well
Cheers and keep rolling

Related

Is embedding a Facebook Page as complicated as it seems?

My organization has a Facebook Page that we would like to embed in our website.
It appears the only way to do that is via the Page Plugin (https://developers.facebook.com/docs/plugins/page-plugin).
The only way to create the Page Plugin is to use an app ID.
In order to create an app ID, I need to go through some steps on my personal account - which includes verifying my account with my phone number or credit card - neither of which I particularly want to give to Facebook.
Is it really this complicated or am I missing something? Why doesn't Facebook have a simply embed code like Twitter?
You do not need to register for a developer account or create a Facebook App to use the Page Plugin on web. See: https://developers.facebook.com/docs/plugins/faqs#general
If you visit the Page Plugin documentation while logged out of Facebook, you will see copy-paste code to use without an AppID. ie: Open an incognito tab, navigate to https://developers.facebook.com/docs/plugins/page-plugin, click 'Get Code'.
ex:
<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/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
Use this drop in code as suggested. Be sure you are testing with a real web server not local files in your browser.

Facebook og:image uses the wrong picture

I have some trouble with the picture that Facebook uses when people share posts for my website on Facebook.
When I use the Facebook debug tool you see at the bottom of the page the right picture that needs to be used on Facebook, but when you go to the Facebook post you see an other picture (the first picture on the debug page at the og:image tag). But that picture doesn't have the go:image meta tag, and the post picture is minimal 200x200 px: http://www.just40.nl/wp-content/uploads/2015/03/Dollarphotoclub_68950691-1024x712.jpg
Facebook debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.just40.nl%2Fbloggers%2Fgood-old-smoking-days-dees-12%2F
How can I fix this?
Finally I found the thing that's removed the <head> tag from the page. My customer add this by her own for the new Facebook API at the top of the header.php file and distorted the head for the Facebook parser.
<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/nl_NL/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
see how the parser see your page here .
Now fix the following errors
og tags are supposed be in the head section of the page html.If it doesn't find it there, it will infer it according to its own liking.yours are in body tag
your page contains multiple occurrences of og:image . fix that .

How to edit "page plug-in" code of facebook graph api

I am a beginner to facebook graph api.I have a facebook page,https://www.facebook.com/ILMISM .In my website I want to place button,so that whenever people click on that button they could like my page.I googled on it and watched many videos on youtube,though didn't get it properly.Finally I copied and pasted some code provided by facebook in my source file.That code is
<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/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-href="https://www.facebook.com/ILMISM" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"></div>
and I got output as shown in the following image.
But I don't want my output like this.So I want to edit this code as,
<div class="fb-page" data-href="https://www.facebook.com/ILMISM" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><img src="like us on facebook.png" /></div>
Then it is showing output as follows
Now whenever user clicks on on this button they could like my page.I am unable find an answer to how to achieve this?
Like CBroe's comment states, you cannot create some button which will make a user like your page instantly. you will have to use the page plugin.
There is one other solution, however, which only applies to web apps that implement a server side OAuth 2 login flow: Once your users are logged into your webapp, your server can publish a og.likes OpenGraph action on the user's behalf. You can implement this functionality anywhere in your app and make it look any way you want, but you should be aware that Facebook enforce their platform policy and branding policies.
For more information, please see the og.likes docs, especially the branding guidelines about this. Be aware that using any OpenGraph action in your app requires that you submit it for review, as documented here

How to fetch/embed facebook's photos/videos/statuses?

I'm trying to embed Facebook's photos, videos or even statuses, but I couldn't fetch anything from Facebook,
For example, I'm trying to embed this Photo Post: https://www.facebook.com/photo.php?fbid=441525965965373&set=a.310879465696691.71407.295546697229968&type=1&theater
First (trying oEmbed services):
Facebook doesn't support an oEmbed interface
Also, I think that Facebook is blocking web-scraping
so some services like Noembed (or Embedly) will work fine to embed content from Twitter, Youtube or even other sites that doesn't support oEmbed interface, but they won't retrieve anything from Facebook, for example, trying to call the service with:
http://noembed.com/embed?url=https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D441525965965373%26set%3Da.310879465696691.71407.295546697229968%26type%3D1%26theater
will give:
{
url: "https://www.facebook.com/photo.php?fbid=441525965965373&set=a.310879465696691.71407.295546697229968&type=1&theater",
error: "no matching providers found"
}
Second (trying YQL):
when trying to fetch it using Yahoo's YQL like this:
http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url='https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D441525965965373%26set%3Da.310879465696691.71407.295546697229968%26type%3D1%26theater'%20and%20xpath='//meta|//title|//link'%20and%20compat='html5'&format=json
it will give nothing, and you can even try it here in the YQL console
Question is:
How on earth could someone fetch anything from Facebook?
Finally :), Facebook now supports a new feature that enables us to embed "Public Posts", So the short answer & all we need to know about Embedded Posts is in this link:
https://developers.facebook.com/docs/plugins/embedded-posts/
But to embed the answer here ;) , let's do the following:
1- Include the JavaScript SDK on your page once, ideally right after the opening <body> tag (don't forget replace the appId below with your own application ID)
<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&appId=334259852684024";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2- Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"></div>

Can we use the Facebook Comment Box plugin to display comments of an FB post?

We scrape starred Facebook posts on our FB page via the API and save them in our DB. Now we want to show those starred posts on our site and have a comment functionality.
The problem is that we need this to be bi-directional, so a comment made on FB shows up on our site and vice versa.
I tried setting the data-href to the unique URL of the Facebook post (http://facebook.com/{PageName}/posts/{PostId}) but that doesn't work (different comments on the FB post page and on our version of the post). Also tried combinations of http, https, www, PageId or PageName.
Of course we could get it through the API but that wouldn't be optional as our site has no Facebook login functionality and we'd prefer users to post without having to authorize anything.
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>Kommentare</h1>
<div class="fb-comments"
data-href="https://www.facebook.com/FacebookDevelopers/posts/10151631557213553"
data-width="470"></div>