I am attempting to add a Facebook like button with a comment box to a site. When you click the like button you will be like the Facebook page itself, that is, Facebook.com/thesitesname. Where can I find a good starter example that will allow this to work?
I am getting the like button but no comment box...
<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=111116358987784";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like"
data-href="http://www.facebook.com/ASITE"
data-send="false"
data-layout="box_count"
data-width="50"
data-show-faces="false" d
ata-font="arial">
</div>
In the page for the Like Button, the last question in the FAQ section:
When I click the Like button, the popup window (or "flyout") doesn't
show. Why?
If the Like button is placed near the edge of an HTML element with the
overflow property set to hidden, the flyout may be clipped or
completely hidden when the button is clicked. This can be remedied by
setting setting the overflow property to a value other than hidden,
such as visible, scroll, or auto.
Related
I went to this page : https://developers.facebook.com/docs/facebook-login/web/login-button
I copied and pasted the code they give, in my HTML index:
<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.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
(that's right after the body tag, as they recommend), and then :
<div class="fb-login-button" data-max-rows="1" data-size="icon" data-show-faces="false" data-auto-logout-link="false"></div>
anywhere in the page, it doesn't work. The button does not show up. If I add a red border to it, a vertical red line appears, showing that the button doesn't render.
I have tried with different options, locally, on my server, and in a codepen (http://codepen.io/jeremythille/pen/EWWRdy?editors=1100), no avail.
No error in the console, no problem in the network tab. "sdk.js" is found and loaded.
What am I missing?
You need to initialize the facebook sdk first. See this page: https://developers.facebook.com/docs/javascript/quickstart
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.
I have added the facebook like box plugin code in my web application from https://developers.facebook.com/docs/plugins/like-box-for-pages
In my application there is only one html with body tag and I am dynamically adding
other html with only div tag as per requirement to that html. I added the following code in one of such divs.
<div class="fb-like-box" data-href="http://www.facebook.com/drsailablog" data-width="265px"
data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
</div>
I am following whatever mentioned in the directives to use the plugin i.e
<body>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Now the problem is, its showing the respective like box for the home page while it gets loaded for the first time, but when I move through navigation bar from one menu option to other, I am only able to see the container where I wanted to show like box and no content there. I checked the calls, its not even sending any request to facebook. but if I refresh the page its sending request and I am able to see the content again.
What am I doing wrong?? I have tried adding this function within script tag in that div also but still same issue is there i.e loading only on refresh
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>
Ok..so here's the problem..i want to have facebook commenting on my productsDescription page..there are many products so when we click on a particular product it redirects to the productDescription page with the itemID in query string..now what i want is all the products have there own specific comment box.Now when i use the below code , with different itemID in query string the same comment box opens.
For Eg: If a user comments on a mobile(www.tc.com/gyjd.aspx?itemID=55) , and then navigates to view a laptop(www.tc.com/gyjd.aspx?itemID=77) he sees the comments he gave for the mobile. But what i want is with different itemID in query string the comment box should be new.Hope am not confusing.
<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-comments" data-href="tc.com/gyjd.aspx" data-num-posts="5" data-width="500"></div>
I've solved that by doing a div called fbBtns.
Then I set it's innerHtml property on page behind:
fbBtns.InnerHtml = "";
Simply add the proper querystring to the data-href attribute:
<div class="fb-comments" data-href="tc.com/gyjd.aspx?itemID=<%=Request.QueryString["itemID"]%>" data-num-posts="5" data-width="500"></div>
For VB.NET:
<div class="fb-comments" data-href="tc.com/gyjd.aspx?itemID=<%=Request.QueryString("itemID")%>" data-num-posts="5" data-width="500"></div>
You need to have unique urls for the page (Facebook ignores the query string). You could tell Facebook to use fake urls by setting the data-href to be something like "tc.com/qyjd/4" etc. With .net 4, you can easily set up page routes.
to do this as well.