Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML Snippet Adds Facebook, Google, Linkedin, Pintrest, 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>
<meta property="og:title" content="Socializer" />
<meta property="og:image" content="https://rack.pub/media/socializer-share.jpg" />
<meta property="og:description" content="HTML Snippet Adds Facebook, Google, Linkedin, Pintrest, Twitter and Comments." />
<meta property="og:url" content="https://rack.pub/socializer" />
<meta property="og:type" content="article" />
<style>
.social-bar {
display: flex;
flex-flow: row wrap ;
justify-content: flex-start;
align-content: center;
align-items: stretch;
}
.social-button {
flex: 0 1 auto;
align-self: auto;
margin-left:4px;
}
.social-button > span {
vertical-align: top !important;
}
.social-button > div > span {
vertical-align: top !important;
}
</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="//rack.pub/socializer" 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="//rack.pub/socializer" 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%2Frack.pub%2Fsocializer" class="twitter-share-button">Tweet</a>
</div>
<div class="social-button">
<a class="twitter-follow-button" href="https://twitter.com/realronroyston" data-show-screen-name=false data-show-count=false>Follow @realRonRoyston</a>
</div>
<div class="social-button">
<div class="g-plus" data-action="share" data-href="//rack.pub/socializer"></div>
</div>
<div class="social-button">
<div class="g-follow" data-annotation="none" data-height="20" data-href="//plus.google.com/u/0/111463554542869501819" data-rel="author"></div>
</div>
<div class="social-button">
<div class="g-plusone" data-href="//rack.pub/socializer" data-size="medium" data-annotation="inline" data-width="300"></div>
</div>
<div class="social-button">
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-counter="right"></script>
</div>
<div class="social-button">
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
</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>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment