<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>

CC BY-SA 4.0
2019-12-10T06:57:38.370Z
2019-12-10T07:21:02.657Z
2019-12-10T07:21:02.657Z
ScriptDev
<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>

CC BY-SA 4.0
2019-11-19T09:06:56.713Z
2019-11-19T09:06:56.713Z
Anthronaut
<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>

CC BY-SA 4.0
2019-11-15T22:18:45.713Z
Basically the same answer as https://craftcms.stackexchange.com/a/33037/57
Brad Bell
<plugin-social-login>
How to add a facebook and twitter share button on a page
# 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.

  My Website Title
  
  
  
  
  


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







//twitter





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:
Share on Facebook
Share on Twitter

or Dynamic URL: 

  
  


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>


---

