Skip to content

Instantly share code, notes, and snippets.

@adinan-cenci

adinan-cenci/social networks share buttons example.html

Last active October 31, 2021 15:14
Show Gist options
  • Save adinan-cenci/eb354a33e0a423ea88619520021ccda8 to your computer and use it in GitHub Desktop.
Save adinan-cenci/eb354a33e0a423ea88619520021ccda8 to your computer and use it in GitHub Desktop.
Download ZIP
How to share your page on social networks, meta data and links
Raw
social networks share buttons example.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
In this example we'll see what meta data we need to write on our documents so any social network
may understand what our page is about, as well how to write links for the for sharing the page on
said social networks.
-->
<meta charset="UTF-8" />
<title>This is an example</title>
<!-- This short description will be shown on search results at google.com and others search engines -->
<meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..." />
<!-- Social networks and search engines may consider "myblog.com/my-post.html" and "www.myblog.com/my-post.html" to be complete
different documents, use a canonical href to identify your document -->
<link rel="canonical" href="https://myblog.com/my-post.html" />
<!-- Open Graph meta tags, Facebook and other networks use those. Learn more at https://ogp.me/ -->
<meta property="og:title" content="This is an example" />
<meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..." />
<meta property="og:url" content="https://myblog.com/my-post.html" />
<meta property="og:site_name" content="The site's name" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="http://myblog.com/470x246-thumbnail.jpg" />
<meta property="og:image:width" content="470" />
<meta property="og:image:height" content="246" />
<!-- Twitter specific. Learn more at https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://myblog.com/my-post.html" />
<meta name="twitter:title" content="This is an example" />
<meta name="twitter:description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..." />
<meta name="twitter:image" content="http://myblog.com/280x150-thumbnail.jpg" />
</head>
<body>
<ul>
<li>
<!-- mailto:?subject=TEXT&body=TEXT -->
<a href="mailto:?subject=This%20is%20an%20example&body=https%3A%2F%2Fmyblog.com%2Fmy-post.html" title="Send by e-mail">
Send by E-mail
</a>
</li>
<li>
<!-- https://facebook.com/sharer/sharer.php?u=URL -->
<a href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmyblog.com%2Fmy-post.html" target="_blank" title="Share on Facebook">
Share on Facebook
</a>
</li>
<li>
<!-- http://twitter.com/share?url=URL&text=TEXT&hashtags=TEXT -->
<a href="http://twitter.com/share?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&text=This%20is%20an%20example" target="_blank" title="Share on Twitter">
Share on Twitter
</a>
</li>
<li>
<!-- https://reddit.com/submit?url=URL&title=TEXT -->
<a href="https://reddit.com/submit?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&title=This%20is%20an%20example" target="_blank" title="Share on Reddit">
Share on Reddit
</a>
</li>
<li>
<!-- https://tumblr.com/share/link?url=URL&name=TEXT&description=TEXT -->
<a href="https://www.tumblr.com/share/link?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&name=This%20is%20an%20example&description=Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod..." target="_blank" title="Share on Tumblr">
Share on Tumblr
</a>
</li>
<li>
<!-- https://linkedin.com/shareArticle?url=URL&title=TEXT -->
<a href="https://linkedin.com/shareArticle?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&title=This%20is%20an%20example" target="_blank" title="Share on Linkedin">
Share on Linkedin
</a>
</li>
<li>
<!-- https://pinterest.com/pin/create/bookmarklet/?url=URL&description=TEXT&media=URL&is_video=[0/1] -->
<a href="https://pinterest.com/pin/create/bookmarklet/?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&description=This%20is%20an%20example&media=http://myblog.com/image.jpg&is_video=0" target="_blank" title="Share on Pinterest">
Share on Pinterest
</a>
</li>
<li>
<!-- https://vk.com/share.php?url=URL&title=TEXT -->
<a href="https://vk.com/share.php?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&title=This%20is%20an%20example" target="_blank" title="Share on Vk">
Share on Vk
</a>
</li>
<li>
<!-- https://www.minds.com/newsfeed/subscribed?intentUrl=URL -->
<a href="https://www.minds.com/newsfeed/subscribed?intentUrl=https%3A%2F%2Fmyblog.com%2Fmy-post.html" target="_blank" title="Share on Minds.com">
Share on Minds.com
</a>
</li>
<li>
<!-- https://[DOMAIN]/share?url=URL&text=TEXT -->
Share on Mostodon instances
<ul>
<li>
<!-- https://mastodon.social/share?url=URL&text=TEXT -->
<a href="https://mastodon.social/share?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&text=This%20is%20an%20example" target="_blank" title="Share on Gab">
Share on mastodon.social
</a>
</li>
</ul>
</li>
<li>
<!-- https://getpocket.com/save?url=URL&title=TEXT -->
<a href="https://getpocket.com/save?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&title=This%20is%20an%20example" target="_blank" title="Share on Pocket">
Share on Pocket
</a>
</li>
<li>
<!-- https://api.whatsapp.com/send?text=TEXT&phone=PHONE -->
<a href="https://api.whatsapp.com/send?text=https%3A%2F%2Fmyblog.com%2Fmy-post.html%0AThis%20is%20an%20example" target="_blank" title="Share on Whatsapp">
Share on Whatsapp
</a>
</li>
<li>
<!-- https://telegram.me/share/url?url=URL&text=TEXT&to=PHONE -->
<a href="https://telegram.me/share/url?url=https%3A%2F%2Fmyblog.com%2Fmy-post.html&text=This%20is%20an%20example" target="_blank" title="Share on Telegram">
Share on Telegram
</a>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment