quorrafromtron.org

Blog Social Media (BSM)

Contents

• Posting
• Replying to a Blog Post
• RSS Feeds List
• Notification Email
• Conclusion

On this page, we will be discussing our method for treating your blog like any other social media site. The idea is that with a blog and any other features any static website will support, you can recreate the features of most text based social media platforms (I mean, you could make it support images and video too, but that will likely require larger server space. But there's nothing stopping you, aside from cost at that point).

These features include:

• Posting (obviously)
• Reposting
• Reply Threads
• Notifications (for reposting, replying, or @ing)
• Following Feed (your RSS aggregator)

Before we begin, you should make sure to indicate somewhere obvious that you're using this system. For instance, you could say on your blog posts listing page "This site uses BSM" (Blog Social Media). Attempting to use this system with people who don't say this runs the risk of bothering people who don't use it. Getting a ton of unsolicited emails isn't very much appreciated by people who don't know what they mean. As such, putting this message in a place people will see will result in people feeling comfortable to talk to you. Consider also linking to this page so that this idea can spread. :3

For this guide, you should only need to know basic html and have a website.

EDIT: I feel the need to mention that, having now made those demo pages, it seems that doing all of this manually is fairly unwieldy and obtuse, and I don't see this getting wide adoption without some amount of automation. As mentioned at the end of this guide, I plan to make an app that will make this a lot easier, where you can use template html code for making new posts and replies by simply providing the requisite links and content, as well as updating the RSS/Atom feed. If you manage your site via git through ssh, it will even automatically commit the changes and push them for you, so it'll be about as useable as any other social media site. That's gonna be a ways out though. In the meantime, I'd still like to try my hand at managing my soon to be blog on this site manually.

Posting

This is likely the simplest part of the process, because it is nearly identical to posting to any normal blog. It will be a new page to your site, likely organized into some "blog" folder. It will likely have a title, with content underneath. This is nothing new.

It could be that your blog already has an RSS feed, which you advertise at the top corner of each blog page. This will now be a likely necessary addition to your blog posts, because your RSS feed is going to become a major factor in keeping people informed of not just your blog posts, but also of your replies.

The first real difference is going to be in providing an id to a tag encompassing your blog post's content, that being the title and actual text (but likely excluding the RSS feed button). This is necessary so that it's easy for other people to find it on your page. You may think, "Oh but it's front and center, how could they not find it?" but there's a reason this will be necessary which I will make clear in a bit. For now, just make sure you give it a unique id.

The second real difference is going to be in providing a link to the blog post, in the page of the blog post. At a glance this also seems ridiculously redundant, but in this case it is merely to make it easy to copy the page URL, which will be slightly altered from what you have in your search bar. It should be located outside the tag that encompasses your blog post's content (perhaps with the RSS button). It should point to the URL of the same page, but at the end it should include an id specifier, which is simply the '#' character, plus the id you set your container tag to. For example, say I want to link to this page, and my id is "post". I'd get the following URL:

quorrafromtron.org/net-help/blog-social-media.shtml#post

If you try that link right now, you'll see it leads to the bulleted list near the top of the page, because in the html source code of this page I specified for that bulleted list to have the id "post". Providing a link means you don't necessarily need to tell anyone what id you used, and it'll take you right to the content. This is less useful for the main post content, but it will rapidly become more useful when we get into replies. Anyways, this link could be called anything really, but you probably want to make it descriptive. Maybe something like "link to here" or "copy me" or something. I've seen some online articles that do this kind of thing with section headers, and they use a small arrow icon, so you could do that too.

The final real difference is going to be in adding a "Replies" section at the bottom of the blog post, outside of the id'd tag. This is where you will be putting replies to your post.

Finally, it goes without saying, don't forget to update your RSS feed. This may be done automatically or manually, but it should be done nonetheless. You should also specify the URL with the id specifier in the feed for consistency's sake when taking into account the other kinds of posts that will be done here.

Replying to a Blog Post

This is where things start to get interesting. Lets say you come across a blog post on some other site, either through following their RSS feed, following someone else's RSS feed who reposted their post, or even simple web surfing. Lets also say you want people on your site to see this post, and potentially to see your response to it.

First, you will likely want a part of your site separate from your blog posts. You could just keep it with your blog posts, but then your blog would function less like a blog containing your thoughts. This is up to you. I would put it in a place labeled something like "replies" because of how we are going to use this later, but you could just as easily label it as "external" or something, meaning everything that doesn't originate directly from your site, such as reposts. You could also choose to either put all these replies on a single page, or have a separate page per thread. Again, it's up to you.

Either way, you can make a new page here, similar to any other blog post, up until the point where you would usually put a title and content. Instead, you will likely want to create a <details> tag. There could be any number of replies after a while on this one page, and hiding the bulk of it will make your post more digestible. For the <summary> tag, which will be the only part of this reply you will see without expanding it, you should put the "Blogger said:" (replacing "Blogger" probably with the domain name of the person who posted the blog post). Within the <details> tag we will have a link, an <iframe>, and then your message, plus any other subsequent replies of this same form.

The link's purpose is obvious. If you want to show your website visitors this post, you need a way for them to visit the post. This is where you should use the link the person who posted the post provided, that was explained in the previous part. Simply copy paste the URL of their link into your link. You could name it something like "link to", or whatever else, so long as you're explicit in your meaning.

Next up is the <iframe>, so that you can show the blogger's post on your page. You could just leave it as a link, but that's not very visually interesting and it requires your readers to hop between sites to get the full context. You could also just take a screenshot, but then if the blogger makes changes to the post, that won't be represented in your reply. So an <iframe> is the best option here. This tag is used to embed another site into your own, so it's almost made for this purpose.

The general format you want to use here will be:

<iframe src=URL scrolling="no" loading="lazy" sandbox="allow-same-origin" width=WIDTH height=HEIGHT></iframe>

Lets walk through this. First we have "src=URL", which is where you want to paste the link you copied from the blog post, replacing the "URL" part. This is why we want our blog posts to have ids, because putting the id in the URL will make the iframe instantly scroll to the right location (even horizontally!).

Next we have 'scrolling="no"'. This is necessary because we don't want to break the illusion of this being just the post, revealing stuff like the page header and whatnot within the frame. With scrolling set to no, this will ensure that it will always stay in the right spot, even if one of your visitors accidentally scrolls within the frame. It should be noted that this attribute appears to be deprecated and may not be supported in the future, so like, if you're reading this at that point, sorry? Maybe there'll be a better option by then.

Next up is 'loading="lazy"'. This will prevent the rest of the page from loading, which is useful if the blog post has a lot of replies on it. We don't want to be loading more than we need to.

Up next is 'sandbox="allow-same-origin"' which is 100% NECESSARY!!! Because <iframe>s just load the other site like normal, that site could execute code that could become a major security risk. By specifying 'sandbox="allow-same-origin"' here, we're saying that we want to disable running code from their site, as well as any other things that could be a security risk (but we explicitly allow loading more pages as long as it's from the same site, like css style sheets). It is possible this could break some things on the blogger's end, so for this reason, it is polite to make your blog posts not require these features, and to just be simple html and css.

Lastly is "width=WIDTH height=HEIGHT". This part will specify the dimensions of the frame within your site by replacing the "WIDTH" and "HEIGHT" parts with numbers wrapped in quotation marks. You will want to set these to ensure that you encompass the entire post, as well as not showing more than just the post. You will likely need some fiddling around with these numbers. If you want the exact size necessary, you could inspect element on the blog page, and if you select the element with the id it should show you the dimensions. Fiddling is valid though if you don't care.

That's a lot of information, but all you really need is to copy paste the html snippet I provided, and replace the ALLCAPS words with the right things and it'll just work. Easy.

As an example, lets say I wanted to capture that bulleted list near the top of the page that I gave the id "post" to into an <iframe>. I would use the following html:

<iframe src="quorrafromtron.org/net-help/blog-social-media.shtml#post" scrolling="no" loading="lazy" sandbox="allow-same-origin" width="360" height="150"></iframe>

Which would yield:

So once you have the <iframe> in place, you can then write what you want to say (making sure to also include the link to itself) and then leave the rest of the <details> for further replies.

At this point it may be good etiquette to notify the blog poster that you have reply to their post. If the blog poster has your site listed in their public list of RSS feeds they're following (to be covered in the next section) nothing need be done because they will already be notified. If they don't, you should send a "notification email" (to be covered in the section after next).

Finally, you should remember to update your RSS feed. Even though this is a repost, it should still be included. And that should be about everything you need to hold a conversation. Whenever you get a notification of some sort about someone making a reply, you can show that on your site and comment further. Of course, on the blogger's end of things, you would put these replies in the replies section of the blog post, instead of a dedicated part of your site. But it's all about IDing the things you say, and linking and iframing the things other people say.

RSS Feeds List

This is a new concept I thought up for this whole "blog post based social media" thing. The idea is that you have a spot on your site dedicated to listing which domains you are following the RSS feeds of. This is purely so that you can avoid too much email spam. You don't need to list all the feeds you're actually following, but if they have a blog that uses this system it would likely be beneficial. Most social media sites show people who you're following anyway, and if you're really particular about your privacy then you can take the tradeoff of getting a lot of emails that all say the same kind of thing.

Notification Email

This is also a new concept I thought up for this system. If the person you wish to notify is not following your RSS feed, then what you can do is send an email using a particular format. They should have a contact listed on their page (Speaking of which, if you're using this system then you should be comfortable sharing your email address on your site. It may be one with the site's domain name, or your personal email. Whatever it is, it's required.) which you can use to send an email.

This email shouldn't just be any other casual email, however. It should be formatted in a particular way that allows the recipient to automatically sort it out of their other emails, and should contain only enough information as is absolutely needed. The subject should be either "[notif:repost]", "[notif:at]", or "[notif:reply]", each used in their respective appropriate context (when reposting, when @ing, and when replying). This allows the recipient to auto sort emails with these subject titles into separate folders, aiding in organization.

The body should then not include any pleasantries (remember, this email is purely for notification purposes, not for communicating ideas). If this is a reply, then the body's first line should be "From: URL1" where URL1 is copied from the link the original blogger provided on their post, and the second line should be "To: URL2" where URL2 should be the URL of the respost if it is a repost, and the URL with the appropriate id specifier if it is a reply. It should be noted that if this is simply an @ ping, then the first line must be excluded.

Conclusion

And that about covers the idea. It may be a bit obtuse at first, but I'm sure once you get the hang of it it'll be no more complicated than posting a blog post.

That being said, I do plan on my next project for this site (after finally starting my blog using this method) to be to create an app that will allow you to post a new blog post or reply in a simple and streamlined way that will make the experience feel like a social media platform again, and will be a lot more approachable for people who thought this guide was too dense.