I'm adding a facebook share button to each post on a Wordpress (Using Facebook Share Button New plugin), it works ok for each post/page except when i'm loading them trough ajax, the result it's a normal Facebook like button but the popup (to write a comment) appears inside the button it is not expanded.
To check go to: http://iwanttobeher.com/ and then click on any face at the bottom of the page, then test the like button and you'll see what happens.
I don't know what to do, i tried to FB.XFBML.parse() after loading the content but the result is the same.
Switching to HTML5 didn't help in our case. What did was to remove the FB object just prior to new content being inserted into the page via Ajax:
delete FB;
wrapper.html(response.data);
We reload full pages via Ajax and so new page content recreates the FB object and re-initializes XFBML anyway. Not sure if this workaround would work if we reloaded only parts of the page though.
The original answer is here.
I've managed to fix it by changing the implementation to HTML5 instead Iframe or XFBML using Facebook's tool to generate like buttons: https://developers.facebook.com/docs/reference/plugins/like/
Related
I have a website where I am switching from addThis to addToAny for social sharing buttons. The problem is that the share buttons are contained in content that is loaded dynamically with jquery Waypoints infinite scroll feature (which uses Ajax). When the page first loads (so no Ajax called yet) everything works great, but when a user scrolls and more content is added that contain the share buttons, the new buttons don't work in that they don't show the share options on hover or click.
There are supposedly fixes for this if using templates from the likes of Drupal or Wordpress, but my site is not built using any of these templates. This was also a known issue with addThis, and to get around the problem you simply need to add 'addthis.toolbox('.addthis_toolbox')' into the success portion of the ajax call and things would work.
I haven't had any success getting addToAny to work after ajax returns. They have something that looked promising: a2a.init('page'), but that doesn't work. Has anyone had this problem and have any suggestions on how to fix it? Thanks!
If there so many share button on one page you can call this after ajax success:
$(".a2a_dd").each(function() {
a2a.init('page');
});
Or if there only one share button, you can use this after ajax success:
a2a.init('page');
If want to know more details go through this document
According to the AddToAny API (https://www.addtoany.com/buttons/api/), you should use a2a.init_all(); if you are loading a number of new share button sets at once via AJAX.
Using a2a.init('page'); only initializes the last uninitialized buttons instance on the page. That might be fine for you, depending on how many new buttons that you load at a time.
Example: you have a blog site that loads new posts when the user scrolls to the end of the page. If you are only loading one new set of share buttons for the new content, a2a.init('page'); should work. If instead, you are loading a few new posts at a time, that each get their own set of share buttons, you will want to use a2a.init_all();
Hope this helps someone!
I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
If you carefully notice facebook, you will understand that the when you visit one page to another then the whole page is not refreshed or redirected but the URL changes when navigating to new page. It is more clear when chat windows are open, they remains static during page loading. As other website does this by using the # but facebook does not.
There is another example came to me: http://www.davidwalsh.name/. Visit the site and open other pages within their site and you will understand what I mean. Don't forget to notice the URL change.
How they do this?
Added More: I want a way that the page content will be loaded with ajax, change the URL for bookmark feature but when changing URL it should not reload / refresh the page by not using # (hash).
You have two questions:
For the URL change you can put the path instead of the # in the href property of the anchor (e.g /otherlink).
For opening the chat or opening some div does not require to send it in the url, its the onclick event on the div and its expands. Also the chat remains open may be thay set cookie or flag when the chat is first time opened and checking and changing the chat with flag they are setting.
As suggested by #andytuba
For Facebook, Google "hash navigation ajax".
For DavidWalsh, google "history API".
If using the current Chrome, Firefox, and Safari, when switching between
http://www.facebook.com/my_name
http://www.facebook.com
The side panel for feed and chat, and any chat box actually stays. I thought when the URL changes, the page has to refresh as a whole, but obviously, this is not the case here. How is that done?
On IE 9, the URL actually became http://www.facebook.com/#! and using the "hash" to do ajax without refreshing the page, which is more understandable.
You can change the URL and page history from javascript without actually reloading the page.
See this answer on another question.
Note, that if you type the new URL by yourself and press enter the whole page reloads.
this might be the internal linking in the webpage with hidden DIVs with IDs and onClick those Hidden DIVs get visible with javascript and with AJAX content is loaded it will be a good if you browse the site disabling javascipt
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?