Now and again when the page refreshes (about 1 in 3) my facebook like button goes all weird and glitchy as seen in this image...
This is the code i am using to show the button (with PAGE_URL as actual URL):
<fb:like send='false' layout='standard' href='PAGE_URL'
width='500' show_faces='false' font='tahoma'></fb:like>
All the javascript SDK is correct and the like button works, it just does that weird thing shown in the image.
Anyone know why this is?
Looks like the image resource isn't loading. Why don't you take a look at the source when you observe the error and confirm that the image should be displayed. If it's simply not loading, that'd be a Facebook issue, and you should log a ticket.
Related
I have added a facebook like button to my page, however when it is clicked the flyout appears, and then disappears.
At first I thought it was other elements on the page hiding it, but the problem persisted even on blank pages.
Tried both the iframe and html 5 codes that were generated by facebook and neither seems to work.
iframe - http://jsfiddle.net/aDK95/1/
Html 5 - http://jsfiddle.net/L9nZZ/1/
In both cases it seems to been hidden by the hidden_elem class:
#facebook .hidden_elem {
display: none !important;
}
It seems very similar to this bug reported at FB that was reported in May. However there doesn't seem to be much movement on it.
Has anyone else come across this? Know of any work arounds?
I came across this bug and it flummoxed me for quite a while. The steps I took to rectify it are as follows:
Ensure that you have put in the Javascript SDK initialization
Make sure that the #fbroot div is not inside a hidden div
In the Open Graph tags on the page, the og:url has to be set to a https protocol
and not a http protocol
Run your page through the Facebook Debugger at https://developers.facebook.com/tools/debug to check for any errors. Another interesting point which helped me resolve this was that when you put in your "URL to Like" value in the Like configurator, the dynamic like button generated shows whether that url would work well or not.
Ok, weird issue:
1) Go here on an iPhone (Safari browser): http://powellcreative.com/our-team/
2) Click any of the team images to get to the team member page
3) Click the back button on the browser
4) The image is disappeared on the Team page now
I know this question is kind of old, but I was looking for a solution to a similar problem and after searching, I found a solution. Hopefully this helps other people with the same problem. The problem is when you give iOS a javascript event like onmouseover or onmouseout it doesn't like it, mainly because when your finger is "mousing over" an element in iOS, you are actually clicking on it, so this is the solution I came up with that seems to reload images after hitting the back button in iOS.
Here it is:
Make sure all images are in their own separate div with a distinctive name.
Example:
<div name="div1"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></div>
In the javascript head part of your page you want to insert this:
window.onpageshow =
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";">';
}
}
This will check for page back since Mobile Safari uses bfcache and reload your image into the div. Hopefully this helps OP or someone else.
I encountered a problem on facebook where my like button does not appear sometimes and in iframe the chance that it won't appear is higher.
Well, I just added the script for fb like using xfbml declared xmlns:fb="http://ogp.me/ns/fb# part and etc. Then used this code for my like button:
<fb:like href="MY_URL_HERE_1" send="false" layout="button_count" show_faces="true"></fb:like>
and then I used the same code with different a URL for another like button 4 times. My other work works fine which has only one button, but on the page where I used 5 like buttons the problem then happens.
Anyone knows how to solve this?
You should try to use the like code you can find here: https://developers.facebook.com/docs/reference/plugins/like/
Or you can try this: http://forum.developers.facebook.net/viewtopic.php?pid=354148#p354148
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps