jQuery Plugin To Hide and Reveal Social Icons In A Circular Layout

SocialCircle is a jQuery plugin that allows the user to reveal and hide radial social sharing buttons with a toggle button. It can also be used to create a radial popup to navigate your website.

create your own social share buttons, add social share buttons to website, custom share buttons, share jquery function, jquery plugin for floating social share bar

How to make use of it:

1. Include Font Awesome 4 for social icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Add the social share buttons in a container like this:

<div class="socialCircle-container">
  <div class="socialCircle-item"><i class="fa fa-google-plus"></i></div>
  <div class="socialCircle-item"><i class="fa fa-github"></i></div>
  <div class="socialCircle-item"><i class="fa fa-linkedin"></i></div>
  <div class="socialCircle-item"><i class="fa fa-facebook"></i></div>
  <div class="socialCircle-item"><i class="fa fa-twitter"></i></div>
  <div class="socialCircle-item"><i class="fa fa-pinterest"></i></div>
  <div class="socialCircle-center closed"><i class="fa fa-share-alt"></i></div>
</div>

3. Include jQuery library and jQuery socialCircle plugin.

<script src="jquery.min.js"></script>
<script src="scripts/socialCircle.js"></script>

4. Connect to the accessory in the main container.

$( ".socialCircle-center" ).socialCircle(OPTIONS);

5. CSS is required to design social share buttons.

.socialCircle-item {
  width: 80px;
  height: 80px;
  position: absolute;
  background: #333;
  margin: 50%;
  text-align: center;
  color: #ffffff;
  font-size: 30px;
  cursor: pointer;
}

.socialCircle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.socialCircle-center {
  width: 120px;
  height: 120px;
  background: #35DBCD;
  margin: 50%;
  position: absolute;
  text-align: center;
  color: #ffffff;
  font-size: 60px;
  cursor: pointer;
}

6. Customize radial social share buttons.

$( ".socialCircle-center" ).socialCircle({

  // Rotate in degrees around the circle 0 to 360
  rotate: 0,

  // Distance of icons from the center
  radius:200,

  // Divide circle by
  circleSize: 2,

  // Animation speed
  speed:500

});

creating radial social share buttons, socialCircle Plugin/Github, javascript social media buttons