Social Media share buttons without javascript

28 Apr 2018

Do you want to add Social Media share buttons to your webpage without dealing with code and javascript

You just need to follow these steps

Sitting Meta Data

In the head section, you need to set the following Meta Data


<link rel="canonical" href="https://www.ahmad-osman.com/en/blogs/social-media-share-without-javascript/" />
<meta property="og:url" content="https://www.ahmad-osman.com/en/blogs/social-media-share-without-javascript/">
<meta property="og:type" content="website">
<meta property="fb:app_id" content="your facebook app Id">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="www.ahmad-osman.com">
<meta name="twitter:app:country" content="DE">
<meta name="twitter:image:src" property="og:image" itemprop="image primaryImageOfPage" content="https://www.ahmad-osman.com/media/1017/socialmedia.jpg" />
<meta name="twitter:title" property="og:title" itemprop="title name" content="Social Media share buttons without javascript" />
<meta name="twitter:description" property="og:description" itemprop="description" content="Do you want to add Social Media share buttons to your webpage without dealing with code and javascript" />

you just need to change content property with your data.

Facebook Share Button


    <a href="https://www.facebook.com/sharer/sharer.php?u=[your page full url]&t=[custom share title (not mandatory)]" target="_blank" title="Share with Facebook">
Share on facebook
</a>

Google Plus Share Button


    <a href="https://plus.google.com/share?url=[your page full url]" target="_blank" title="Share on Google+">
Share on Google plus
</a>

Twitter Share Button


    <a href="https://twitter.com/intent/tweet?url=[your page full url]&text=[custom share title (not mandatory)]" target="_blank" title="Share on Twitter">
Share on Twitter
</a>

Pinterest Share Button


    <a href="http://pinterest.com/pin/create/button/?url=[your page full url]&description=[custom share title (not mandatory)]" target="_blank" title="Share on Pinterest">
Share on Pinterest
</a>

Getpocket Share Button


    <a href="https://getpocket.com/save?url=[your page full url]&title=[custom share title (not mandatory)]" target="_blank" title="Share on Getpocket">
Share on Getpocket
</a>

Reddit Share Button


    <a href="http://www.reddit.com/submit?url=[your page full url]&title=[custom share title (not mandatory)]" target="_blank" title="Share on Reddit">
Share on Reddit
</a>

Linkedin Share Button


    <a href="http://www.linkedin.com/shareArticle?mini=true&title=[custom share title (not mandatory)]&summary=[custom description (not mandatory)]&source=[your page full url]" target="_blank" title="Share on Linkedin">
Share on Linkedin
</a>

Pinboard Share Button


    <a href="https://pinboard.in/popup_login/?url=[your page full url]&title=[custom share title (not mandatory)]" target="_blank" title="Share on Pinboard">
Share on Pinboard
</a>

Email to Button


    <a href="mailto:?subject=[Subject]&body=:[body]" target="_blank" title="Email">
Email to friend
</a>