Social share buttons for blog posts
This guide will show you how to add social share buttons to your blog posts.
Copy this code:
At the bottom of your blog post, create a Raw HTML component.
Paste the code inside the component.
Wait until the post is saved and open the live version to see the results.
To add different social media, edit this part of the code:
For example, this is how it looks like with Facebook and Tumblr:
Here is the full list of the available social networks:
'fb'
'line'
'plurk'
'weibo'
'twitter'
'tumblr'
'email'
'linkedin'
Step 1/3
Copy this code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBcCTXBkVQYIBVNEFH1eP6Zknm16roZCyeNg2maWEpk/l/KsyFKs7G" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/brands.css" integrity="sha384-1KLgFVb/gHrlDGLFPgMbeedi6tQBLcWvyNUN+YKXbD7ZFbjX6BLpMDf0PJ32XJfX" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" integrity="sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" crossorigin="anonymous">
<div id="share-area"></div>
<script>
(function() {
var a = setInterval( function() {
if ( typeof window.jQuery === 'undefined' ) {
return;
}
clearInterval( a );
/*!
* jquery.c-share.js v1.2.0
* https://github.com/ycs77/jquery-plugin-c-share
*
* Copyright 2019-2020 Lucas, Yang
* Released under the MIT license
*
* Date: 2020-10-19T07:57:52.889Z
*/
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
}((function () { 'use strict';
if ($.fn) {
$.fn.cShare = function (options) {
var _this = this;
var defaults = {
description: '',
showButtons: ['line', 'fb', 'twitter'],
data: {
fb: {
fa: 'fab fa-facebook-f',
name: 'Fb',
href: function href(url) {
return "https://www.facebook.com/sharer.php?u=".concat(url);
},
show: true
},
line: {
fa: 'fab fa-line fa-2x',
name: 'Line',
href: function href(url) {
return "https://social-plugins.line.me/lineit/share?url=".concat(url);
},
show: true,
hideWrapper: true
},
plurk: {
fa: 'fa-plurk',
name: 'Plurk',
href: function href(url, description) {
return "http://www.plurk.com/?qualifier=shares&status=".concat(description, " ").concat(url);
},
show: false
},
weibo: {
fa: 'fab fa-weibo',
name: '微博',
href: function href(url, description) {
return "http://service.weibo.com/share/share.php?title=".concat(description, "&url=").concat(url);
},
show: false
},
twitter: {
fa: 'fab fa-twitter',
name: 'Twitter',
href: function href(url, description) {
return "https://twitter.com/intent/tweet?original_referer=".concat(url, "&url=").concat(url, "&text=").concat(description);
},
show: false
},
tumblr: {
fa: 'fab fa-tumblr',
name: 'Tumblr',
href: function href(url, description) {
return "http://www.tumblr.com/share/link?name=".concat(description, " ").concat(url, "&url=").concat(url);
},
show: false
},
email: {
fa: 'fas fa-envelope',
name: 'E-mail',
href: function href(url, description) {
return "mailto:?subject=".concat(description, "&body=").concat(description, " ").concat(url);
},
show: false
},
linkedin: {
fa: 'fab fa-linkedin',
name: 'LinkedIn',
href: function href(url, description) {
return `http://www.linkedin.com/shareArticle?mini=true&url=${url}`;
},
show: false
}
},
spacing: 6,
shareToText: 'Share to'
};
var href = encodeURIComponent(location.href.replace(/#\w/, ''));
var mobile = navigator.userAgent.match(/(mobile|android|pad)/i);
var settings = $.extend({}, defaults, options);
if (options) {
settings.data = $.extend({}, defaults.data, options.data);
}
settings.showButtons.forEach(function (shareName) {
var item = settings.data[shareName]; // Create button element
_this.append("\n <a href=\"".concat(item.href.call(null, href, settings.description), "\" title=\"").concat(settings.shareToText, " ").concat(item.name, "\" target=\"_blank\" data-icon=\"").concat(shareName, "\">\n <span class=\"fa-stack\">\n ").concat(!item.hideWrapper ? '<i class="fas fa-circle fa-stack-2x"></i>' : '', "\n <i class=\"").concat(item.fa, " fa-stack-1x\"></i>\n </span>\n </a>\n "));
});
this.find('.fa-plurk').text('P'); // Bind link click event
this.find('a').click(function (e) {
if (!mobile) {
e.preventDefault();
window.open($(this).attr('href'), '_blank', 'height=600,width=500');
}
}); // Add CSS
this.children('a').css({
'display': 'inline-block',
'margin': "auto ".concat(Number(settings.spacing) / 2, "px"),
'text-decoration': 'none',
'-webkit-transition': 'all .2s',
'-moz-transition': 'all .2s',
'transition': 'all .2s'
});
if (!mobile) {
this.children('a').hover(function () {
$(this).css({
'-webkit-transform': 'translateY(-4px)',
'-ms-transform': 'translateY(-4px)',
'transform': 'translateY(-4px)'
});
}, function () {
$(this).css({
'-webkit-transform': 'translateY(0px)',
'-ms-transform': 'translateY(0px)',
'transform': 'translateY(0px)'
});
});
} // Set color
this.find('.fa-stack-1x').css('color', '#ffffff');
this.find('[data-icon=fb] .fa-stack-2x').css('color', '#3B5998');
this.find('[data-icon=line] .fa-stack-1x').css('color', '#00c300');
this.find('[data-icon=plurk] .fa-stack-2x').css('color', '#cf682f');
this.find('[data-icon=plurk] .fa-plurk').css({
'font-family': 'arial',
'font-style': 'normal',
'font-weight': 'bold'
});
this.find('[data-icon=weibo] .fa-stack-2x').css('color', '#F5CA59');
this.find('[data-icon=twitter] .fa-stack-2x').css('color', '#2ba9e1');
this.find('[data-icon=tumblr] .fa-stack-2x').css('color', '#35465d');
this.find('[data-icon=email] .fa-stack-2x').css('color', '#939598');
this.find('[data-icon=linkedin] .fa-stack-2x').css('color', '#177AB6');
return this;
};
}
})));
$('#share-area').cShare({
description: '',
showButtons: ['fb', 'twitter', 'linkedin', 'email']
});
}, 500 );
})();
</script>
<style>
#share-area{
text-align: center;
margin: 40px 0 20px;
white-space: initial;
font-family: "Font Awesome 5 Brands" !important;
}
.comps.live_website .fa{
font-family: "Font Awesome 5 Free" !important;
}
.comps.live_website .fas {
font-family: "Font Awesome 5 Free" !important;
}
.comps.live_website .fab {
font-family: "Font Awesome 5 Brands" !important;
}
</style>Step 2/3
At the bottom of your blog post, create a Raw HTML component.
Step 3/3
Paste the code inside the component.
Done!
Wait until the post is saved and open the live version to see the results.
How to add another social media
To add different social media, edit this part of the code:
For example, this is how it looks like with Facebook and Tumblr:
Here is the full list of the available social networks:
'fb'
'line'
'plurk'
'weibo'
'twitter'
'tumblr'
'email'
'linkedin'
Updated on: 20/06/2022
Thank you!