Autopost to Bluesky and Mastodon by API

Last time we learned how to verify our accounts using a domain with a free Glitch website – this time let's set up a simple app to crosspost some automated content to Bluesky and Mastodon using their APIs.

We'll set up developer credentials for both platforms, pop them into Glitch, and post some daft text including random emoji. We'll also discover a more complex example that posts links and images, in case you want to continue building!

Remix the Glitch project

We're using a Glitch project with a lot of the code setup already so go ahead and remix it to get your own copy:

• ~social-poster

The app uses Node.js and Axios to make connections to the Bluesky and Mastodon APIs, but don't worry if you aren't familiar with these frameworks, you'll be able to pop in your details and get postin' easily!

If you like you can take a minute to browse the project. There are instructions in the README as well. We'll mainly be working in these files:

• .env where we include our credentials
• src/client.js where we connect to the APIs
• server.js where we call our client methods and manage scheduling

The content we post by default is in the postTxt variable in src/client.js so change it if you want to post something different – the code initially only supports plain text content, but you'll find detail on posting media below.

These example posts demonstrate the default content:

• https://mastodon.social/@suewtf/113644869914130623
• https://bsky.app/profile/www.sue.wtf/post/3ld6oulfqg72z

Get your developer credentials

To post from somewhere outside the official Bluesky and Mastodon apps, we're going to use the APIs. APIs are interfaces platforms provide to allow you to access their features using code. In order to gain this access, we'll need to authenticate with both platforms – this keeps the user data on the apps and websites we use safe.

Bluesky app setup

For Bluesky, we need an app password for the account we want to post to. In your Bluesky account, navigate to Settings > Privacy and Security > App Passwords:

• Click Add app password
• Enter a Name for your app password, like "Glitch poster"
• Copy the password and click Done
• Paste the password into your Glitch remix in the .env file as the APP_PASSWORD variable
• While you're in the .env, enter the handle for the Bluesky account you want to post to

Mastodon app setup

For Mastodon, you'll need a token to authenticate your requests. Log into your account (you'll need to be in a browser rather than a mobile app). Navigate to Preferences > Development, and click New application.

• Give your application a name, like "Glitch poster"
• For Application website, include the URL of your Glitch website, which will end .glitch.me
• Leave the Redirect URI with the default content
• For scopes, make sure you check write:statuses and write:media if you want to be able to post images
• Submit your application
• Copy the value of Your access token
• Paste it into your Glitch project .env as the MASTODON_TOKEN variable

💡 You can also add your Glitch website as a verified link in your Mastodon profile – include a link in index.html back to the Mastodon account, with rel="me" in the anchor.

In your Mastodon account, it's also a good idea to check This is a bot account in Settings > Profile.

Post!

That should be you all set to post! Your Glitch remix includes code to run the posting on a schedule, but you can also post manually. In the preview, click into the address bar and enter one of the following:

• postBsky to post only to Bluesky
• postMasto for Mastodon only
• postAll for both

Open the Logs to find any details or errors.

Check your accounts to find the posts.

Examples posts on Bluesky

Example posts on Mastodon

Check out the code

The code for Bluesky and Mastodon is slightly different, so let's break it down so that you can tweak and use it elsewhere. We'll be exploring src/client.js for the API connections.

For Bluesky, we need to start a session and save the token:

const session = await bskyClient.request({
  url: "/com.atproto.server.createSession",
  method: "post",
  data: {
    identifier: process.env.HANDLE,
    password: process.env.APP_PASSWORD,
  },
  headers: {
    "Content-Type": "application/json",
  },
});
bskyToken = session.data.accessJwt;

We can then use the token in subsequent requests. Next we post the post:

const post = await bskyClient.request({
  url: "/com.atproto.repo.createRecord",
  method: "post",
  data: {
    repo: process.env.HANDLE,
    collection: "app.bsky.feed.post",
    record: {
      $type: "app.bsky.feed.post",
      text: postText,
      createdAt: date,
    },
  },
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer " + bskyToken,
  },
});

It's a bit more complicated if you need more than plain text – to include links you need facets, and to include media you need embeds. You'll find examples of both in ~wtf-poster.

For Mastodon we need just one request:

let data = {
  status: postText,
};
const postResponse = await mastoClient.request({
  url: "/v1/statuses",
  method: "post",
  data: data,
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer " + mastoToken,
  },
});

Mastodon handles links automatically, but you'll need more processing if you want to upload images – the media endpoints let you add and link to uploaded files. Check out ~wtf-poster for an example.

Schedule posts

In your Glitch project server.js file, you'll find scheduling code around line 25. Uncomment the code out if you want your account to post automatically on a schedule – you can tweak the timing!

• Ready for more automation? Remix or copy from ~wtf-poster to post links, images, and content from a third party API... 🎢🎡🛸

🪩🛼🌈 Share your cool autoposters in the Glitch forum!