In a website i have a left menu that change the right side using ajax. Fine, quick. The right side is a .load file, only this file change.
I would like to give the possibility to the user to share the current view in Facebook. But in this case when the .load file change, Facebook SDK must also reload.
Like on the other parts of the website, I've add:
After :
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyAppID',
xfbml : true,
version : 'v2.2'
});
};
(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/it_IT/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And where I want to display Like and Share buttons:
<div class="fb-like" data-href="MyURL" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
Facebook SDK load only when the first time, when I load the complete page include the .load page. So fb buttons are not displayed. Is there a way to force Facebook sdk to load ?
Thanks.
You don’t need to load the SDK multiple times (in fact, the code is specifically written to not let you do that).
What you need to do, is tell the SDK that there’s new elements in the DOM, that you want to be parsed into social plugins – and that’s what the FB.XFBML.parse method is for.
So call that method after you added new elements to the DOM – either for the whole page, or only for a specific sbu-tree of the DOM, by passing a DOM element reference as parameter.
Related
I have a problem with CKEDITOR 4.x. We work a lot with embed objects: twitter, Facebook posts, VINE, Youtube etc. We need to user to be able to see the embed content.
For those using IFRAME, we just disable the iframe plugin and now the placeholder is gone. We are able to see exactly the content of the embed on the editor.
For those services using DIV + SCRIPT like FACEBOOK, we are unable to have a WYSWYG view on the editor. For example, this is a Facebook embed 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/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/gizmodo/posts/10153278450443967" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/gizmodo/posts/10153278450443967"><p>Everybody knows companies like Keurig and Nespresso really just want to sell you bad, wasteful coffee for over $50 a pound.</p>Posted by Gizmodo on Friday, May 8, 2015</blockquote></div></div>
I believe the problem is the scripting is not working on the edit view.
Is there an issue way of doing this?
i am trying to load external sites in a div on clicking to the respective tabs. i am new to ajax jquery cud any one can suggest for correct solution.
i have tried this
You can only do this using an iframe due to cross domain restrictions. See http://en.wikipedia.org/wiki/Same_origin_policy
To get around this you can change the #test element to be an iframe
and rather than ajax loading try something like:
$("#test").prop("src", link);
I've updated your fiddle to show a working example.
http://jsfiddle.net/Ztxsx/5/
Essentially all you need Javascript wise is:
$('#nav ul li a').on("click", function(e) {
var url = $(this).text();
var li_link ='http://www.' + url + '.com';
e.preventDefault();
$("#test").prop("src", li_link);
});
I have a Facebook like button that is loaded using ajax.
The button works, but strangely in firefox it doesn't appear.
<fb:like href="#Model.Url" show_faces="true" height="30" width="400" ></fb:like>
In Firefox the html produced comes with the height = 0px. Why?
<span style="height: 0px; width: 400px;">
<iframe id="f2b3cbcbf388e" class="fb_ltr " scrolling="no" name="f3cdf7e205a545e" style="border: medium none; overflow: hidden; height: 0px; width: 400px;" ....
This doesn't happens on Chrome.
Related to facebook I only have this before close body tag
<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_PT/all.js#xfbml=1&appId=00000";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
I'm still investigating the cause, but in my case, I think it is because the containing div is hidden at the time of the XFBML parse. Still looking for a better solution but this can be fixed by clearing the added height css manually like so:
FB.XFBML.parse(document, function(){
$('.fb_button_container iframe').css('height','');
$('.fb_button_container .fb-like > span').css('height','');
});
this uses jquery... you could easily not use it if you prefer.
Also in this case I had added the like button inside of a container with class "fb_button_container" -- that is not something auto-generated.
If I have more than 1 Facebook like button per page, he has a strange behavior.
I moved the button to the details page instead of the list page and this solved my problem.
I had the same problem. Button was rendered correctly in all other common browsers except Firefox. Somehow the span's inline style was set to 0px in Firefox. Thanks to theozero I finally managed the button to be rendered correctly. Like theozero I had the Facebook Like Button placed within a div that is hidden with JS on page load. With theozero's answer I found Facebook's documentation of the FB.XFBML.parse and placed their re-parse function exactly at the end of their originally provided Facebook JavaScript SDK (last line):
(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'));
FB.XFBML.parse();
And voilà the button was rendered!
EDIT: Too happy too soon. That only worked, cause immediately on page load I unhid the div containing the button. I than put the parse function into the JS that unhides the div. That works. It does. But now the element isn't toggling smoothly anymore... Argh! Facebook! Hole!
EDIT: So! Now it's done. Had to call the re-parse as callback on the slideToggle function, to re-parse the element when the toggling action was finished. .slideToggle('slow', function(){ FB.XFBML.parse(); }); Sure, the like button visibly pops up then suddenly, but I can live with that, although I could let the button fade hin somehow.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
I designed a ASP.NET page named kk-container.aspx to be used as a control which will be loaded in Default.aspx with jQuery load function. The page kk-container.aspx has many HTML controls and javascript events bound as in the example.
<!--Sample code from kk-container.aspx-->
<div id="kk-container">
Action
<!--Many HTML controls here-->
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#kk-action").click(function () {
return false;
});
});
//Many javascript here.
</script>
I load this kk-container.aspx into Default.aspx with such code in the Default.aspx.
<div id="mycontainer"></div>
<script type="text/javascript">
$("#mycontainer").load("kk-container.aspx");
</script>
Everything works fine up to here. However, I have to load this kk-container.aspx in a few more divs in the Default.aspx. This causes conflict in the id's of HTML controls. $("#kk-action").click() doesn't work for all. How can I solve this problem and load kk-container.aspx multiple times in one Default.aspx page.
More to say: I considered giving random id's for HTML controls for each load of kk-container.aspx. However I had already designed my stylesheet mostly with id selector. And I use a packet javascript, valums uploader, working in kk-container.aspx. It will also require edit. If there is a simpler way, I don't want to code all over.
I expected too much from jQuery and asked this question desperately. I should have decided first whether I will use "kk-container" thing once or multiple times in a page. For loading "kk-container" thing multiple times, I had to consider these:
Designing CSS using class selectors instead of id selectors.
Producing random id for my HTML elements like in this question.
Writing my javascript functions so that they work compatible with those random id's.
Therefore loadind "kk-container.aspx" in a page with jQuery load wouldn't cause any id conflicts.
Anyway, I did a mistake and didn't want to rewrite my code. I found a solution to load content of "kk-container.aspx" in my Default.aspx page without a problem. Instead of jQuery load function I used iframes.
Since there is already an item with id "kk-action",
Action (like this one)
loading a content having an item with id "kk-action" will cause trouble.
$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.
Instead create an iframe without border and load that content into iframe.
function btnEdit_Click(recordID) {
$('#mycontainer').html("");
var kayitKutusuFrame = document.createElement("iframe");
kk-Frame.setAttribute("id", "kk-iframe");
kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
kk-Frame.setAttribute("frameBorder", "0");
kk-Frame.setAttribute("hspace", "0");
kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
document.getElementById("Mycontainer").appendChild(kk-Frame);
if (isIE = /*#cc_on!#*/false) { //For IE
setTimeout(function () { heightAdapter() }, 500);
}
}
I didn't gave random id to "kk-iframe" because I will not use it mulitple times. It now resides in FaceBox. To make the iframe flawless, it needs to be auto-resized. My heightAdapter() function will do it. Not only when a content is loaded into iframe but also content changes dynamically because of my clicks.
Here is the actual code for resizing iframe to fit content by Guy Malachi.
function calcHeight(content) {
//find the height of the internal page
var the_height = content.scrollHeight;
//change the height of the iframe
document.getElementById("kk-iframe").height = the_height;
}
Here is my heightAdapter() function which will work both when content is loaded and when I clicked something causing content to expand.
function boyutAyarlayici() {
var content=document.getElementById("kk-Frame").contentWindow.document.body;
calcHeight(content);
if (content.addEventListener) { //Forn non-IE
content.addEventListener('click', function () {
calcHeight(content);
}, false);
}
else if (content.attachEvent) { //For IE
content.attachEvent('onclick', function () {
calcHeight(content);
});
}
}
And the following is a link in a repeater. Since the link will be replicated, it should have unique id by asp server.
<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>
Now, whenever I click one of the replica links, the content having an item with id "kk-action" can be loaded into the my flawless iframe which will be created in "mycontainer".
<div id="mycontainer" class="kk-iframe" style="display:none"></div>
And the content will be shown in my fancy FaceBox.
You're going to have to use classes to style the elements. There can only be one unique ID per page, so you are going to have to generate different IDs or use class selectors in your JavaScript such as:
$('.kk-action').click()
The above is probably the best way to go as it will give every element with that class the binding
I have jQuery masonry to layout the list items on my website, each list item has a fb:comments. Loading SDK asynchronously, even putting the method "$container.masonry( 'reload' );" after FB.init() the list items are still overlapping.
I tested putting an alert() box before reload masonry, if close the alert box quickly the items are still overlapping but if close it after a while it display correctly with margin. So I assume the masonry reload runs before the content of fb:comments finish loaded.
How do I trigger masonry reload after the content of fb:comments finish loaded? Not by button click. Images show when it's overlapping and masonry reload after fb:comments.
If you use xfbml version of plugins, you can subscribe to xfbml.render - fired when all plugin (calls) completes.
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins
Step-1: In the HTML (put it where you want the social box to be shown):
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
Step-2: In the footer (just before ending the <body> tag):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
//FB.init({ status: false, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function(){
SocialBoxesLoaded(); //-->this is what we want (any custom Function) :)
});
};
(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.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function SocialBoxesLoaded(){
//...Your Custom Code...
}
</script>