This guide will show you how to add social share buttons to your blog posts.



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'
Was this article helpful?
Cancel
Thank you!