I inserted the HTML5 likebutton code as described on the facebook developers pages into my HTML5 project.
But the likebutton won't show up on the iPad. Only when I use the old iframe version of the code.
Did I overlook something?
The code:
<!doctype html>
<html>
<head>
</head>
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</body>
</html>
Reference: http://developers.facebook.com/docs/reference/plugins/like/
I found the like button would not show up on my iPad as I had already liked it. My wife had not and it showed up on hers. Both IOS 10.2.1 both iPad2 Air.
The like button works fine otherwise on an iPhone and desktops...
Related
I have added multiple facebook like box to a webpage. They are all showing up. When I click on "Like", there's an error showing up :
Sorry, this feature isn't available right now: We're working on this issue and will have it fixed soon. Check the Known Issues on Facebook page for more information.
https://www.facebook.com/plugins/error/coded?code=1404003&message=Sorry%2C+this+feature+isn%27t+available+right+now%3A+We%27re+working+on+this+issue+and+will+have+it+fixed+soon.+Check+the+Known+Issues+on+Facebook+page+for+more+information.&hash=AQDmg_dFTgfVQ5o6
The code is pretty simple :
<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_CA/sdk.js#xfbml=1&appId=MY_ACTUAL_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then a simple loop in Rails :
<div class="fb-like-box" data-href="<%= startup.facebook_url %>" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
You can also check the end result here : https://iloveqcstartups.herokuapp.com/
If anyone else ever gets this problem, the solution was to switch over to a full domain name.
I don't know if the problem was herokuapp.com, or the https.
I have a show page with articles, where people can comment and share using facebook. The problem is that the facebook comments and share button only appears after the second time we reload the page! Anyone know how to solve this issue? Here is my code:
<div class="fb-share-button" data-href="<%= request.original_url %>" data-type="button"></div>
<div class="fb-comments" data-href="<%= request.original_url %>" data-numposts="5" data-colorscheme="light"></div>
And in the layout I have this code:
<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/pt_BR/sdk.js#xfbml=1&appId=255630284624962&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I added XFBML facebook like button plugin on my site for activity entities, but button shows only for one of them in random order. Code looks like:
<body>
<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>
...
<fb:like href="<%=activiy1_url%>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
...
<fb:like href="<%=activiy2_url%>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
...
<fb:like href="<%=activiy3_url%>" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
...
</body>
Open Graph tags are present on the page. The same problem for iFrame button. What can be the reason ?
I have following html page:
<html>
<head>
<script type="text/javascript">
var myDiv = null;
window.onload = function() {
myDiv = document.getElementById("myDiv");
};
function buttonClick() {
myDiv.style.width = "200px";
myDiv.style.height = "100px";
}
</script>
</head>
<body>
<div id="myDiv" style="left:10px; top:10px; width:1000px; height:250px; overflow:auto;">
<iframe scrolling="no" id="myIframe" style="width:100%;height:100%" src="a.svg"></iframe>
</div>
<input type="button" id="button1" onclick="buttonClick()" value="resize div"/>
</body>
</html>
and a SVG "a.svg" that is the content of the iframe above:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
<circle cx="500" cy="250" r="240"/>
<script type="text/ecmascript"><![CDATA[
window.onresize = function() {
console.log("resize");
};
]]></script>
</svg>
When i now open the html page on iOS Safari and i click the button to resize the iframe to 200x100 pixels, i do not get the resize event.
But if I do the same on a PC browser like Firefox, I get the resize event.
I know that iframes are handled differently in iOS Safari, but how can I make this working ?
I have implemented the Like Facebook Button in my user control. This is my 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-like" data-href="<%:FBUrl%>" data-send="true" data-width="450"
data-show-faces="true">
</div>
</div>
I tried to add this block on the top of my user control :
<meta property="og:title" content="Welcome to site!" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
But it doesn't appeared the title either the description while I click on the like box.
Can anyone solve this?
You will need to have two user controls.
One for including in the <head> section that defines the og: tags.
And the other user control that you can include in the <body> that has the like html.
I would strongly suggest using the HTML5 version of the plugin code rather than the xfbml version.