Update Twitter and Facebook share buttons

theme/footer.php

@@ -5,4 +5,29 @@ if ($deploy_timestamp) {
   $js_url .= '?t=' . $deploy_timestamp;
 }
 ?>
+<div id="fb-root"></div>
 <script type="text/javascript" src="<?php echo $js_url ?>"></script>
+<script type="text/javascript">
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.2';
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
+</script>
+<script type="text/javascript">
+window.twttr = (function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0],
+    t = window.twttr || {};
+  if (d.getElementById(id)) return t;
+  js = d.createElement(s);
+  js.id = id;
+  js.src = "https://platform.twitter.com/widgets.js";
+  fjs.parentNode.insertBefore(js, fjs);
+  t._e = [];
+  t.ready = function(f) {
+    t._e.push(f);
+  };
+  return t;
+}(document, "script", "twitter-wjs"));</script>

theme/functions.php

@@ -69,11 +69,11 @@ function windycoys_the_tags() {
   }
 }
 
-function windycoys_share_twitter_url() {
+function windycoys_get_twitter_share_url() {
   $url = 'https://twitter.com/intent/tweet?text=';
   $title = get_the_title();
   $link = get_the_permalink();
-  echo $url . urlencode($title . ': ' . $link . ' by @WindyCOYS');
+  return $url . urlencode($title . ' : ' . $link);
 }
 
 function windycoys_search_posts_per_page($query) {

theme/header.php

@@ -14,13 +14,18 @@ $manifest = get_template_directory_uri() . '/manifest.json';
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#201f42">
     <meta name="description" content="<?php bloginfo('description'); ?>">
+    <meta property="og:title" content="<?php if(is_single()) { single_post_title(); } else { bloginfo("name"); } ?>"/>
+    <meta property="og:type" content="blog"/>
+    <meta property="og:url" content="https://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>"/>
+    <meta property="og:image" content="<?php echo get_template_directory_uri() ?>/images/icon.png"/>
+    <meta property="og:site_name" content="WindyCOYS"/>
+    <meta property="fb:admins" content="Windy84"/>
+    <meta property="og:description" content="<?php bloginfo('description'); ?>"/>
     <?php wp_head(); ?>
+    <link rel="me" href="https://twitter.com/WindyCOYS">
     <link rel="icon" type="image/png" href="<?php echo get_template_directory_uri() ?>/images/icon_48.png">
     <link rel="manifest" href="<?php echo $manifest ?>">
     <link rel="stylesheet" href="<?php echo $css_url ?>">
     <link href="//fonts.googleapis.com/css?family=Open+Sans|Raleway:700" rel="stylesheet">
   </head>
   <body>
-    <header>
-      <?php get_template_part('icons') ?>
-    </header>

theme/partials/footer.php

@@ -7,5 +7,6 @@
       <img src="<?php echo get_template_directory_uri() ?>/images/newsnow_sw.gif" alt="As featured on NewsNow: Tottenham Hotspur news">
     </a>
   </div>
+  <?php get_template_part('icons') ?>
 </footer>
 <?php wp_footer() ?>

theme/partials/metadata.php

@@ -46,15 +46,29 @@
     </span>
   </div>
   <div class="metadata__item">
-    <a class="metadata__share-link" href="#" aria-label="Facebook">
-      <svg class="icon icon--facebook" aria-hidden="true">
-        <use xlink:href="#icon-facebook"></use>
-      </svg>
-    </a>
-    <a class="metadata__share-link" href="<?php windycoys_share_twitter_url() ?>" aria-label="Twitter">
-      <svg class="icon icon--twitter" aria-hidden="true">
-        <use xlink:href="#icon-twitter"></use>
-      </svg>
+    <div
+      class="fb-share-button"
+      data-href="<?php echo get_the_permalink() ?>"
+      data-layout="box_count"
+      data-size="small"
+      data-mobile-iframe="false"
+    >
+      <a
+        target="_blank"
+        href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse"
+        class="fb-xfbml-parse-ignore"
+      >
+        Share
+      </a>
+    </div>
+  </div>
+  <div class="metadata__item">
+    <a
+      class="twitter-share-button"
+      href="<?php echo windycoys_get_twitter_share_url() ?>"
+      data-url="<?php echo get_the_permalink() ?>"
+    >
+      Tweet
     </a>
   </div>
 </section>