Answers.Body: <p>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.</p>
  
  <p><strong>Step 1:</strong></p>
  
  <p>Have meta tags for the page</p>
  
  <p>e.g.</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>You can also create custom fields and call them dynamically on each page.</p>
  
  <pre><code>//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;
  </code></pre>
  
  <p>I use SEOmatic plugin to make the above procedure easy. There are also other plugins available for things like this as well. </p>
  
  <p><strong>Step 2:</strong></p>
  
  <p><strong>Static URL:</strong></p>
  
  <pre><code>&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;
  </code></pre>
  
  <p><strong>or Dynamic URL:</strong> </p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>then add these below in JS</p>
  
  <pre><code>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);
      })
  
  }
  </code></pre>
  
  <p><strong>References:</strong></p>
  
  <ul>
  <li><p><a href="https://css-tricks.com/simple-social-sharing-links/" rel="nofollow noreferrer">https://css-tricks.com/simple-social-sharing-links/</a></p></li>
  <li><p><a href="https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview" rel="nofollow noreferrer">https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview</a></p></li>
  <li><p><a href="https://developers.facebook.com/docs/plugins/share-button" rel="nofollow noreferrer">https://developers.facebook.com/docs/plugins/share-button</a></p></li>
  </ul>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-10T06:57:38.370Z
Answers.LastActivityDate: 2019-12-10T07:21:02.657Z
Answers.LastEditDate: 2019-12-10T07:21:02.657Z
Answers.UserDisplayName: ScriptDev
Answers.Body: <p>Have a look at this handy plugin: <a href="https://plugins.craftcms.com/simple-sharing" rel="nofollow noreferrer">https://plugins.craftcms.com/simple-sharing</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-11-19T09:06:56.713Z
Answers.LastActivityDate: 2019-11-19T09:06:56.713Z
Answers.UserDisplayName: Anthronaut
Body: <p>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.</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-11-15T22:18:45.713Z
Comments.Text: Basically the same answer as https://craftcms.stackexchange.com/a/33037/57
Comments.UserDisplayName: Brad Bell
Tags: <plugin-social-login>
Title: How to add a facebook and twitter share button on a page
ThreadText: # How to add a facebook and twitter share button on a page
  
  (Asked by: username_0 on 2019-11-15)
  
  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.
  
  **Tags:** plugin-social-login
  
  > **Comments:**
  > **username_1**: Basically the same answer as https://craftcms.stackexchange.com/a/33037/57  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2019-12-10. Score: 3
  
  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.
  
  ```
  <head>
    <title>My Website Title</title>
    <meta property="og:url"           content="https://www.myWbsite.com/my-page.html" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="My Website Title" />
    <meta property="og:description"   content="Page description" />
    <meta property="og:image"         content="https://www.myWebsite.com/asset/image.jpg" />
  </head>
  
  ```
  
  You can also create custom fields and call them dynamically on each page.
  
  ```
  //Facebook
  <meta property="og:url" content="{{ craft.app.request.absoluteUrl }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:title" content="{{ entry.title }}"/>
  <meta property="og:image" content="{{ entry.socialImage }}"/>
  <meta property="og:description" content="{{ entry.description }}"/>
  <meta property="og:site_name" content="{{ site.name }}"/>
  
  //twitter
  <meta name="twitter:url" content="{{ craft.app.request.absoluteUrl }}"/>
  <meta name="twitter:title" content="{{ entry.title }}"/>
  <meta name="twitter:description" content="{{ entry.description }}"/>
  <meta name="twitter:image" content="{{ entry.socialImage }}"/>
  
  ```
  
  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:**
  
  ```
  <li><a href="https://www.facebook.com/sharer.php?u=myWebsite.com">Share on Facebook</a></li>
  <li><a href="https://twitter.com/intent/tweet?url=myWebsite.com">Share on Twitter</a></li>
  
  ```
  
  **or Dynamic URL:**
  
  ```
  <ul>
    <li class="social facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li>
    <li class="social twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li>
  </ul>
  
  ```
  
  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 + "&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>
  
  
  ---
  
  ### Answer by username_3 on 2019-11-19. Score: 2
  
  Have a look at this handy plugin: <https://plugins.craftcms.com/simple-sharing>
  
  
  ---
  
  