I've been having a problem with a facebook like-box for a client, and me and a friend simply can't figure out what we're doing wrong, and it's been close to three days of staring at it. Here's the code we get from developers.facebook.com:
<div id="fb-root"></div>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/mywebsite/11111111111"
data-width="280" data-colorscheme="dark" data-show-faces="true" data-stream="true" data-header="false"></div>
Nothing shows up. We did get this piece of code to work, but it doesn't quite work the way we want to:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/pages/mywebsite/1111111111" width="280" colorscheme="dark" show_faces="true" border_color="" stream="true" header="false"></fb:like-box>
You have to log in to facebook to see the feed, but the client want it to always show up.
You need to add http: in line 5 of the head script like this...
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
its a html5 thing.
Perhaps you should try the latest code; Facebook appear to have modified the Like box generator.
Related
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'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...
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
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.
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.