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 0f73da4bc4 Merge branch 'master' of https://codeberg.org/pixelcode/Privacy-Share-Buttons 1 month ago
web-fonts-with-css all new 1 month ago
Choose mastodon instance.png more screenshots 1 month ago
Link copy success.png more screenshots 1 month ago
Logo.png Logo 1 month ago
Logo.svg Logo 1 month ago
Mastodon example toot.png Mastodon screenshot 1 month ago
Privacy Share Buttons.png Screenshot 1 month ago
README.md update README 1 month ago
copyurl.js all new 1 month ago
index.html English 1 month ago
jquery-3.4.0.min.js all new 1 month ago
script.js more screenshots 1 month ago
style.css all new 1 month 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 use Privacy Share Buttons‘s source code without explicit permission but a link to my repo would be great of course 😎