HPR4272: Embed Mastodon Threads

Hosted by hairylarry on 2024-12-17 00:00:00

This show has been flagged as Clean by the host.

Episode 4 - Embed Mastodon Threads

This is Episode 4 of the Plain Text Programs Podcast hosted at Hacker Public Radio. As always I will include links with the show notes rather than reading them on the podcast except there will be one exception to that today, the link to my Plain Text Blog, home.gamerplus.org.

My blog and this podcast were my inspiration for writing the Embed Mastodon Threads program. Besides posting the show notes at Hacker Public Radio where they have a comments section I also post them at my blog. Then I make a Mastodon post that includes a link to the show notes on my blog and designate it as being the comment thread for that episode of the podcast. I also post a link to the comment thread on Mastodon in my show notes. Or at least I did in the past.

It came to mind that it would be nice to be able to display the comment thread at the bottom of the blog post. So I made a Mastodon post about this, and I quote.

So here's my idea.

I want to use mastodon toots as a comment thread for my blog posts.

At the bottom of the blog post I want to embed the toot and the replies.

I can pull the toot id from the embed code.

Then I want to make a database query to get all the replies to that toot.

Then I can generate the embed codes needed to show the toot and all the replies.

I'm a mysql guy, not postgres. Also a Mastodon newb.

I want to know how to get the reply ids for a toot.

Any help, links, etc?

End quote.

I immediately got responses from some programmers expressing interest in the idea and giving good advice.

I did some research based on their suggestions. I had a good night's sleep. And then I made another post in the morning. And I quote.

Mastodon is so great.

I had this idea last night and fiddled around with it long enough to realize I was doing it wrong.

So I made a post on Mastodon and almost immediately got help.

I found some good info on the Mastodon API.

I wake up this morning to more help and I found out about using curl in php to make https requests.

Then a musician friend of mine who I've been following since before Mastodon sends a working example, with code, in a javascript environment.

And I've got a plan.

End quote.

So credit where credit is due.

The programmers, gamers, and musicians helping me were:

Jeff the GenX Alien
@jeff@soapbox.hackdefendr.com

EcksDy
@EcksDy@techtoots.com

Malin
@malin@dice.camp

and

Wayne Myers
@conniptions@mastodon.social

Now, I've known Wayne Myers since before I was ever on Mastodon. We share an interest in free culture music and I have played his songs on my radio show, Something Blue, recorded by his band, Fit and the Conniptions.

He sent some links in a couple of comments to other blogs that were embedding Mastodon threads which confirmed that my idea could work.

Jeff the GenX Alien gave me some significant technical help. And I quote.

Use tootcli to learn everything you need to know about the inner workings of Mastodon.

https://github.com/ihabunek/toot

Whatever the API supports so does toot.

End quote.

So I looked into tootcli and the Mastodon API and I realized that I didn't need to access the database for my program, I could just use the API.

So, thanks Jeff.

My second clue came from EcksDy. And I quote.

I've got some help too. Using the Mastodon API and curl in php it should be doable.

End quote.

So then I started to research using curl in PHP to retrieve json data from the Mastodon API and that's what I went with.

I set up a testbed and Malin chimed in with test results. He continued to help with testing and ideas throughout the rest of the project.

That's why Mastodon is so great! Way better than consulting an AI bot.

So I had my work cut out for me. Here is where this program is like my Plain Text Programs. I work hard, up front, until I am convinced that I have an idea that will be easy to implement. This is much easier than doing it the hard way first and then rewriting the program later after it becomes difficult to maintain.

I said I had a plan. This was my plan.

Write a PHP program that will generate a webpage that can be embedded in an iframe. This program will take a link as a parameter included in the url.

Get that link from the Mastodon embed code for the parent post.

Use the API to retrieve the data associated with the parent post including the replies.

Then generate the page by inserting the appropriate data into Mastodon's existing embed structure.

That's kind of a broad framework but it certainly seemed doable. And it was.

So first I wanted to make the API call so I could look at the data.

I found this video by Alejandro AO.

How to easily create cURL API requests in PHP (Wordpress, Laravel, Symfony) https://www.youtube.com/watch?v=iRLgEWMNA6w&t=602s

He recommended that you use curl in the terminal to test your API call. Then you use a web app called Curl-to-PHP to generate your PHP code to make the same API call from your program.

My first time consuming stumbling block was what I call the problem with the colon.

There are some great documents detailing the syntax for API calls which I will link to in the show notes.

And where you are supposed to insert an id they show that as :id.

Like an idiot I thought the colon was part of the syntax, not as they intended, a marker to indicate insert your id here. This is why I like to see actual code examples in syntax documents.

Anyway I couldn't get it to work so I searched around until I found some code examples and that turned on the lightbulb in my head.

Now I was able to make API calls using curl in the terminal. I copied the working curl command and pasted it into the Curl-to-PHP website and it output some code. And it worked! Which I was very glad about because previous research into how to make API calls with PHP was confusing to say the least. Sometimes PHP gifts you with and abundance of riches which doesn't always make life easier.

So I made my API call from my program. The Curl-to-PHP code returned $result. And then I used the json_decode command to turn the result string into an array of Mastodon data.

$obj = json_decode($result, true);

And I could use the print_r command to look at that data.

print_r($obj);

I immediately put the print_r command at the bottom of my program where it resides today as commented out debug code. This way while I was looking at my program output I could just scroll down or search to find what the actual data looked like.

So I fumbled around for a while before I figured out that I would need the id and the url to make my idea work.

Accessing json data is reading an array. So easy peasy or maybe not. This code returns the id of the reply from inside a while loop where $i is the index.

$id = $obj['descendants'][$i]['id'];

Like I said, it looks easy now. Needless to say it took some head scratching to figure out the exact syntax.

I used to be a mason and people would always ask me how I learned masonry. I'd look them in the eye and say, "Trowel and error". There was, in fact, a lot of trowel and error going on.

So then I generated the embed code to display each post and it worked. For all of my posts. Not for replies from other servers.

So I scrolled down and examined the json data and I found the url field that had all the info about the replies, server, username, and id. So I picked up the url field the same way I picked up the id field and updated my code with the url server and name.

This still didn't work. After staring at the json data for a while the light finally dawned. The id I was using was the gamerplus id from my server. The id I needed to use was in the url field from their server.

Now that I had become enlightened it was easy to notice that the url field contained the exact info that I needed to use in the embed. Remember what I said about doing it the hard way before you replaced that code with the easy way. That can happen even when you have a plan.

So by using the url data in the embed I have less string handling and fewer lines of code.

I went to bed and in the morning I made this post. And I quote. > > I am able to pull the urls from the json call so that should solve the missing comments issue. > > And then it comes down to the issue of data structures. > > KISS > > I have decided, for now, to display the comments in chronological order without concern for whether a comment is a reply to the post or a reply to another comment. > > A chronological list rather than a tree. > > Easy to implement (kind of/relatively) and easy to understand. Also no indents. > > This project will be licensed GPL so I am certainly open to others applying other data structures to the data display. Everything you need to display a tree is in the json. > > End quote.

So the data structure I needed is called a multidimensional array or an array of arrays.

In terms of a database table it is two columns and a bunch of rows.

In terms of PHP arrays it's an array where each element is an array with two values in it, the id and the url. Now, in my case, the id is from the gamerplus server. The url is from whatever server the replyer calls home.

I initialize the array with the parent post.

$ids = array(array($id,$url));

You can see the nested arrays in the code.

Then I add items to the array like this.

$ids[] = array($id,$url);

I access an array item like this.

foreach($ids as $id) {
  $url = $id[1];

The 1 refers to the second element of the array because programmers start counting at 0.

Then using the url and the domain that I captured from the GET parameter that passes the parent url into the program I build the iframe embed for that post using the Mastodon embed as a template.

Which worked but the posts weren't displayed in chronological order. Because the json data isn't necessarily in chronological order.

So I had to sort the multidimensional array on the id. Which isn't as straight forward as the sort() command.

So I found this article on stackoverflow called

How do I sort a multidimensional array by one of the fields of the inner array in PHP?

It had a two line solution that I modified to work with my array.

And now all my posts were in chronological order.

Stack Overflow code is licensed CC BY which is one way compatible with the GPL. Just include the attribution in a comment.

My first post quoted above was posted on Friday, October 25, at 8:40 PM.

On Monday, October 28 at 8:52 PM I wrote, "Here's the blog post proof of concept/working code."

Three days from "I have an idea" to "working code". That wasn't all I did in those three days. Saturday I had a repertoire session with my band, Jazz Buskers. Sunday I produced my radio show, Something Blue. But when I'm in the middle of a programming project I get hyper focused. Sometimes I have to force myself to step away.

And I have worked on the code a little bit today. And I will in the future too. I did a lot of testing today and some Mastodon servers and/or accounts just don't support embeds. But if you want to use Embed Mastodon Threads on your blog or website your toot will probably be the parent and if it works on your account, you're good.

Also posts from different servers look different. Sometimes the background color is different. Sometimes the links look different. Sometimes the whole post is a link to that post on Mastodon.

I decided to embrace that as a feature rather than a bug with the different look making it easier to distinguish posts made on Gamer+ from posts made on other servers.

I have uploaded Embed Mastodon Threads to home.gamerplus.org. At my blog I have a post called Embed Mastodon Threads Hosted On Gamerplus where I say, "The program is licensed GPL and I will put up a codeberg repository so you can download it and install it wherever you want. But feel free to use my server." And then I go into detail about just how to do that in the embedded comments thread.

The program is 46 lines of code with 11 lines of comments including attribution comments and debug code that is commented out. So 35 lines of code. Over three days that's 12 lines of code a day. About double normal expectations for a programmer.

This has been a long podcast, certainly longer than most of my podcasts will be. But I wrote it right after I did the project and it gave me an opportunity to discuss the development process. There were many issues I had that I didn't mention but I think I hit the high points.

Throughout the whole project I was posting to my threads on Mastodon so that also helped me check back on the development history of this three day project. The stream of boosts and replies from my compatriots helped keep me going too.

It was a rush!

So this is not exactly a plain text program because it uses a database accessed through the Mastodon API. Still, I do not have to maintain that database, it's just there on every Mastodon instance, ready to use.

Most of my plain text programs are web apps or web pages. This one is a web service.

And it is simple to use. All you have to be able to do is copy the embed code from Mastodon, extract the link, and paste the link into the url that calls the web service. Then you put that url into an iframe on your blog or web page.

I have a help page for using Embed Mastodon Threads in the same directory as the thread.php program where you can generate and copy your iframe code. In fact the help page is also a Plain Text Program which I may talk about in a future podcast. On the help page are instructions on how to get a link from the Mastodon embed code. Then you paste the link into a form and hit submit. The page generates your iframe embed code that you can use in your blog or web page. The page also displays what the embedded thread will look like.

If you would rather download the code and install your own instance of Embed Mastodon Threads I have a codeberg repository. Again all the links are in the show notes at Hacker Public Radio and at my blog at home.gamerplus.org.

If you have questions you can reply to a thread on Mastodon or email me at hairylarry@deltaboogie.com. If you don't have a mastodon account you can get one at gamerplus.org.

Hacker Public Radio

Your ideas, projects, opinions - podcasted.

New episodes Monday through Friday.

HPR4272: Embed Mastodon Threads

Episode 4 - Embed Mastodon Threads

Links

HPR Comments

Henrik Hemrin says: How is the post behaviour on Mastodon reflected on the web site?

Ken Fallon says: Wayne Myers ?? Where did I hear that name before ?

Mastodon Comments

More Information...

Copyright Information