Skip to content

Social sharing links

Micky Hulse edited this page Aug 12, 2014 · 3 revisions

2014 update:

Has placeholders for Fontawesome:

<a title="Tweet this" class="social social-twitter fa-stack fa-lg" href="https://twitter.com/intent/tweet?text=YOUR-TITLE&amp;url=YOUR-URL&amp;via=TWITTER-HANDLE" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-twitter fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Tweet this</span>
</a>

<a title="Share on Facebook" class="social social-facebook fa-stack fa-lg" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-facebook fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Share on Facebook</span>
</a>

<a title="Plus on Google+" class="social social-google-plus fa-stack fa-lg" href="https://plus.google.com/share?url=YOUR-URL" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Plus on Google+</span>
</a>

<a title="" class="social social-linkedin fa-stack fa-lg" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=YOUR-URL&amp;title=YOUR-TITLE&amp;summary=YOUR-SUMMARY&amp;source=YOUR-URL" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-linkedin fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Share on LinkedIn</span>
</a>

<a title="Pin on Pinterest" class="social social-pinterest fa-stack fa-lg" href="http://pinterest.com/pin/create/button/?url=YOUR-URL&amp;description=YOUR-DESCRIPTION&amp;media=YOUR-IMAGE-SRC" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-pinterest fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Pin on Pinterest</span>
</a>

<a title="Share on VK" class="social social-vk fa-stack fa-lg" href="https://vk.com/share.php?url=YOUR-URL&amp;title=YOUR-TITLE&amp;description=YOUR-DESCRIPTION&amp;image=YOUR-IMAGE-SRC&amp;noparse=true" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-vk fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Share on VK</span>
</a>

<a title="Share on Xing" class="social social-xing fa-stack fa-lg" href="https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=YOUR-URL" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-xing fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Share on Xing</span>
</a>

<a title="Share on Tumblr" class="social social-tumblr fa-stack fa-lg" href="http://www.tumblr.com/share?v=3&amp;u=YOUR-URL&amp;t=YOUR-TITLE" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-tumblr fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Share on Tumblr</span>
</a>

<a title="Send via e-mail" class="social social-email fa-stack fa-lg" href="mailto:EMAIL_RECIPIENT?subject=EMAIL_SUBJECT&amp;body=EMAIL_BODY" target="_blank" rel="nofollow">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-envelope fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Send via e-mail</span>
</a>

<a title="Leave a comment" class="disqus social social-comment fa-stack fa-lg" href="#comments">
	<i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i><i class="fa fa-comment fa-stack-1x fa-inverse" aria-hidden="true"></i>
	<span class="off">Leave a comment</span>
</a>

Note: Line breaks between query string params is just for readability.

<a href="
	https://www.facebook.com/dialog/feed?
	app_id=282040525230053&
	link=[URL TO SHARE]&
	picture=[SMALL THUMBNAIL]&
	name=[ARTICLE TITLE]&
	caption=[ARTICLE CAPTION/DECK]&
	description=[ARTICLE EXCERPT]&
	redirect_uri=[URI AFTER SUCCESSFUL POST]
">LINK TEXT</a>
<a href="
	http://twitter.com/?status=[ENCODED STATUS TO SHARE]
">LINK TEXT</a>

### [Google+](https://developers.google.com/+/plugins/share/):

```html
<a href="
	https://plus.google.com/share?url=[URL TO SHARE]
">LINK TEXT</a>

For more info and code, see here:

Socialize (sZ) - Social Sharing Buttons

Clone this wiki locally