Embed SocialBC into your Website

Embedding your SocialBC posts into a webpage.

Youtube Video of this web tutorial

If you prefer a hands-on walk through, here's a short video tutorial or you can follow the instructions below.

A Post vs. a Feed/Timeline

There are two basic ways you can include social media content into your website. The first is to include only a single post (or "toot" in Mastodonian parlance). The second is to include your (or someone else's) timeline or 'feed' which would include the latest posts from that account.

By default, and according to your admin's settings on your server, most posts and replies on mastodon can be embedded and are viewable to anyone on the public internet. The exceptions are posts marked as "Private" or "Mentioned people only".

Embed a Single Post

A screenshot of selection of the Get Embed Code option on a post The Mastodon web interface has a built in tool on every post to "Get Embed Code" for that post. Click on the three dots below a post and select "Get Embed Code". The option appears right below the "Share" option. If you don't see "Get Embed Code" then that post may not be shareable or embeddable based on the privacy setting, or you might need to click on the reply in order to be taken to the server and for the embed code.

A dialog will appear with the code. Make sure you click the "Copy to Clipboard" button so you get all of the code, it is quite long.

It will start with < blockquote class="mastodon-embed" data-embed-url="https://socialbc.ca ..... etc.A screenshot of the embed code screen

Now that you have copied the embedding code, you can put that anywhere in any HTML page either directly into the HTML code, or through a Custom HTML code widget on Wordpress or other CMS platform.

The example below shows this page being created in HTML and the code for the post being embedded in the HTML

a screenshot of the HTML code where the blockquote is inserted for the single post
Post by @chris@socialbc.ca
View on Mastodon

Embed a Timeline or Feed of your SocialBC account using MastoFeed

a screenshot of the user interface at mastofeed The process for embedding a full timeline or feed is not standardized within Mastodon so other tools have been created that access and display your timeline.

A good resource is Andy Piper's Github that has a list of "Useful Links" which provide embedding services for Mastodon in general. We will use one of those services called "mastofeed".

The code from mastofeed will automatically pull new content from the account specified. a screenshot of the code from mastofeed

Make sure to check or un-check the "Show Header", "Show Replies" and "Show Boosts" options as desired. "Show Header" will show your profile introduction before your posts. Once you insert the HTML code into your webpage or blog/CMS you will see the timeline appear like this with Header and without: