I use the facebook like and share button on my website. However on some pages the button just appears after I refresh the website (F5). I use the following code:
<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/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And then further down where I want my like and share buttons (this part is in haml):
%div.fb-like{"data-href" => "http://www.mywebsite.com#{request.fullpath}", "data-send" => "true", "data-width" => "450", "data-layout" => "button_count", "data-show-faces" => "false", "data-font" => "arial"}
When I click on a link and land on any page the buttons do not show up, when I press F5 the buttons show up after the reload.
I use Ruby on Rails 4.0, jQuery and I also use turbolinks with rails (I'm not sure, but this migt be a problem).
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 got following code from facebook developer's page and it work fine:
<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.5&appId=916488391727774" ;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-follow" data-href="https://www.facebook.com/zuck" data-layout="standard" data-show-faces="true"></div>
I want that whenever user update input field with his profile URL, follow button should update and display his record instead of zuck's default account. How is it possible with jquery/javascript?
Note:- I just used the above code for fb-follow button and didn't used it's API's or anything extra.
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've added the facebook like button on my tumblr page. But each time I click on the "load more" button, the facebook button doesn't appear on the next articles. I think I have to recall the facebook script at this moment to make it work. But i don't know how.
Here is the facebook script I have in my 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/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And here is the part of the footer where I have to load the rest of the post on my page (I think…):
<footer{block:PermalinkPage} class="individual-footer"{/block:PermalinkPage}>
{block:IndexPage}
{block:IfLoadMoreLink}
<div class="load-more">
{block:IfLoadMoreText}{text:Load More Text}{block:IfLoadMoreText}
</div>
{/block:IfLoadMoreLink}
▲
{/block:IndexPage}
Thx for your help.
From https://developers.facebook.com/docs/reference/plugins/like/ I got this script to show the like button in my website
<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/fr_FR/all.js#xfbml=1&appId=155899567847";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://website.com/project/hello" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
I only have the appId and the url, can I check is current user liked my page ?
I looked in google and I found some examples using PageId and I dont know how to get it
PageID is necessary for checking that page is already liked or not from another source. If you are in the same page (your facebook page) it means there is no need to get that id as it will automatically have it from the session or somewhere else.
You can get the PAGE ID by one of the following way,
http://hellboundbloggers.com/2010/07/10/find-facebook-profile-and-page-id/
http://rieglerova.net/how-to-get-a-facebook-fan-page-id/