Having a weird problem with social icons on my page.
G+ is working perfectly but the Twitter Share button + FB Like button do not load up when my html page has finished loading.
Twitter:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
here I only see the plain text "Tweet" (as a link) when the page finished loading. Not the actual twitter button.
Facebook (using some rails code here to display the current URL), here I don't see anything:
<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=.......";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<%= request.original_url %>" data-width="100" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
Funny thing is:
After the page has loaded and when I hit the reload button (CMD+R), the icons are showing up perfectly!
No idea how to solve that issue.
I have tried to show the content using JS only when the document has finished loading but that did not solve it.
The turbolinks gem caused the problem.
Solved by following these tips here:
http://reed.github.io/turbolinks-compatibility/twitter.html
http://reed.github.io/turbolinks-compatibility/facebook.html
<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>
<div class="fb-post"
data-href="https://www.facebook.com/photo.php?v=10153444775720220"
data-width="550">
<div class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/photo.php?v=10153444775720220">
Publication</a> de
<a href="https://www.facebook.com/tsahalfr">
Tsahal-Armée de Défense d'Israël</a>.
</div>
</div>
Related
The greeting_dialog_display is not working. Or have I misunderstood something..? I've set greeting_dialog_display="hide", but the popup still shows up.
[See live example of issue on codepen][1]
[fork and edit pen][2]
Code example:
<!-- Load Facebook SDK for JavaScript -->
<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 = 'https://connect.facebook.net/fi_FI/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="1160695934081727"
greeting_dialog_display="hide">
</div>
False alarm. The plugin just caches what ever position it's in. So to test you'll need e.g. Chrome incognito with always closing all incognito windows in between.
I'm trying to integrate facebook plugin page into blogger ?
I am following the steps in https://developers.facebook.com/docs/plugins/page-plugin/#
My facebook page is https://www.facebook.com/YourWebsiteTraffic
First remark, there is no preview of the plugin (this normally should appear)
I had integrated the first code after the tag of blogger theme:
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1639125536140367&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
However, After entering the second part below in a new widget:
<div class="fb-page" data-href="https://www.facebook.com/YourWebsiteTraffic/" data-tabs="timeline" data-width="300" data-height="300" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"></div>
I get this new code after the body tag:
I'm totally lost now, can somebody please help. Thanks a lot
To solve it: go to the page settings and chane page visibility to Published :)
How can I change the size of the image in this script to be larger? I see nothing in this script about height.
<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.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/pages/Crown-Jewel-Coins-and-Currencies/2408904309248837" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
You can't actually change the size of the image from that script. That script outputs an iframe of the Facebook social buttons, which you can't customize. What you can do, is use your own custom image and use the Facebook Graph API to open dialogs upon clicking on your custom button:
https://developers.facebook.com/docs/sharing/web
Hi I am trying to run the same code on JSFIDDLE.NET and its working abs fine.
But When I run the code under body tag in browser it shows no result and error in chrome console:
In the end I want to same html file in webView on Android so that I can like a page.!
Failed to load resource file://connect.facebook.net/en_US/all.js#xfbml=1&appId=415120148602947
I think javascript is not running.
Code Goes like This:
<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=415120148602947";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-send="false" data-width="450" data-show-faces="true"></div>
Im using dreamweaver cs5. I'm trying to put a facebook like box with the faces on a website for the first time.
When I preview my website in a browser (not server), the plugin doesn't show so Im guessing there is something wrong with my code.
Any advice is much appreciated.
This is my code:
<div class="float-left">
<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="https://www.facebook.com/UnifiedSweden?ref=ts&fref=ts" data-send="true" data-width="300" data-show-faces="true" data-font="arial"></div>
Try,
js.src = "http:/connect.facebook.net/en_US/all.js#xfbml=1";