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
Related
I am currently writing a website for a local charity run preschool and they would like their Facebook feed on the site.
For this I have used the Facebook Pages plugin. Unfortunately, following their instructions, I don't get anything on the website.
I'm not getting any errors in the console, and the Facebook URL is valid.
I understand to view this specific page the user needs to be logged in to Facebook, which I am, and I'm also able to view the page in the same browser with no problems.
The code I have 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_GB/sdk.js#xfbml=1&version=v2.8&appId=261857213845517";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and the HTML is:
< div class="fb-page" data-href="https://www.facebook.com/thevillageplaygroup/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">< /div>
(note, I've added spaces in the div opening and closing tags as I couldn't get it to show up otherwise, sorry).
I've tried changing the Facebook URL to https://www.facebook.com/facebook as in the examples and that works so I'm presuming it's something to do with the page itself but I can't find any privacy or security settings which seem relevant.
EDIT
The page has security restrictions in place which mean the user needs to be logged in to Facebook and in the UK.
My account is able to access it ok through Facebook, just not using the plugin on the website
Any help is greatly appreciated.
As pointed out by CBroe, it looks to be an issue with using the page feed for a page with privacy restrictions
“Facebook Pages with privacy restrictions cannot be embedded.”
I, wrongly, assumed that seeing as was logged into Facebook and could access the page that I would be able to see the feed. It seems Facebook disallow use of the plugin for pages with privacy restrictions regardless.
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.
I have a Google apps script based web app. I want to add a Facebook plugin to it to have "Like" feature. The Facebook code is trivial to implement in a regular non-Google apps web page but I am having trouble integrating it in web app as the Caja compiler mangles the div id "fb-root" and as a result no "Like" button shows up on my page. See the plugin code below.
Has anybody managed to make this work? I have searched quite extensively and found an example of embedding javascript but no method to embed HTML that does not get mangled.
<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&appId=<FACEBOOK_APP_ID>&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/"></div>
Its not possible as you already discovered, because of caja.
My apps script Application has a Facebook Login all done with urlFetch() HTTP Requests. You can't interact with Facebook through an SDK from Apps Script, but you CAN issue HTTP Requests to Facebook. The Facebook Developers site has information about this. You can issue GET requests to Facebook and receive a response.
Facebook Graph API
I'm not sure about the "Likes", but I have a Facebook Login set up on my Google Apps Script application.
See my answer here on StackOverflow:
Use the Facebook API in a Google Apps Script web app?
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>
Hi i'm trying to place a facebook like button in website With the following 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'));
FB.Event.subscribe('edge.create',
function(response) {
alert("Thank you for liking my page");
}
);
</script>
<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="292" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>
But the FB.Event function not working when i tested, I think i can use this trigger event only if i use FB.init and running inside fbAsyncInit() function.this came to know by searhing web.
i don't know these things exactly.Now the problem is Fb.init require appId,channelUrl and few more.I'm confused i didn't created any Application and i'm not creating i'm just trying to place a facebook like button to my website then how come can i provide appId.
Can anyone explain me about this appId.Does it required to create like button and to create Fb.event when a user likes my page like thanking them or am i using the given code wrongly?
It is recommended to use an App Id for every Social Plugin (like the Like Button).
And here´s an overview of how you should implement the Facebook SDK:
https://developers.facebook.com/docs/javascript/quickstart
You better place that FB.Event code right where it says "Additional initialization code..." - Because right now, you are using "FB" when it´s not even initialized.
And this is where you can create an App: https://developers.facebook.com/apps
Here's some docs about the app id —
search for fb:app_id on this page: https://developers.facebook.com/docs/sharing/webmasters#markup
You specify the app id, so that you can use Facebook Domain Insights to view analytics for traffic to your website from Facebook. Apparently FB Domain Insights is some FB tool that webmasters can use to get information about how the content on their website get shared inside Facebook.
However the FB page about Facebook Domain Insights is gone ... and instead says you should look for some "platforminsights" tool. I suppose FB made some changes to their analytics stuff, recently.