A few months into the pandemic, our Interactive Design team created the Coronavirus Construction Limits State by State Tracker: a dashboard that would track how states with a stay-at-home mandate classified Construction and Building Material Suppliers. The page displaying this dashboard did not use any of our standard page templates from our content management system. It, therefore, required a custom share bar, rather than the Gigya powered share bar used on our article pages.

Color coded map of the United States that indicates which businesses are allowed to remain open.

Creating an Impromptu Social Share Bar

Our Interactive Designer needed some HTML code that she could slap on the page without us having to do a code deployment. Creating a share bar from scratch is super easy.

Tools needed:

  • Social Icons — we already use Font Awesome on our sites, so it was just a matter of applying the correct CSS classes to the anchor tags (i.e. fa fa-facebook)
  • Social Link Generator — I directed our Interactive Designer to check out https://www.websiteplanet.com/webtools/sharelink/ to generate the appropriate social share links.

Image for post

Bada bing, bada boom!

Image for post

#web-development #front-end-development #javascript #web-components #programming

Baby’s First Web Component
1.25 GEEK