How To Embed Nostr Posts On Your Website

Since the inception of social media, we’ve seen an explosion of online content. Social media has lowered the barrier to entry for anyone in the world to create content and voice their opinions and has revolutionised how we communicate. It’s fast, concise and a great way to connect with your customers, prospects and clients, with billions of social media users visiting these sites daily. Social media is a powerful way to amplify your message and showcase your brand.

If you’re a brand or a blog, embedding content on your site is one key to maximising discoverability on social media. Embedded Tweets are undoubtedly the most popular embedded content along with YouTube videos, but embedded Facebook, Instagram, LinkedIn, and TikTok posts are also possible. There is a clear reason why social media apps offer this feature, because they work and help divert traffic back to their sites.

Adding social media post embeds to your website helps create a cohesive online identity and makes it easy for people to follow your online conversations in one place. It can increase engagement from website visitors, plus it’s a great way to keep your website fresh and relevant.

Social media embeds are also great for sourcing the opinions of others and adding them to your content to push a particular point or to give credit to the original creator.

Embedding notes and other stuff.

If you’re a Nostr user and you’ve decided that this will be the primary place where you are going to create regular content, or you regularly source posts and content from Nostr. You can also embed content from the network, but it will take a few steps, and there are some nuances you have to deal with using Nostr note embeds.

If you would like to embed a Nostr note on your site, you will have to use a third-party solution/micro-service since no single client offers this feature as yet. To create an embed you will need the following.

1. Required (String): The first param is the hex ID of the note you’d like to embed.
2. Optional (String): The second param is a querySelector value for the HTML element you’d like to embed the note into. The note will be prepended to the body element if you don’t pass this parameter.
3. Optional (String): URL of the Nostr relay that you’d like to read from. If you don’t pass a third parameter, this will default to wss://relay.nostr.band.

Once you have all the elements ready, you can use the following code to create the embed. Add the following snippet to your site and change the parameters passed on the nostrEmbed.init function.

<div id="nostr-embed"></div>

<script>
  !(function () {
    const n=document.createElement('script');n.type='text/javascript';n.async=!0;n.src='https://cdn.jsdelivr.net/gh/nostrband/nostr-embed@latest/dist/nostr-embed.js';
    n.onload=function () {
      nostrEmbed.init(
        '10c9fb11f742e6dc05d8bbcb4af790a4453f1bc046e40ca1b5385996c63d93ba',
        '#nostr-embed',
        'wss://relay.nostr.band'
      );
    };const a=document.getElementsByTagName('script')[0];a.parentNode.insertBefore(n, a);
  })();
</script>

If you don’t like dealing with HTML and you’re looking for an easier solution, you can use the Nostr embed widget by Nostr.Band.

1. Visit Nostr.Band Embed tool
2. Grab the note ID either from the URL bar in your browser, or your client might provide a copy ID option.
3. A note ID will begin with NoteXXX.
4. Paste the note ID into the widget.
5. Optional: You can also add the relays you wish to use to recall the post; if not, it will default to Nostr.Bands relay.
6. If done correctly, you should see a display of your note along with an option to copy the code.
7. Copy the code, head to your site, and paste it on the page or post where you want to display the note.
8. Once embedded on your site, the embedded note should render like the one below.
9. Your Nostr post embed will pull in the following information if successful.
   • Your account profile picture.
   • Your account NIP-05 handle.
   • Your npub, which can be copied.
   • Your note content.
   • The number of zaps, comments, reshares, and engagement on the post.
   • An option to open the note in a Nostr client.
   • A copy option to copy the note’s ID.

If your note embed fails to load, it might be due to a broken note ID or the relay is struggling to source the note. Your embed will provide you with the following error message.

“Sorry, there was an error fetching this note from the specified relay. Most often, this is because the relay isn’t responding.”

You can either try to refresh the page; if that doesn’t work, you might want to add another relay or several relays to pull the note from so the embed widget has a better chance of sourcing the note.

Setting your preferred client.

As for the user experience with Nostr note embeds, it’s not yet as smooth as your traditional platforms, which would allow you a one-click redirect to the content on, let’s say, Twitter, which would then allow you to comment, like or retweet that post. Instead, Nostr note embeds using this method will redirect you to a third-party page hosted on Nostr Band where you can then open the post on your preferred client.

You will have the option to open the post and select your client from the list, and you can even set it to remember your selection in future, so your next open will require one less step.

One benefit of Nostr embeds is that they are far more robust than traditional social media websites. As is the case with legacy social media, embeds are at the mercy of the platform and its content policies. If a YouTube video is deleted or a tweet removed, the metadata might remain from the original post, but any photos and videos will not display.

In Nostr, you can embed your content and host it on several relays and recall the embed from any relay open to supporting your content or from your private relay. The text won’t change; you can still retain all the engagement on the note, such as likes, comments and reshares.

Make nostr part of your content strategy.

Embedding Nostr posts is a great way to capture new audiences, capture new followers on Nostr, get more shares on Nostr posts and show you’re active in digital conversations. Nostr post embeds drive users to your account, and you can get feedback or additional comments on your posts.

Whether using Nostr as a customer care channel or promoting your content brand, embedding a Nostr post on your site is valuable visibility.

As you use your website or articles to drive users to your Nostr account, you will start to build direct communication lines with your followers. That way, you can amplify content to the new users you acquire on your Nostr account.

Do your own research.

If you want to try out Nostr or learn more about it, we recommend checking out the following resources to kickstart your research.

• GitHub – Nostr embeds

Are you on Nostr?

If you are a Nostr user and want to hang out and chat with us or follow our content on your preferred Nostr front end, feel free to add us using our PubKey below and send us a zap if you’ve got sats to spare.

npub10mxnle348mzv2dnj0ylgz3zu9gceenc29x9fr4m6mnars66j7vxsnkn8mj

The Bitcoin Manual’s Nostr Pubkey

Please give us your notes.

If you have used Nostr, which client do you prefer and why? Are there any clients that you think deserve mention? Let us know in the comments down below.