dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Twitter and Facebook share buttons

Browse Source
This commit is contained in:
Dan Head
2018-12-18 15:16:09 +00:00
parent 81f663dbd5
commit 8740a76d87
6 changed files with 62 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
css/metadata.css
View File

@@ -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;
}
*/

25
theme/footer.php
View File

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

4
theme/functions.php
View File

@@ -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) {

11
theme/header.php
View File

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

1
theme/partials/footer.php
View File

@@ -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() ?>

30
theme/partials/metadata.php
View File

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