Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML Snippet Adds Google, Facebook, Twitter and Comments. Live Demo https://rack.pub/socializer
<!DOCTYPE html>
<html lang="en">
<!--
Created by Ron Royston, https://rack.pub, © 2017 MIT License
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="description" content="HTML Snippet Adds Social Media Google, Facebook, Twitter and Comments" />
<title>HTML Snippet Adds Social Media Google, Facebook, Twitter and Comments</title>
<style>
.social-bar {
display: flex;
flex-flow: row nowrap ;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.social-button {
flex: 0 1 auto;
align-self: auto;
margin-left:4px;
}
</style>
</head>
<body>
<script>
//Facebook API
window.fbAsyncInit = function() {
FB.init({
appId: '796465480506161',
xfbml: true,
version: 'v2.9'
});
FB.AppEvents.logPageView();
};
(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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<h1>Social Media Paste In HTML</h1>
<h4>HTML Snippet Adds Google, Facebook, Twitter and Comments</h4>
<p>View page source for sample code or view the <a href="//gist.github.com/rhroyston/42a2e5a84444ea8a88e9f49bff7d503c">Github Gist online</a></p>
<div class="social-bar">
<div class="social-button facebook-button">
<div class="fb-like" data-href="//gist.github.com/rhroyston/42a2e5a84444ea8a88e9f49bff7d503cr" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</div>
<div class="social-button facebook-button">
<div class="fb-share-button" data-href="//gist.github.com/rhroyston/42a2e5a84444ea8a88e9f49bff7d503c" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Frack.pub&amp;src=sdkpreparse">Share</a></div>
</div>
<div class="social-button">
<a href="http://twitter.com/share?text=HTML%20Snippet%20Adds%20Social%20Media%20Google%2C%20Facebook%2C%20Twitter%20and%20Comments&url=https%3A%2F%2Fgist.github.com%2Frhroyston%2F42a2e5a84444ea8a88e9f49bff7d503c" class="twitter-share-button">Tweet</a>
</div>
<div class="social-button">
<div class="g-plus" data-action="share" data-href="//gist.github.com/rhroyston/42a2e5a84444ea8a88e9f49bff7d503c"></div>
</div>
<div class="social-button">
<div class="g-plusone" data-href="//gist.github.com/rhroyston/42a2e5a84444ea8a88e9f49bff7d503c" data-size="medium" data-annotation="inline" data-width="300"></div>
</div>
</div>
<!-- Embed Google Comments -->
<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
href: window.location,
width: '624',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment