So I wanted a Nostr follow button on my site. Turns out... it didn’t exist 🤷‍♂️ So I built one. And more. 🛠️Launching "Nostr Components" → Embed Nostr posts, profiles & buttons anywhere on the web. → Looks good too 😎 Tagline: Take Nostr content beyond Nostr clients – embed it anywhere. Docs: Code: Dev story: Big shout out to @Hemath for helping with storybook documentation. Thanks to my friends @Saravanan Mani and @Vivek for review and feedback. and of course thanks to @fiatjaf for inspiration, @PABLOF7z for NDK #nostr #components #followbutton #webcomponents #indieweb #buildinpublic #opensource #nostrDev image

Replies (78)

This is an interesting development
Saiyasodharan's avatar Saiyasodharan
So I wanted a Nostr follow button on my site. Turns out... it didn’t exist 🤷‍♂️ So I built one. And more. 🛠️Launching "Nostr Components" → Embed Nostr posts, profiles & buttons anywhere on the web. → Looks good too 😎 Tagline: Take Nostr content beyond Nostr clients – embed it anywhere. Docs: Code: Dev story: Big shout out to @Hemath for helping with storybook documentation. Thanks to my friends @Saravanan Mani and @Vivek for review and feedback. and of course thanks to @fiatjaf for inspiration, @PABLOF7z for NDK #nostr #components #followbutton #webcomponents #indieweb #buildinpublic #opensource #nostrDev image
View quoted note →
Very cool, and very useful. I also like the error message when no Nostr / Lightning extension is active in the browser. However, the video linked points to Alby which no longer has support for an easy LN wallet. I suggest a link to another option that is easy to use. Perhaps Nos2X from @fiatjaf ? image
Thank you for doing this. I wanted to display my Nostr profile on my homepage, but I didn’t like the result and ended up hard-coding the info for simplicity. I will play with your web components and provide feedback, if any! Also, custom zap buttons would be great!
Yes. I need to update that section to a comprehensive popup, with 1. Separate link to the video, which explains private key, public key, nip07 browser extensions 2. Links to the extension themselves. My thought process is, when you put nostr stuff in a website, 99% of the viewers won't be aware of Nostr itself. So having a video will help them to get started.
The video itself is a great idea. The only problem was that Alby doesn’t do custody wallets anymore, and running a node isn’t that easy.
oh oh. It's only self-hosted now! Just noticing it. Didn't follow up with alby lately. Thanks for pointing it out!
Yes. It's on roadmap. But for now, I will update the documentation with steps to integrate this in WP. and DM you tomorrow.
Nice! No one on the internet has a nip-07 extension. This barrier precludes many folks new to nostr from following you. In the user flow of a new to nostr user, consider some (perhaps expedited) version of @daniele nstart key creation & onboarding. At the end of the flow your npub should be part of the newly created contact list. Nstart link: https://start.njump.me/
I can certainly appreciate this, I just wish we had fully functional, interoperable clients first, hehe.
👀
Saiyasodharan's avatar Saiyasodharan
So I wanted a Nostr follow button on my site. Turns out... it didn’t exist 🤷‍♂️ So I built one. And more. 🛠️Launching "Nostr Components" → Embed Nostr posts, profiles & buttons anywhere on the web. → Looks good too 😎 Tagline: Take Nostr content beyond Nostr clients – embed it anywhere. Docs: Code: Dev story: Big shout out to @Hemath for helping with storybook documentation. Thanks to my friends @Saravanan Mani and @Vivek for review and feedback. and of course thanks to @fiatjaf for inspiration, @PABLOF7z for NDK #nostr #components #followbutton #webcomponents #indieweb #buildinpublic #opensource #nostrDev image
View quoted note →
Bravo! I hope I need this soon. I’m working on a book that’s bitcoin-focused, but a fair amount of NOSTR is in there, too. When I do my own website, i want it to be populated with NOSTR notes as much as possible
"No one on the internet has a nip-07 extension." --> 100% Thanks for the suggestion. I will look into it and see how the onboarding flow can be improved!
Amazing. Love to help you me any customization, new components that you need when you do this. Please DM me anytime.
Das ist tatsächlich sehr cool! Werde ich absehbar verwenden!
Saiyasodharan's avatar Saiyasodharan
So I wanted a Nostr follow button on my site. Turns out... it didn’t exist 🤷‍♂️ So I built one. And more. 🛠️Launching "Nostr Components" → Embed Nostr posts, profiles & buttons anywhere on the web. → Looks good too 😎 Tagline: Take Nostr content beyond Nostr clients – embed it anywhere. Docs: Code: Dev story: Big shout out to @Hemath for helping with storybook documentation. Thanks to my friends @Saravanan Mani and @Vivek for review and feedback. and of course thanks to @fiatjaf for inspiration, @PABLOF7z for NDK #nostr #components #followbutton #webcomponents #indieweb #buildinpublic #opensource #nostrDev image
View quoted note →
No need to bother, my approach is very different than yours and it's good to have both.
Angel's avatar
Angel 1 year ago
⚡⚡⚡⚡⚡❤️❤️❤️❤️
Thats it, found it my self 😁
Saiyasodharan's avatar Saiyasodharan
So I wanted a Nostr follow button on my site. Turns out... it didn’t exist 🤷‍♂️ So I built one. And more. 🛠️Launching "Nostr Components" → Embed Nostr posts, profiles & buttons anywhere on the web. → Looks good too 😎 Tagline: Take Nostr content beyond Nostr clients – embed it anywhere. Docs: Code: Dev story: Big shout out to @Hemath for helping with storybook documentation. Thanks to my friends @Saravanan Mani and @Vivek for review and feedback. and of course thanks to @fiatjaf for inspiration, @PABLOF7z for NDK #nostr #components #followbutton #webcomponents #indieweb #buildinpublic #opensource #nostrDev image
View quoted note →
Hi Everyone, Here is follow up on Nostr-components project: 1. We added zap button component. Now you can put zap button in any of your websites. 2. We also published the package as - Wordpress plugin - - NPM module - https://www.npmjs.com/package/nostr-components 3. Full code rewrite for stable base, so we can easily add more components over this. Tagline: Embed Nostr anywhere on the internet, a Zap Button for every webpage. We are also launching fundraiser in @Geyser to help support the project development: Docs: Code: Dev story: Big shout out to Summer of Bitcoin, Adi and THE INTERN @Arpan for huge support. Thanks to my friends @Hemath and @Vivek  for testing, review and feedback. #nostr #components #zapbutton #likebutton #followbutton #webcomponents #buildinpublic #opensource #nostrDev Earlier launch post: View quoted note →
@Moe@`Moe` Zap butons are ready. More info here: nevent1qqs8m4q8674sxalu4w9nkqc5g0zk6ptkrrq58hygp8mtkfrkpsqq68cz2fvs6
This is really awesome stuff given it works! Now if people start seeing nostr, zap buttons, and whatever else on the coolest sites we'll have them wondering
Hi. Couldn't see any error in that link. Did inspect element and couldn't see any nostr-components related code as well. Can you please give me more info on what you tried. Happy to help
Thanks for the screenshot! Just copy this on line 191: $shortcode_2 = do_shortcode('[nostr_zap_button npub="npub1gwa27rpgum8mr9d30msg8cv7kwj2lhav2nvmdwh3wqnsa5vnudxqlta2sz" url="' . $current_url . '"]'); i removed the [ and ] surrounding your npub. That's not needed. I ll update the documentation and mention to remove the square brackets [ and ], when replacing npub. So it's easy for non-devs too.