Floating Sidebar Social & Contact Buttons - socialFloating.js

The socialFloating.js jQuery plugin creates a floating, collapsible social media & contact sidebar to get more Social Media followers directly from your webpage.

Supports any social media and contact buttons: Facebook, Twitter, Instagram, LinkedIn, Telephone, Email, etc.

How to use it:

1. Insert the socialFloating.js plugin's files into your document.

<link rel="stylesheet" href="/path/to/css/socialfloating.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.socialfloating.js"></script>

2. Load an iconic font for the social & contact buttons. Supported icon sets:

• Font Awesome 5
• Font Awesome 4
• Semantic UI

<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />

3. Define your social & contact buttons (icons, links, backgrounds) in an JavaScript array as follows.

const myButtons: [
      [
        { icon: 'facebook', enabled: true, link: 'https://www.facebook.com/jqueryscript/', color: '#3b5998' },
        { icon: 'twitter', enabled: true, link: 'https://www.twitter.com/jqueryscript', color: '#00aced' },
        { icon: 'github', enabled: true, link: 'https://www.github.com/jqueryscript/', color: '#333333' }
      ],
      [
        { icon: 'phone', enabled: true, link: 'tel:+000' },
        { icon: 'envelope', enabled: true, link: 'mailto:[email protected]' }
      ]
]

4. Initialize the floating social & contact sidebar.

$.socialfloating({
  buttons: myButtons
});

5. Determine the position of the floating social & contact sidebar. Default: 'left'.

$.socialfloating({
  position: 'right'
});

6. Determine whether to animate the floating social & contact sidebar when positioned to the middle of the screen on page scroll. Default: null.

$.socialfloating({
  buttons: myButtons,
  effect:"slide-on-scroll"
});

7. Determine whether to show the collapse button. Default: true.

$.socialfloating({
  buttons: myButtons,
  showHideButton: false
});

8. Specify the unique ID of the sidebar container.

$.socialfloating({
  buttons: myButtons,
  container: 'socialfloating'
});

---

This awesome jQuery plugin is developed by ixtlistudios. For more Advanced Usages, please check the demo page or visit the official website.