How to Add 'Share on Bluesky' Action Intent Button to Your Website

Nov 22, 2024  • HTML  • Javascript

If you’re looking to integrate a “Share on Bluesky” feature into your website, you’re in the right place. This article explains how to create a Bluesky share buttons, format action intent links, and even dynamically set the share text using JavaScript. We’ll include an example with an inline SVG for the Bluesky logo to keep everything lightweight and visually consistent.

Bluesky provides action intent links that allow users to share content easily from your website. When clicked, these links open the Bluesky app or web interface with a pre-filled post. The user can then edit and publish the post.

The format for the Bluesky action intent link is as follows:

https://bsky.app/intent/compose?text=YOUR_TEXT_HERE
  • text: The parameter that pre-fills the post content. This must be URL-encoded and should not exceed 300 Unicode Grapheme Clusters.

You can find an SVG image file of the Bluesky logo on Wikipedia. It has the size of the logo hard coded as 600 pixels by 530 pixels. This is great, but the SVG is set to be too big to use as a smaller icon on your website. To use this SVG on your website, you’ll want to update the SVG to use a viewBox so you can set the size of the SVG image using CSS and/or HTML width and height attributes.

I’ve already made the necessary changes so the SVG can be embedded within a web page.

Here’s the modified SVG for the Bluesky logo:

<svg width="1em" height="1em" fill="#fff" viewBox="0 0 600 530" xmlns="http://www.w3.org/2000/svg">
<path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
</svg>

Additionally, since the social share button should be blue with a white logo, I’ve also updated the fill of the SVG to be white (#fff). This will be necessary below to make the button display as desired.

Example: Static “Share on Bluesky” Button

Here’s an HTML example that creates a share button with the Bluesky logo, styled using CSS and an SVG version of the Bluesky logo embedded within the HTML.

Here’s the full HTML code for the “Share on Bluesky” button:

<span class="share-bluesky">
    <a target="_blank" 
        title="Share on Bluesky" 
        href="https://bsky.app/intent/compose?text=Check%20out%20this%20amazing%20content!">
        <svg width="1em" height="1em" fill="#fff" viewBox="0 0 600 530" xmlns="http://www.w3.org/2000/svg">
        <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
        </svg>
    </a>
</span>
<style>
  span.share-bluesky {
    display: block;
    height: 1.6em;
    width: 1.6em;
    text-align: center;
    border-radius: 0.2em;
    background: #1185fe;
  }
  span.share-bluesky > svg {
    fill: #fff;
    width: 1em;
    height: 1em;
    margin: 0.3em;
  }
</style>

In this example:

  • The link opens Bluesky’s compose interface with pre-filled text: “Check out this amazing content!”
  • The SVG logo ensures the button is scalable and visually crisp.

Dynamic Share Text with Javascript

To make your “Share on Bluesky” button dynamic, you can use JavaScript to set the text parameter with the current page title and URL.

Dynamic HTML + Javascript Code

<span class="share-bluesky">
    <a id="bluesky-share-link"
        target="_blank" 
        title="Share on Bluesky" 
        href="#">
        <svg width="1em" height="1em" fill="#fff" viewBox="0 0 600 530" xmlns="http://www.w3.org/2000/svg">
        <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"/>
        </svg>
    </a>
</span>
<script>
  (function(){
    const pageTitle = encodeURIComponent(document.title);
    const pageUrl = encodeURIComponent(window.location.href);
    const blueskyUrl = `https://bsky.app/intent/compose?text=${pageTitle}%20${pageUrl}`;
    document.getElementById('bluesky-share-link').href = blueskyUrl;
  })();
</script>
<style>
  span.share-bluesky {
    display: block;
    height: 1.6em;
    width: 1.6em;
    text-align: center;
    border-radius: 0.2em;
    background: #1185fe;
  }
  span.share-bluesky > svg {
    fill: #fff;
    width: 1em;
    height: 1em;
    margin: 0.3em;
  }
</style>

Here’s the steps of how the dynamic HTML + Javascript code works:

  1. Page Metadata:
    • The document.title fetches the page title.
    • window.location.href fetches the page’s full URL.
  2. Dynamic Share URL:
    • The text parameter is dynamically constructed using encodeURIComponent() to ensure proper URL encoding.
  3. Integration:
    • The link (#) is replaced with the dynamically generated Bluesky URL when the page loads.

Conclusion

Adding a “Share on Bluesky” button to your website is simple and effective. Whether you choose a static or dynamic approach, these tools ensure your audience can share your content with ease. With the provided examples, you’re ready to start integrating Bluesky sharing into your projects!