I am using Facebook Chat plugin version 8.0 on a site powered by OpenCart (though I suspect it will happen in any CMS). It always takes a few seconds for the chat plugin to fully load and the icon to appear in the lower right corner of the page.
However, when the icon is displayed, the page immediately scrolls to the top. So if a user already started scrolling down, he is interrupted and the page is reset.
Any idea what might be causing this and how to prevent it?
This is my code (vanilla code auto generated by Facebook in Settings->Messaging->Add Messenger to your website):
<script>
FB.init({
xfbml : true,
version : 'v8.0'
});
};
(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
greeting_dialog_display="hide"
attribution=setup_tool
page_id="xxxxxxxxxxxxxxxx"
theme_color="#67b868">
</div>
The bug is currently being tracked here: https://developers.facebook.com/support/bugs/619023102320436/.
At the moment I have implemented the following hack (around the load time of the plugin):
var originalScrollTo = window.scrollTo;
window.scrollTo = function() {};
setTimeout(function() {
window.scrollTo = originalScrollTo;
}, 5000);
Turns out this behavior only happens on a PC web browser in Responsive Design Mode emulating a smartphone (Tested on Chrome 84.0 and Firefox 79.0).
On an actual smartphone it doesn't scroll to the top.
Edit: I was mistaken, it does scroll to the top on my smartphone after all. Please see the temporary solution to this issue in the first answer.
Related
What do I need to do to get a FB like counter working for a website - not a FB page/app/anything else.
I've followed the dev guide here https://developers.facebook.com/docs/plugins/like-button
I've read the following questions & comments Facebook Like Button doesn't increment https://stackoverflow.com/questions/13211964/cannot-make-standard-facebook-like-button-code-work Like button action not showing on user's walls and others.
I've put this at the top of the page so it's just after the body tag when it's rendered
<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>
I've put this where I want the like counter to go (website name changed to avoid unnecessary accusations):
<div class="fb-like" data-href="http://mywebsite.com" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
Result:
Button appears as expected.
When clicking like a (appears to be) JS window appears asking to add a comment - cancel and comment buttons are disabled.
When I enter text, buttons are enabled.
Click comment
Like increments from 0 to 1
refresh page - counter resets to 0
Subsequent clicks flash up the JS dialog and it disappears and counter stays at 0 (can just about see that it flashes up 'You like this' with further comment box but disappears before I can do anything)
No message on FB user's wall to indicate any like or anything about the website
Do I need to create a FB app? I see some references to appId but not on the FB 'like' developer page.
Frustrated!
A dummy's guide would be appreciated.
You need to create an FB app at https://developers.facebook.com/ for the like button to work. Once you have created your app, make sure that you select your app in the Get Code window when creating your like button.
This issue just started occurring in the past couple of weeks, so it may be related to an IE11 update or a change with FB's widget.
I have a FB share button on my site.
<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>
is in the document head, as well as <div id="fb-root"></div> and <div class="fb-share-button" data-href="http://myurl.com" data-width="60" data-type="button"></div> in the body.
It works fine in Chrome, Firefox, Safari and IE10 (as well as IE11 w/ IE10 emulation turned on). But in IE11 certain CSS animations stop working. Animations set by default in the stylesheet work, but animations fired via :hover as well as inline CSS added by jQuery just won't play.
I can confirm that other :hover effects still work, and setting inline (non-animation) styles via jQuery also work. It's just animations for some reason. I've also tried animating various different properties, but none of them work.
If I remove the Facebook script from the document head, the animations start working again.
Has anyone else encountered this or know why it might be happening?
Note: This is on IE v11.0.9600.16428, Win7 x64
I just posted a very similar question and then found a solution. I wonder if the same will work for you. See the answer at Loading Facebook SDK in IE11 breaks CSS animations
so I've tried every solution to add a like button for my facebook page to by website (local, not published). But for some reason none of the solutions have worked. Here's the code I'm trying in a blank html file. And by blank I mean the head, title, and body are empty, other than the below code in the body section.
<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-like" data-href="http://www.facebook.com/ResumeBuildingVolunteering" data-send="false" data-width="450" data-show-faces="true"></div>
Because you're working on your local system the
//connect.facebook.net/en_US/all.js#xfbml=1
will not work. This is because the link is a "Protocol-relative URL" which takes the current protocol you're using.
So if you're working locally on a Mac, that URL will look for a file at file:///en_US/all.js#xfbml=1 which doesn't bring up anything. You will need to change the url to
http://connect.facebook.net/en_US/all.js%23xfbml=1&status=0
This script should be put at the bottom of your HTML, just before it's closing </body> tag. Reason being, when it's invoked it parses the page and renders Facebook's elements. If it's invoked prematurely, like in your case, this elements won't be found (because they don't exist yet) and therefore not rendered. Another option is to invoke the script only after the DOM is ready, using jQuery $(function(){...} or by other techniques, or use an async load of the FB page like explain here
I had the same problem. Try using the actual button div like this first:
<div class="fb-like" href="https://www.facebook.com/mypage"> </div>
Notice the s on https.
It worked for me.
I have installed this plugin on my word press (http://www.delicatebonds.com/office-romance-dos-and-donts/), but the font color of comments is white. Background of this box is also white. Just because of this, comments aren't visible.
I must either change the background of this box to black or i need to change the color of comments. Someone please help me. I don't know how to make changes in this plugin........
Why not using the light version of the plugin?
Just remove the colorscheme="dark" attribute from the plugin code.
Also it seems that you are using an old wordpress plugin?
Try adding the plugin code manually to your single post file and check the result:
1-Include the JavaScript SDK on your page once, ideally right after the opening tag (*replace with your app_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=YOUR_APP_ID";
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 (remove the href value).
<fb:comments href="http://example.com" num_posts="50" width="500" colorscheme="dark"></fb:comments>
This is the solution I created for this. Wrap the Facebook Comments code inside a <div> and add a class to it. Like this:
<div class="fb-background-color">
<div class="fb-comments" data-href="" data-width="100%" data-numposts="5"></div>
</div>
Then, add the CSS background property to it:
.fb-background-color {
background: blue !important;
}
Hope to help you somehow!
I have a like button on each page in a wallpaper site. There is an option to edit the title of the wallpaper. Hence, the URL of the page changes as well, like it happens in Stack Overflow. In Stack Overflow, when the title of the question changes, the old URL is redirected permanently to the new URL. The same logic is implemented in my site.
The problem is, say if there are 10 likes for a wallpaper page
http://www.example.com/1/old-title-wallpaper
If the title is changed slightly to 'new title', the URL changes to
http://www.example.com/1/new-title-wallpaper
In the new page, the like count becomes 0. Is there a way to make the Like button detect 301 redirection.
The like button uses the og:url tag. On your new page you need to keep the old og:url value.
This means you are not giving an explicit url for the like button code..
Hence the FB server picks the current url of the page where the like button is placed..
Check the iFrame of like button and see that you mention the data-href there ..
Sample 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#appId=xxxx0&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://xxx.com" data-send="true" data-width="450" data-show-faces="true">
</div>
Link to Like Pluggin
http://developers.facebook.com/docs/reference/plugins/like/
Also, you can use Metadata tags to explicitly make the FB server pick the url as desired by you .. Use Open Graph tag og:url for that
See http://developers.facebook.com/docs/opengraph/