2 jQuery Share Buttons

by Vladimir 1 min read

Create “Share” buttons with jQuery, from basic functionality to advanced UI effects. The classic window.open() method, which dynamically generates the share URL, is covered. To enhance UX, animated panels and “exploding” icons managed by .animate() and .fadeToggle() are demonstrated. Advanced examples include asynchronously fetching share counts with $.ajax(), creating full-featured and engaging components.

Examples

A compact share button that expands downwards to reveal a list of social media icons.

Collapsible Social Media Share Icons

A compact “Share” button that smoothly expands downwards upon clicking, revealing a list of social networks with icons and text.

An animated share button that morphs and reveals a bouncing sequence of social media icons.

Social Media Share Icons Animation

Initially a round “Share” button, upon clicking it morphs into a close icon, the panel expands to the left, and a chain of round social icons sequentially and bouncily pops onto the screen.