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
Related
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.
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.
Just today I noticed on our Wordpress blog that the Facebook iframe is showing up as a blank, bordered box in the middle of my page.
The problem is that when Facebook's JS injects the content, it ends up with a div:
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -2000px;">
...iframes here...
</div>
</div>
That "top: -2000px" is not enough to get it off of the visible screen, so it's stuck in the middle of my page.
Is there some way to fix this? I can do something hacky like hide the #fb-root element or shove it way off the screen. That's the one div that's actually in my code -- the rest, including the offending style attribute, are injected by FB's code.
My code just looks like:
<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="(actual URL here)" data-send="false"
data-layout="button_count" data-width="150" data-show-faces="false"></div>
Looks like Facebook fixed the bug, because the problem has disappeared.
I noticed this bug too. But isn't fixed yet.
This bug is not related to wordpress. I see the same behaviour in magento. When the placement of the facebook iframe is at the bottom of the page and the page is longer than 2000px, this occurs. That's also the reason I didn't mention it on any page.
Has anyone an idea how to fix this? I don't want to wait for a solution from Facebook.
Last week I noticed the same problem in a vBulletin Forum, but today I checked again and the iframes completely disapeared. The empty div "fb-root" still exists.
I too had this problem. I had placed inside an element with relative position and below my blog posts. But when I moved it right after the opening tag the problem was solved.
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 currently have a view page displaying fields containing images or videos from each node. I also am utilizing colorbox to see each image and video.
My Goal:
Add a like button to each node on the view.
The post on facebooks wall needs to link back to the view page which (This is where it start to get complex) will dynamically open the colorbox (last on my priority list for now)
I have used http://drupal.org/project/fb_social which works wonderfully with views but that og:url is going back to http://localhost:8888/node/100. I can continue down this route but I need finer grain control of that url.
I also discovered this post: drupal views facebook like button
which is a little vague. If I simply add the like button code to a view customfield, all views will do is duplicated the button instance over and over. If I click like once on node/4 then all other nodes on the page are also liked...
I really like the Facebook social plugins integration module but out of the box, it points to the full node page. Any advice on how to customize that url? I even thought about using a Path Redirect module but i don't think its a viable solution.
Setup:
Drupal 6.22
Views 6.x-3.0-rc3
fb social plugins 6.x-1.0-beta9
Easiest way to do this is going to be by overriding the template for your specific view and you'll also avoid the added overhead of another module load. You want to add the Facebook like js code into the top of your page somewhere (ex. in the view header) (from: http://developers.facebook.com/docs/reference/plugins/like/)
<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=132294920190866";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then in the specific row template for each of your rows, add the output code
<div class="fb-like" data-href="http://localhost:8888/myurl" data-send="true" data-width="450" data-show-faces="true"></div>
For theming the row template, check out the views 2 theming guide:
http://drupal.org/node/352970
or try the semantic views module if you expect to be doing more theming or don't want to mess with template files:
http://drupal.org/project/semanticviews