DEV Community

Cover image for Boost Your Website's Social Engagement with Select Share JS
Dev Gaurav Jatt
Dev Gaurav Jatt

Posted on

Boost Your Website's Social Engagement with Select Share JS

🤗Introduction:
In the fast-paced digital age, making your website shareable is key to expanding its impact. Select Share JS simplifies this process, offering an easy-to-use solution for integrating social media share buttons. In this guide, we'll explore the user-friendly features of Select Share JS and walk you through the steps to boost your website's social engagement effortlessly. Let's dive in!

😏Why Select Share JS?
Select Share JS stands out for its simplicity and flexibility. Whether you're working with ReactJS, NextJS, SvelteJS, or traditional HTML pages, this library seamlessly integrates into your project. The inclusion of Twitter, LinkedIn, WhatsApp, Facebook, and email sharing options ensures your audience can spread the word across diverse channels.

🧻Getting Started:
To include SelectShareJS in your project, add the following code to your HTML file:

<div twitter="true" theme="light" id="select-share-js"></div>
<script src="https://cdn.jsdelivr.net/gh/devgauravjatt/select-share-js@main/build/v-1.0/main.js"></script>
Enter fullscreen mode Exit fullscreen mode

For NextJS users, incorporating it into layout.js is a breeze:

import Script from 'next/script'

return (
  <html lang='en'>
    <body suppressHydrationWarning={true} className={inter.className}>
      {children}
      {/*@ts-ignore */}
      <div twitter='true' theme='dark' id='select-share-js'></div>
      <Script src='https://cdn.jsdelivr.net/gh/devgauravjatt/select-share-js@main/build/v-1.0/main.js' />
    </body>
  </html>
)
Enter fullscreen mode Exit fullscreen mode

💦Options:
Select Share JS provides a range of customization options, allowing you to tailor the share buttons to match your website's aesthetics. The available parameters include:

  • Twitter: "true" (Include Twitter share button)
  • LinkedIn: "true" (Include LinkedIn share button)
  • Theme: "light" or "dark" (Choose the theme for buttons)
  • Read More: "true" (Include a "Read More" link for shared content)
  • WhatsApp: "true" (Include WhatsApp share button)

For instance, if you want Twitter, LinkedIn, and WhatsApp buttons with a dark theme and a "Read More" link, use the following code:

<div twitter="true" linkedin="true" theme="dark" whatsapp="true" readmore="true" id="select-share-js"></div>
Enter fullscreen mode Exit fullscreen mode

😎Follow on GitHub for Updates:
Stay in the loop with the latest enhancements and updates to Select Share JS by following our GitHub repository. Your feedback and contributions are always welcome! 🌟

🤯Conclusion:
In conclusion, Select Share JS provides a hassle-free solution for integrating social media share buttons into your website. Its compatibility with various frameworks and ease of customization make it a go-to choice for web developers aiming to boost their site's social engagement. By following the user guide and incorporating this library, you're not just adding share buttons; you're enhancing your website's accessibility and connectivity.

Top comments (0)