2

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.

Improve this question
1

2 Answers 2

Reset to default
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:

Improve this answer
2

Have a look at this handy plugin: https://plugins.craftcms.com/simple-sharing

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.