I have a page with a bunch of imgs, these imgs link to their own page. For each img, I have a like button, with the url to the individual page.
In FF, the imgs load first, but in Chrome, it seems that the like buttons load first.
How can I get the like buttons to load after the page is otherwise loaded?
Since, you didn't posted any code, I can only give you this link to the jQuery command .ready(): http://api.jquery.com/ready/
If you put a function within this command, it will only be executed after every image or other content of the page (or an element) is loaded.
For example you can add the Facebook like button with jquery after the images are loaded like this:
$(document).ready(
function() {
$("#fbPages").children("li").each(
function(key, val) {
$(val).html($(val).html() + '...FBLIKEBUTTON...');
}
);
}
);
Related
Is there any way to insert facebook like into pop image of fancybox?
fancybox is just another ajax call. you can use HTML5 LIKE buttons
Just trigger the parse function when load complete.
try the simple code below after the fancybox load , you can run:
$("#foo").fancybox({
'onComplete':function() {
FB.XFBML.parse();
}
});
http://developers.facebook.com/docs/reference/plugins/like/
I would like to display a facebook-like button within the Fancybox popup.
The interaction I'm imagining is similar to how Pinterest displays the social sharing buttons to the right of a modal popup (e.g. http://pinterest.com/pin/73465037641354472/). Each image has a unique url so that you can link to the content of the popup directly.
How can I:
Ensure that each image within my Fancybox gallery is attached to a unique URL
Display a Like button in the popup linked to that unique URL
For #1, I found the following code discussed in the following page: this.id inside of fancybox
$("a.fancybox").each(function() {
var element = this;
$(this).fancybox({
'titleFormat' : function() {
var astring = '<span>' + element.id + '</span>';
return astring;
}
});
});
Is this the code that I need? If so, what do I do in the HTML in order for this JavaScript to work properly?
Thanks so much for any help!
You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.
Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.
EDIT
Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags.
http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3
Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.
See http://ogp.me for how to specify og tags.
I'm using fancybox with ajax request to open multilpe fancybox instances on same page:
This is html code:
User
and this is Javascript i've used:
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button_fancy").click(function(){
var element = $(this);
var Ide = element.attr("id");
$("#"+Ide).fancybox();
return false;});});
</script>
Everything could be ok, just 1 problem... first time i load the page, i need to click 2 times over "User" to open fancybox...
If i open fancybox and then i close it, the second time i can click just 1 time...
why?
Thanks
The first click registers the event to the DOM, and the second (and subsequent ones) show the Fancybox.
If using multiple Fancyboxes, you should avoid using ID's like you have there and change it to classes. Not sure why you've got all that code to launch the fancybox, when this should work:
$(".comment_button_fancy").fancybox();
This will Fancybox all elements with the class "comment_button_fancy" and should fix your two-clicks issue. You don't need to put a 'click' event handler around the Fancybox code, as it inherently has that event attached to it.
I am trying to use the sharethis button on a page which is loaded via ajax.
The buttons do not show up. Please help.
Regards,
Pankaj
After adding the new content to the dom, call
stButtons.locateElements();
// or if you want to be a bit defensive about whether the lib has been
// loaded or not:
if (window.stButtons){stButtons.locateElements();} // Parse ShareThis markup
Article another another
Updated 09/2017 Answer
The stButtons object doesn't exist anymore, now you can use
window.__sharethis__.initialize()
To reinitialize the buttons
Updated 03/2020 Answer
As found in The Ape's answer above: https://stackoverflow.com/a/45958039/1172189
window.__sharethis__.initialize()
This still works, however there is a catch if your URL changes on the AJAX request, you need to make sure the URL you want shared is set as a data attribute (data-url) on the inline sharing div. You can also update the title using data-title attribute.
<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>
Use case:
I'm using a WordPress/PHP function to generate specific content based on a query string. If you don't set the data-url attribute on the ShareThis div, ShareThis will hold the first URL that was clicked to share, regardless of the URL update on AJAX request.
This solution will also work for NodeJS based frameworks, like Meteor.
stButtons.locateElements();
is needed in the rendered callback of a template, to ensure that the shareThis buttons will appear on a page redirect.
I was facing the same problem with sharethis and Ajax pagination.
The buttons was not showing after posts loaded by Ajax so I've searched and found this.
I've just added the function stButtons.locateElements(); on Ajax success:
something like success: stButtons.locateElements();
Hope this will be helpful for someone like me.
Thanks
Ibnul
For the new API following solution worked for me
if (__sharethis__ && __sharethis__.config) {
__sharethis__.init(__sharethis__.config);
}
Add this code after loading ajax content.
do this:
window.__sharethis__.load('inline-share-buttons', config);
and config your buttons with javascript.
The following should work with current ShareThis javascript. If sharethis js isn't loaded, the script loads it. If it is already loaded, ShareThis is re-initialized using the current URL so that it works on pages loaded via Ajax. Working fine for me when used with mounted method on Vue component.
const st = window.__sharethis__
if (!st) {
const script = document.createElement('script')
script.src =
'https://platform-api.sharethis.com/js/sharethis.js#property=<your_property_id>&product=sop'
document.body.appendChild(script)
} else if (typeof st.initialize === 'function') {
st.href = window.location.href
st.initialize()
}
Make sure you use your property id provided by ShareThis in the script src url.
In Drupal you can achieve this by adding following code:
(function($){
Drupal.behaviors.osShareThis = {
attach: function(context, settings) {
stLight.options({
publisher: settings.publisherId
});
// In case we're being attached after new content was placed via Ajax,
// force ShareThis to create the new buttons.
stButtons.locateElements();
}
};
});
I found the following solution on one of the addThis forums and it worked great for me.
I called the function as a callback to my ajax call. Hoep this helps
<script type="text/javascript">
function ReinitializeAddThis(){
if (window.addthis){
window.addthis.ost = 0;
window.addthis.ready();
}
}
...
$('#camps-slide .results').load(loc+suffix, function() {ReinitializeAddThis();});
</script>
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};