Skip to content

Instantly share code, notes, and snippets.

@rhroyston rhroyston/index.html
Last active Dec 20, 2017

What would you like to do?
HTML Snippet Adds Facebook, Google, Linkedin, Pintrest, Twitter and Comments. Live Demo
<!DOCTYPE html>
<html lang="en">
Created by Ron Royston,, © 2017 MIT License
<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="" />
<meta property="og:description" content="HTML Snippet Adds Facebook, Google, Linkedin, Pintrest, Twitter and Comments." />
<meta property="og:url" content="" />
<meta property="og:type" content="article" />
.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;
.social-button > span {
vertical-align: top !important;
.social-button > div > span {
vertical-align: top !important;
//Facebook API
window.fbAsyncInit = function() {
appId: '796465480506161',
xfbml: true,
version: 'v2.9'
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<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="//">Github Gist online</a></p>
<div class="social-bar">
<div class="social-button facebook-button">
<div class="fb-like" data-href="//" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
<div class="social-button facebook-button">
<div class="fb-share-button" data-href="//" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href=";src=sdkpreparse">Share</a></div>
<div class="social-button">
<a href="" class="twitter-share-button">Tweet</a>
<div class="social-button">
<a class="twitter-follow-button" href="" data-show-screen-name=false data-show-count=false>Follow @realRonRoyston</a>
<div class="social-button">
<div class="g-plus" data-action="share" data-href="//"></div>
<div class="social-button">
<div class="g-follow" data-annotation="none" data-height="20" data-href="//" data-rel="author"></div>
<div class="social-button">
<div class="g-plusone" data-href="//" data-size="medium" data-annotation="inline" data-width="300"></div>
<div class="social-button">
<script src="//" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-counter="right"></script>
<div class="social-button">
<a data-pin-do="buttonBookmark" href=""></a>
<!-- Embed Google Comments -->
<script src=""></script>
<div id="comments"></div>
gapi.comments.render('comments', {
href: window.location,
width: '624',
first_party_property: 'BLOGGER',
<script src="" async defer></script>
<script async src="//" charset="utf-8"></script>
<script type="text/javascript" async defer src="//"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.