DailyBeast has an epic mobile share widget and I wanted to replicate that. I mean, share widgets are pretty ratchet, but I like how this one works:

DailyBeat sharing widget

How it works

Box Share is mega MVP, so I didn't bother with animations or a 100% copy. It's basically just a heap of CSS & JS that watches for clicks & launches sharing links for Facebook, Twitter, Google+, and email. There's a share/hide functionality too.

Challenges I ran into

I had a lot of trouble getting the divs to stay in fixed alignment, but I found a nice solution on Stack Overflow. Also, I didn't feel like messing with rel/abs positioning, and that's why I didn't round the borders. If I did, I'd have to pull all the icons inward.

What's next for Box Share

Next up, I'll add some CSS transitions & move most of the HTML into the JS include so you can implement it easily. If you've got ideas, lemme know.

Share this project: