Privacy-friendly HTML buttons to share a URL to social media.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
pixelcode 79768e0d16 correct licence link 5 months ago
web-fonts-with-css all new 11 months ago
Choose mastodon instance.png more screenshots 11 months ago
Link copy success.png more screenshots 11 months ago
Logo.png Logo 11 months ago
Logo.svg Logo 11 months ago
Mastodon example toot.png Mastodon screenshot 11 months ago
Privacy Share Buttons.png Screenshot 11 months ago
README.md correct licence link 5 months ago
copyurl.js all new 11 months ago
index.html English 11 months ago
jquery-3.4.0.min.js all new 11 months ago
script.js more screenshots 11 months ago
style.css all new 11 months ago

README.md

Privacy Share Buttons

These privacy-friendly HTML share buttons give the user the opportunity to share your blog articles etc. to social media without including any scripts or cookies from Facebook, Twitter, etc.

Share to Mastodon

If the user wants to share your URL to Mastodon, he needs to enter his own instance first:

Click to copy

Copying the URL via the black paperclip button will be confirmed like this:

How does it work?

Well, there's just an HTML table with some Font Awesome icons:

<table class="articleshare">
	<tr>
		<td class="teilentd" id="telegramteilentd">
			<a class="teilenbutton" id="telegramteilen" title="Telegram"><i class="fab fa-telegram"></i></a>
		</td>
		<td class="teilentd" id="whatsappteilentd">
			<a class="teilenbutton" id="whatsappteilen" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
		</td>
		<td class="teilentd" id="twitterteilentd">
			<a class="teilenbutton" id="twitterteilen" title="Twitter"><i class="fab fa-twitter"></i></a>
		</td>
		<td class="teilentd" id="mastodonteilentd">
			<a class="teilenbutton" id="mastodonteilen" title="Mastodon"><i class="fab fa-mastodon"></i></a>
		</td>
		<td id="mastodoninstanztd">
			<a id="mastodoninstanz"><i class="fab fa-mastodon"></i> Domain: <i id="https">https://</i><input id="mastodoninstanzinput" type="text" min-length="3" max-length="100" length="50" placeholder="mastodon.social"></input><i id="mastodoninstanzok">OK</i><i id="mastodoninstanzabbrechen" class="fas fa-times"></i></a>
		</td>
		<td class="teilentd" id="emailteilentd">
			<a class="teilenbutton" id="emailteilen" title="E-Mail"><i class="far fa-envelope"></i></a>
		</td>
		<td class="teilentd" id="linkteilentd">
			<a class="teilenbutton" id="linkteilen" title="Link"><i class="fas fa-link"></i></a>
		</td>
		<td id="linkkopierttd">
			<a class="teilenbutton" id="linkteilen2"><i class="far fa-check-circle"></i> Link has been copied!</a>
		</td>
	</tr>
</table>

When you click on one of these buttons, you'll be redirected to a URL of the respective social media service creating a new post with your website link and – if you want – a custom message like "Check out this great blog article".

$('#whatsappteilentd').click(function(){
	var link = window.location.href;
	var link = link.replace('&', '%26');
	var titel = 'custom message | ';
	var nachricht = titel +  ': ' + link;
	window.location.href = 'whatsapp://send?text=' + nachricht;
});

$('#telegramteilentd').click(function(){
	var link = window.location.href;
	var link = link.replace('&', '%26');
	var titel = 'custom message | ';
	window.location.href = 'https://t.me/share/url?url=' + link + '&text=' + titel;
});

$('#twitterteilentd').click(function(){
	var link = window.location.href;
	var link = link.replace('&', '%26');
	var titel = 'custom message | ';
	var nachricht = titel +  ': ' + link;
	window.location.href = 'https://twitter.com/intent/tweet?text=' + nachricht;
});

$('#mastodonteilentd').click(function(){
	$('.teilentd').css({ 'display': 'none' });
	$('#datetd').css({ 'display': 'none' });
	$('#sharetd').css({ 'display': 'none' });
	$('#mastodoninstanztd').css({ 'display': 'inline-block' });
});

$('#mastodoninstanzok').click(function(){
	var link = window.location.href;
	var link = link.replace('&', '%26');
	var titel = 'custom message | ';
	var nachricht = titel +  ': ' + link;
	var instanz = $('#mastodoninstanzinput').val();
	window.location.href = 'https://' + instanz + '/web/statuses/new?text=' + nachricht;
});

$('#mastodoninstanzabbrechen').click(function(){
	document.location.reload();
});

$('#emailteilentd').click(function(){
	var link = window.location.href;
	var link = link.replace('&', '&amp;');
	var titel = 'custom message | ';
	var nachricht = titel +  ': ' + link;
	var nachricht = encodeURI(nachricht);
	window.location.href = 'mailto:?body=' + nachricht;
});

When you click on the paperclip icon, this function copies the current URL to your clipboard:

function urlkopieren(element) {
	var $temp = $("<input>");
	$("body").append($temp);
	$temp.val($(element).text()).select();
	document.execCommand("copy");
	$temp.remove();
}

$('#linkteilentd').click(function(){
	$('#urlcopyel').text(window.location.href);
	urlkopieren('#urlcopyel');
	$('.teilentd').css({ 'display': 'none' });
	$('#linkkopierttd').css({ 'display': 'inline-block' });
});

License

Privacy Share Buttons use jQuery.

Privacy Share Buttons use Font Awesome icons. These may be used according to the Attribution 4.0 International (CC BY 4.0) license.

You may freely use Privacy Share Buttons's source code according to my Libre Licence. A link to my repo as the original source would be great 😎