Skip to content

Instantly share code, notes, and snippets.

@larrybotha
Last active March 3, 2021 10:41
Show Gist options
  • Star 32 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save larrybotha/9890352 to your computer and use it in GitHub Desktop.
Save larrybotha/9890352 to your computer and use it in GitHub Desktop.
Custom social sharing icons

Custom Social Sharing Buttons

Custom social sharing buttons for Twitter, Facebook, Google Plus, LinkedIn, StumbleUpon, and Pinterest.

via http://siliconstation.com/how-develop-custom-google-plus-button/

<a class="icon-twitter" rel="nofollow"
	href="http://twitter.com/"
	onclick="popUp=window.open(
		'http://twitter.com/intent/tweet?text=\'[Page Title]\' via @[handle] - [url]',
		'popupwindow',
		'scrollbars=yes,width=800,height=400');
	popUp.focus();
	return false">
	<i class="visuallyhidden">share on twitter</i>
</a>

<a class="icon-facebook" rel="nofollow"
	href="http://www.facebook.com/"
	onclick="popUp=window.open(
		'http://www.facebook.com/sharer.php?u=http://example.com',
		'popupwindow',
		'scrollbars=yes,width=800,height=400');
	popUp.focus();
	return false">
	<i class="visuallyhidden">share on facebook</i>
</a>

<a class="icon-gplus" rel="nofollow"
	href="http://www.plus.google.com/"
	onclick="popUp=window.open(
		'https://plus.google.com/share?url=http://example.com',
		'popupwindow',
		'scrollbars=yes,width=800,height=400');
	popUp.focus();
	return false">
	<i class="visuallyhidden">share on google plus</i>
</a>

<a class="icon-linkedin" rel="nofollow"
	href="http://www.linkedin.com/"
	onclick="popUp=window.open(
		'http://www.linkedin.com/shareArticle?url=http://example.com',
		'popupwindow',
		'scrollbars=yes,width=800,height=400');
	popUp.focus();
	return false">
	<i class="visuallyhidden">share on linkedin</i>
</a>

<a class="icon-stumbleupon" rel="nofollow"
	href="http://www.stumbleupon.com/"
	onclick="popUp=window.open(
		'http://www.stumbleupon.com/submit?url=http://example.com',
		'popupwindow',
		'scrollbars=yes,width=800,height=400');
	popUp.focus();
	return false">
	<i class="visuallyhidden">share on stumbleupon</i>
</a>

<a class="icon-pinterest" rel="nofollow"
	href="http://www.pinterest.com/"
	onclick="popUp=window.open(
		'http://pinterest.com/pin/create/button/?url=http://example.com&amp;media=[full image url]&amp;description=[page title]',
		'popupwindow',
		'scrollbars=yes,width=800,height=400');
	popUp.focus();
	return false">
	<i class="visuallyhidden">share on pinterest</i>
</a>

<a class="icon-email" rel="nofollow"
	href="mailto:?subject=[Page Title] via [Site Name]&amp;
	body=I've just read '[Page Title]' at [url]">
	<i class="visuallyhidden">share via email</i>
</a>
@akinhwan
Copy link

So in the following lines....Is the Example.com website, that of my own social website url? or A generic Social Share url? Since they will click this and be sharing this on their own social streams, I don't understand what url to put in the placeholder? Thanks for your time!!!!

onclick="popUp=window.open(
'http://pinterest.com/pin/create/button/?url=http://example.com&amp;media=[full image url]&description=[page title]',

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment