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.
Related
I have a page with users' photos. Each photo is in a card. I would like to allow users to share each picture separately.
This is my html:
<div class="sharethis-inline-share-buttons" data-url="http://{{recent.photo.url}}" data-title="Check out this picture by {{uploaded_by}}"></div>
But it only shares the base website (http://myexample/photopage/)
I see I could also use <span> or Javascript, but it doesn't look like that allows for sharing different links within a page.
You need to change the data-url property dynamically with javascript:
const buttons = document.querySelector('.sharethis-inline-share-buttons')
buttons.setAttribute('data-url', `http://${recent.photo.url}`)
buttons.setAttribute('data-title', `Check out this picture by ${uploaded_by}`)
For the record, I'll add the link to sharethis' page, where the customization options are listed: https://www.sharethis.com/support/customization/customize-share-urls/
Although this is too late, but you can change sharethis properties including title, url, description etc like this-
// render the html
<div id="my-inline-buttons"></div>
var config = {
url: 'YOUR_URL_HERE',
title: 'YOUR_TITLE_HERE',
description: 'A_LONG_DESCRIPTIN_OF_YOUR_CHOICE',
image: 'https://YOUR_IMAGE_URL',
};
// load the buttons
window.__sharethis__.load('inline-share-buttons', config);
You can find more in this link of Custom ShareThis.
How can I add allowfullscreen to featherlight.js for a video?
The example on the http://noelboss.github.io/featherlight/ website for the iFrame video has allowfullscreen on it, I just can't figure out how to add it to my own video url.
The format for adding the video URL I'm using is:
link
I can't figure out where to put the allowfullscreen since adding it to the URL doesn't work, I also tried this:
link
But it didn't work.
Thanks!
Charles
Either do like the example (have an hidden <iframe> already present on the page), or else use the afterContent callback to add the attribute.
I am using fancybox(lightbox like js popup library) to show photo and it's title in popup. Photos are uploaded by user with supplied title. I also escaped the photo title when displaying the photo in html. the html tags are simple as:
<img src="/files/909221123.medium.JPG">
As you can you see, the js tag in title is escaped. However, it runs regardlessly when displayed in fancybox popup - I click the photo which prompts a js alert popup then a fancybox popup with the photo.
That is a XSS problem for sure but I thought it is so obvious and fancybox shouldn't have this sorta problem at the first place. Did I do something wrong here? and How to fix it?
thanks.
Sounds like Fancybox is treating that string as HTML instead of text.
You could hack the plugin. There is code that handles the title such as...
return '<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main">' + title + '</td><td id="fancybox-title-float-right"></td></tr></table>'
As you can see, by the time title is there, it has had its entities resolved.
Otherwise, you could strip out portions of the string which look like HTML tags with a regex.
oHi,
I'm displaying a html page which contains a form with some input text fields and a submit button.
If i display the page using loadRequest: everything works fine.
If i display the same page using loadHTMLString:baseURL: the submit button is not working anymore.
The adress which is supposed to be called is :
http://..../lire.php?id=33570#bloc_commentaire
If i log the adress it tries to reach i got :
applewebdata://BF6F3D92-9F36-40CA-A3EB-BCD3F14852B6#bloc_commentaire
Do you have any idea of what i should do to be able to post a form loaded statically using loadHTMLString:baseURL: ?
Thanks,
Vincent
The problem occurs because your web view doesn't know where to post the data because the html is loaded from a string and not a specific web server.
Make sure you are setting baseURL correctly in your call to
[webView loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL]
Details:
When the webview finds a relative url in the html, it joins it with the baseURL to form an absolute url which can be used to submit or click on. For instance:
Given http://www.test.com/foo/ as baseURL and a relative url tag lke click me
When the user clicks on the link, the view will make a request to http://www.test.com/foo/bar/hello.php
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>