Create Inline & Floating Social Share Bars With The Socializer.css

Preview:

Description:

Socializer.css is a CSS library that makes it easy to create inline or floating share buttons for all major social platforms including Facebook, Twitter, WhatsApp, Reddit, LinkedIn, Pinterest, and more.

With 6 button shapes, 9 hover effects, 5 text styles, and over 15 customization options for borders, backgrounds, and shadows – you have over 13,000 possible variations to fit any design aesthetic.

How to use it:

1. Download and import the Socializer.css.

<link rel="stylesheet" href="css/socializer.css" />

2. Load the latest Font Awesome Iconic Font for social icons.

<link rel="stylesheet" href="/path/to/cdn/all.css" />

3. Add social icons to the social share bar.

<ul class="socializer">
  <li class="sr-facebook">
    <a href="#"><i class="fab fa-facebook"></i></a>
  </li>
  <li class="sr-x">
    <a href="#"><i class="fab fa-x"></i></a>
  </li>
  ...
</ul>

4. You can also implement it in JavaScript to dynamically generate properly encoded social links. This simplifies integration.

<div class="socializer">
  ...
</div>

<script src="js/socializer.js"></script>

socializer( '.socializer' );

5. Enable/disable social platforms:

• addtofavorites
• behance
• bitbucket
• blogger
• codepen
• comments
• delicious
• deviantart
• digg
• discord
• dribbble
• email
• etsy
• facebook
• fbmessenger
• flickr
• flipboard
• github
• google
• googleplus
• hackernews
• houzz
• instagram
• line
• linkedin
• mastodon
• medium
• mix
• odnoklassniki
• patreon
• paypal
• pdf
• phone
• pinterest
• pocket
• print
• reddit
• renren
• rss
• shortlink
• skype
• sms
• snapchat
• soundcloud
• stackoverflow
• quora
• telegram
• threads
• tiktok
• tumblr
• twitch
• twitter
• viber
• vimeo
• vkontakte
• wechat
• weibo
• whatsapp
• x
• xing
• yahoomail
• youtubemore

<div 
  class="socializer"
  data-sites="facebook,twitter,reddit,print,email,rss,whatsapp">
  ...
</div>

6. Customize the social share bar with the following values. For CSS implementation, add the values with the prefix sr- to the class attribute of the top container.

• Sizes: 32px, 40px, 48px, 64px
• Shapes: circle, squircle, squircle-2, diamond, drop, ribbon
• Hover effects: opacity, rotate, zoom, shrink, float, sink, fade-white, fade-black, fade-dark
• Layout types: fluid, vertical
• Text styles: text-in, text-out, text-below, text-hover
• Border colors: bdr-white, bdr-dark, bdr-grey
• Border styles: bdr-sm, bdr-md, bdr-lg, bdr-none
• Background colors: bg-white, bg-dark, bg-grey, bg-none
• Icon colors: icon-white, icon-dark, icon-grey, icon-none
• Misc: pad, multiline

<div 
  class="socializer" 
  data-features="32px,opacity,vertical,icon-white,pad" 
  data-sites="facebook,twitter,reddit,print,email,rss,whatsapp" 
  data-meta-link="" 
  data-meta-title="">  
</div>

7. Make the social share bar sticky while scolling the page. Available customiztion classes:

• sr-sb-hl
• sr-sb-vl
• sr-sb-left
• sr-sb-top
• sr-sb-right
• sr-sb-bottom
• sr-sb-white
• sr-sb-dark

<div class="sr-sharebar sr-sb-vl sr-sb-left">
  <div 
    class="socializer" 
    data-features="32px,opacity,vertical,icon-white,pad" 
    data-sites="facebook,twitter,reddit,print,email,rss,whatsapp" 
    data-meta-link="" 
    data-meta-title="">
  </div>
</div>