Update Twitter and Facebook share buttons

css/metadata.css

@@ -7,6 +7,8 @@
 }
 
 .metadata__item {
+  display: flex;
+  align-items: center;
   margin: 0 var(--space-sm) var(--space-sm) 0;
 }
 
@@ -41,8 +43,8 @@
 .metadata__text {
   margin-left: 10px;
   text-transform: capitalize;
-  vertical-align: middle;
   transition: box-shadow var(--transition-md) ease-out;
+  vertical-align: middle;
 }
 
 .metadata__link {
@@ -71,61 +73,3 @@
   color: var(--color-light-blue);
   box-shadow: var(--link-focus);
 }
-
-.metadata__share-link {
-  display: inline-block;
-  margin-right: var(--space-sm);
-  transition:
-    filter var(--transition-fs) ease-out,
-    transform var(--transition-fs) ease-out;
-  transform-origin: center bottom;
-}
-
-.metadata__share-link:focus,
-.metadata__share-link:hover {
-  filter: saturate(1.5) contrast(1.5);
-  transform: scale(1.1);
-}
-
-/**
- * Link styles
- *
-
-.metadata__comments-text,
-.metadata__categories-link,
-.metadata__editor-text {
-  position: relative;
-}
-
-.metadata__comments-text:after,
-.metadata__categories-link:after,
-.metadata__editor-text:after {
-  background-color: var(--color-light-blue);
-  bottom: -1px;
-  content: '';
-  left: 0;
-  height: 2px;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: opacity var(--transition-md) ease-out;
-}
-
-.metadata__comments-link:focus,
-.metadata__comments-link:hover,
-.metadata__categories-link:focus,
-.metadata__categories-link:hover,
-.metadata__editor-link:focus,
-.metadata__editor-link:hover {
-  color: var(--color-light-blue);
-}
-
-.metadata__comments-link:focus .metadata__comments-text:after,
-.metadata__comments-link:hover .metadata__comments-text:after,
-.metadata__categories-link:focus:after,
-.metadata__categories-link:hover:after,
-.metadata__editor-link:focus .metadata__editor-text:after,
-.metadata__editor-link:hover .metadata__editor-text:after {
-  opacity: 1;
-}
-*/

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">
+    <div
-      <svg class="icon icon--facebook" aria-hidden="true">
+      class="fb-share-button"
-        <use xlink:href="#icon-facebook"></use>
+      data-href="<?php echo get_the_permalink() ?>"
-      </svg>
+      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>
-    <a class="metadata__share-link" href="<?php windycoys_share_twitter_url() ?>" aria-label="Twitter">
+    </div>
-      <svg class="icon icon--twitter" aria-hidden="true">
+  </div>
-        <use xlink:href="#icon-twitter"></use>
+  <div class="metadata__item">
-      </svg>
+    <a
+      class="twitter-share-button"
+      href="<?php echo windycoys_get_twitter_share_url() ?>"
+      data-url="<?php echo get_the_permalink() ?>"
+    >
+      Tweet
     </a>
   </div>
 </section>