How I Built a Reusable Social-Share Web Component with ChatGPT in 17 Minutes

From a rapid 17-minute prototype generated by ChatGPT to 1–1.5 hours of real-world integration, cross-browser and mobile QA, and UX refinements. Real projects demand documentation, code reviews, and stakeholder feedback – often consuming 2–3× the initial coding time.

Introduction

Over the past few months, I’ve been on a Medium publishing spree – writing deep dives and how-tos for my growing audience. To make my work accessible to non-members, I mirror every post on my own static site: no fancy frameworks, just plain HTML and CSS. As traffic climbed, I found myself wishing there was a simple way for readers to share these articles across their social networks.

These days, whenever I want to do any coding, I just ask ChatGPT. For most small tweaks and feature add-ons, it’s a lean, lightning-fast way to get exactly what I need without the overhead of heavyweight AI or non-AI based Dev tools. Adding a social share feature fit the bill of getting it done using AI.

In this post, I’ll walk you through the exact prompts I used, the code we generated together, how long it took, and the lessons learned along the way.

Here’s what I challenged ChatGPT (and myself) to deliver:

Cross-platform support: Facebook, Twitter, LinkedIn, WhatsApp, Bluesky, Email
Native share fallback: Use the Web Share API on supported browsers
Customizable: Allow passing page-url and page-title attributes
Zero dependencies: Vanilla JavaScript + Shadow DOM
Error handling: Gracefully degrade if template or APIs are unavailable

The ChatGPT-Powered Workflow

Before diving in, I first had to pick the right ChatGPT model. Based on my earlier experiments comparing ChatGPT 4o and Claude Sonnet 3.7 for a JavaScript tool, I went straight for ChatGPT o4-mini-high. In the rest of the article, whenever I mention only ChatGPT or LLMs, I am referring to ChatGPT o4-mini-high.

From there, I treated ChatGPT as a collaborative partner – tweaking prompts, refining output – until we arrived at a polished, reusable component.

Here's are 9 prompts I gave to ChatGPT and approximate time spent prompting and reading the responses:

Time (min)	Prompt Description
0–2	“Generate html component which has capabilities to share the current page…”
2–4	“Can this be a html component” (convert to Web Component)
4–6	“Have you done all kinds of error handling?”
6–8	“Give capabilities to share on Bluesky”
8–10	“How do I pass the pageurl, pagetitle from html page?”
10–12	“Rewrite as standalone JS file that programmatically injects the template”
12–14	“Nothing is rendering—explain why and how to fix”
14–15	“Regenerate the single JS file again”
15–17	“How can I right-align with Bulma CSS?”

Time spent in the ChatGPT session: ~17 minutes, plus an additional 1–1.5 hours of real-world integration and testing (including layout tweaks, browser and mobile QA).

Prompt Breakdown & Rationale

0–2: “Generate html component which has capabilities to share the current page…” Started with a minimal HTML + JS snippet to validate that ChatGPT could produce working share links for the current document.
2–4: “Can this be a html component” Prompted ChatGPT to wrap the initial snippet into a reusable Web Component using Shadow DOM for encapsulation.
Key insight: LLMs often produce bare-minimum code by default, so you must explicitly prompt ChatGPT to wrap your snippet into a reusable Web Component with Shadow DOM to ensure encapsulation and reusability.
4–6: “Have you done all kinds of error handling?” Ensured robustness by prompting for try/catch blocks, template checks, and graceful fallbacks on unsupported browsers.
Key insights: LLMs don't automatically include robust error handling – you must explicitly prompt for try/catch blocks, template-existence checks, and graceful fallbacks on unsupported browsers to ensure reliability.
6–8: “Give capabilities to share on Bluesky” Expanded platform support by including a prompt to add Bluesky sharing integration alongside existing networks.
Key insights: Reminder that you must explicitly list every platform you want, or explicitly prompt the model to add any you forgot.
8–10: “How do I pass the pageurl, pagetitle from html page?” Made the component configurable by adding attributes for overriding the default URL and title values.
Key insight: LLMs will hardcode values by default, so you need to explicitly prompt ChatGPT to parameterize the component by reading page-url and page-title attributes, making it configurable.
10–12: “Rewrite as standalone JS file that programmatically injects the template” Consolidated the template injection and component definition into a single JS module for easy inclusion.
12–14: “Nothing is rendering – explain why and how to fix” Debugged rendering issues by uncovering the need to append the <template> to the DOM before registration.
Key takeaway (Real-world testing): There's no substitute for hands-on QA – thoroughly test the component across different browsers, screen sizes, and devices to catch layout quirks and compatibility issues.
14–15: “Regenerate the single JS file again” Polished the standalone script after fixing the injection bug, ensuring the full code was self-contained.
15–17: “How can I right-align with Bulma CSS?” Added layout prompts to align the component within a Bulma-based page design.
Key insights: Prompted for layout tweaks using Bulma CSS, which proved that real-world integration – trial-and-error across different browsers, screen sizes, and devices from a UX perspective – is still indispensable.

Caveats & Gotchas

LinkedIn behavior: LinkedIn ignores any text= parameter and never pre-populates the compose box. Instead, it scrapes your page's OpenGraph tags for the preview. To ensure correctness, always include:
```
<meta property="og:title" content="…"/>
                <meta property="og:description" content="…"/>
                <meta property="og:image" content="…"/>
```
Web Share API: Only available on secure contexts (HTTPS) and supported browsers (mobile Chrome, Safari, etc.). The component hides the native button on unsupported browsers.
Template injection timing: If you inline <template> in JavaScript without injecting it into the DOM, querySelector('#social-share-template') will fail – leading to a hidden component. Always append the template before defining the element.
Shadow DOM styling: Since styles are encapsulated, you can't easily override them from parent CSS. If your design needs full customizability, consider exposing CSS custom properties.

Conclusion

In under 20 minutes, I had my first code cut ready – proof of ChatGPT's rapid prototyping power. But turning that prototype into a polished feature took another 1–1.5 hours: integrating it into one of my blogs, fine-tuning layout, performing cross-browser and mobile QA, writing documentation, and gathering beta feedback.

Just like any real-world project, “code complete” is only the beginning. Testing, documentation, code reviews, UX refinements, and stakeholder validation often consume 2–3× more time than writing the initial code. So when you hear someone say, “I built this in 17 minutes,” remember the many critical follow-up steps that make the feature production-ready.

This experience also reinforces what I have written in my earlier articles: future developer roles will lean heavily on human-centered activities – system validation, integration, UX design, and cross-team collaboration – where empathy, judgment, and iterative feedback are key. ChatGPT speeds up coding, but the art of delivering high-quality code with seamless user experience still depends on human effort.

Claude 3.7 vs ChatGPT: A Hands-On Comparison for AWS Graviton Calculator Development

We Trusted ChatGPT to Build a Like Button – Here’s What Happened

The AI Revolution in Software Development: Why Thinking Matters More Than Typing

Hungry for more hands‑on guides on coding, security, and open‑source? Join our newsletter community—new insights delivered every week. Sign up below 👇