How to add a facebook and twitter share button on a page I would like to add a facebook and a twitter share button to some pages of our sites. Our site already has a facebook and twitter button at some pages. Those buttons redirect to our corresponding pages.
Facebook/Twitter look for Open Graph(OG) metadata when a page is shared. To specify what this data is, you have to include the meta tags in the head of your page.

Step 1:

Have meta tags for the page

e.g.

&lt;head&gt;
  &lt;title&gt;My Website Title&lt;/title&gt;
  &lt;meta property="og:url"           content="https://www.myWbsite.com/my-page.html" /&gt;
  &lt;meta property="og:type"          content="website" /&gt;
  &lt;meta property="og:title"         content="My Website Title" /&gt;
  &lt;meta property="og:description"   content="Page description" /&gt;
  &lt;meta property="og:image"         content="https://www.myWebsite.com/asset/image.jpg" /&gt;
&lt;/head&gt;


You can also create custom fields and call them dynamically on each page.

//Facebook
&lt;meta property="og:url" content="{{ craft.app.request.absoluteUrl }}"/&gt;
&lt;meta property="og:type" content="website"/&gt;
&lt;meta property="og:title" content="{{ entry.title }}"/&gt;
&lt;meta property="og:image" content="{{ entry.socialImage }}"/&gt;
&lt;meta property="og:description" content="{{ entry.description }}"/&gt;
&lt;meta property="og:site_name" content="{{ site.name }}"/&gt;

//twitter
&lt;meta name="twitter:url" content="{{ craft.app.request.absoluteUrl }}"/&gt;
&lt;meta name="twitter:title" content="{{ entry.title }}"/&gt;
&lt;meta name="twitter:description" content="{{ entry.description }}"/&gt;
&lt;meta name="twitter:image" content="{{ entry.socialImage }}"/&gt;


I use SEOmatic plugin to make the above procedure easy. There are also other plugins available for things like this as well. 

Step 2:

Static URL:

&lt;li&gt;&lt;a href="https://www.facebook.com/sharer.php?u=myWebsite.com"&gt;Share on Facebook&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://twitter.com/intent/tweet?url=myWebsite.com"&gt;Share on Twitter&lt;/a&gt;&lt;/li&gt;


or Dynamic URL: 

&lt;ul&gt;
  &lt;li class="social facebook"&gt;&lt;img src="facebook-icon.png" alt="Share Page on Facebook" /&gt;&lt;/li&gt;
  &lt;li class="social twitter"&gt;&lt;img src="twitter-icon.png" alt="Share Page on Twitter" /&gt;&lt;/li&gt;
&lt;/ul&gt;


then add these below in JS

function shareWindow(url) {
    var left = (screen.width - 570) / 2;
    var top = (screen.height - 570) / 2;
    var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
    window.open(url,"NewWindow",params);
}

function setShareLinks() {
    var pageUrl = encodeURIComponent(document.URL);
    var tweet = encodeURIComponent(jQuery("meta[property='og:description']").attr("content"));

    jQuery(".share.facebook").on("click", function() {
        url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
        shareWindow(url);
    });

    jQuery(".share.twitter").on("click", function() {
        url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&amp;text=" + tweet;
        shareWindow(url);
    })

}


References:


https://css-tricks.com/simple-social-sharing-links/
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview
https://developers.facebook.com/docs/plugins/share-button