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.
Related
Using Tableau Server 9.2. I am playing with the Javascript API to embed vizs in web pages. It works nicely except I want to hide the top part of the viz page, everything including and above the navigation breadcrumb part. The part circle in red is what I want to remove from the embedded viz. What options can be used to hide this part of the embedded viz?
Here is my html and js code to embed the viz.
<script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
<div id="tableauViz"></div>
<script>
var placeholderDiv = document.getElementById("tableauViz");
var url = "https://tableau.byu.edu/#/site/DCE/views/Tableauworkbooksanddatasources/UnpublishedWorkbooks?:embed=y";
var options = {
hideTabs: true,
width: "800px",
height: "700px",
hideToolbar: true,
onFirstInteractive: function() {
// The viz is now ready and can be safely used.
}
};
var viz = new tableau.Viz(placeholderDiv, url, options);
</script>
For var url
Replace the current link with the link that is inside under share button .
Do not use the link under Embed , rather use the one below Email.
share button can be found when you open your viz. inside tableau .
Let me know if this works .
When you add a "link" type post to Tumblr:
...your admin shows a small thumbnail of any image associated with that link:
However, this doesn't show on the frontend of the site:
Is there any way to pull this image through?
Tumblr Link Theme Operator and Thumbnail
Tumblr recently added some new theme operators to allow for link thumbnails.
I presume this works the same as video thumbnails work and may only be available if the linked site creates the thumbnail.
{block:Link}
{block:Thumbnail}
<img src="{Thumbnail}" alt="{Name}">
{/block:Thumbnail}
{/block:Link}
Reference: http://www.tumblr.com/docs/en/custom_themes#link-posts
This is how it's done:
Click on your blogs name on the dashboard above or in the bloglist on the right hand side.
Click on Customize on the right hand side (or just go to the template you chose)
Once you're in there you can change the HTML on top on the left hand side, right under the templates name and icon
There you look for the
{block:Link} and before the description you add:
{block:Thumbnail}
<img src="{Thumbnail}" alt="{Name}">
{/block:Thumbnail}`
I'm trying to customize the appearance of a facebook 'Send' button.
I generate the button using the code provided in the docs, however I don't have a clue of how I could modify the button's image or text ?
Could anyone give me an example? I guess javascript is my only option here?
My code looks like this right now:
<fb:send href="http://www.mywebsite.com/something"></fb:send>
This generates a button that looks like this:
Thanks!
You cannot customise the <fb:send /> button. However, you can achieve the same functionality using FB.ui (http://developers.facebook.com/docs/reference/javascript/FB.ui/). Use the send method, eg.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
You can always create your own link and style it however you wish, then add the link from this list of all social sharing button links list - this works for sharing to all sorts of social sites.
For Facebook's share link, replace [URL] and [TITLE] with your data using urlencode()in the following code in your link's href:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
You're pretty much SOL when it comes to customizing these Facebook buttons. They have intentionally designed their buttons so that you can't change or customize them beyond the limited scope provided by Facebook.
Facebook's send button is in an iframe. If you wait for the iframe to load, you can select its contents with $('iframe').contents(). So replacing the text would look like
$(function(){
$('.fb_iframe_widget iframe').on('load', function(){
$(this).contents().find('.pluginButtonLabel').text('Custom Text');
});
});
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 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>