Create Custom Social Share Buttons for Your Website Generate HTML/CSS social share buttons for your website with multiple styles and platforms.

The tool works by using React to manage its state, which includes the URL to be shared, the title or text of the share, and the style of the buttons. It uses an array of objects to store the available platforms, each with a unique ID, label, and color. When a platform is selected or deselected, the togglePlatform function updates the state by adding or removing the platform's ID from the list of selected platforms. The getShareUrl function takes a platform ID as input and returns the corresponding share URL, which is constructed using the encodeURIComponent function to properly encode the URL and title parameters. The generateHTML function uses this data to create the HTML for the share buttons, with three different styles available: buttons, icons, or minimal text links.

The tool uses JavaScript's built-in string manipulation capabilities to construct the share URLs and HTML code. It also utilizes React's useState hook to manage its state and handle changes to the input fields and platform selections. The copyToClipboard function from the @/lib/utils module is used to copy the generated HTML code to the user's clipboard when the "Copy HTML" button is clicked. The tool also uses TypeScript to define the types of the variables and functions, ensuring that the code is type-safe and maintainable. In terms of browser APIs, the tool relies on the window object's location and navigator properties to determine the current URL and platform, although this information is not explicitly used in the provided code.

The generated HTML code uses inline styles to ensure maximum portability across different websites and browsers, eliminating the need for external CSS files. Each share button includes attributes such as target="_blank" and rel="noopener noreferrer" to enhance security by preventing malicious scripts from accessing the parent page's context. The tool's use of specific technologies like React, TypeScript, and JavaScript enables it to provide a flexible and customizable solution for generating social share buttons. By leveraging these technologies, the tool can efficiently handle user input, manage state changes, and produce high-quality HTML code that meets the requirements of various social media platforms.