- IndieWebify.Me
- A guide to getting you on the IndieWeb
-
-
-
+
+
+
+ IndieWebify.Me
+ A guide to getting you on the IndieWeb
+
+
+
-
-
What is the IndieWeb?
+
+
What is the IndieWeb?
-
- We should all own the content we're creating, rather than just posting to third-party content silos.Publish on your own domain, and syndicate out to silos. This is the basis of the "Indie Web" movement. – IndieWeb.org
-
-
+
+ We should all own the content we're creating, rather than just posting to third-party content silos.Publish on your own domain, and syndicate out to silos. This is the basis of the "Indie Web" movement. – IndieWeb.org
+
+
-
+
-
+
-
+
-
+
-
-
-
Federating IndieWeb Conversations Level 3
-
-
1. Add Reply Contexts to your site
-
-
Posting replies to other people’s posts is the next step after just being able to mention them with webmention.
-
-
Usually a reply is a note just like any other, but linking in a special way to the post it’s in reply to. When marked up with h-entry and rel=in-reply-to and/or class=u-in-reply-to, your reply can show up as a comment on the original post.
-
-
To test if your webmention sending is working, try replying to a post by someone who’s implemented comment receiving. There’s a list on the wiki.
-
-
If you wish you can also go the extra mile and display a copy of the post you’re replying to. This is called a reply context, and is an excellent way to practise parsing posts on other people’s sites.
-
-
2. Receive webmentions on your site
-
Now you can post replies which show up as comments on other people’s sites, the next step is to be able to receive comments yourself. There are several ways to do this.
-
-
-
If you’re using a project like Known, it may already support indieweb comments — you don’t have to do anything!
-
If you’re using a project like WordPress, there may already be a plugin enabling receiving of indieweb comments. See if the software you’re using is on the project list on the wiki
-
If you’re rolling your own project and want to implement webmention yourself, have a read through the spec and the wiki page for tips
-
If you want to get started quickly without implementing receiving of webmentions yourself, take a look at a hosted service like webmention.io
-
-
-
Once you’ve got webmention receiving set up, there are a few different ways of making sure it’s working correctly:
-
-
-
Link to one of your own posts and send yourself a mention. This works best if you know you can send webmentions successfully
-
Ask a friend (or a new friend in the online #indieweb chat to reply or mention one of your posts
-
If you’re POSSEing your content, setting up backfeed so that silo replies, likes, reshares, and event RSVPs show up on your own site. You can use a service like Bridgy, a server plugin, or roll your own
-
-
-
+
+
+
Federating IndieWeb Conversations Level 3
+
+
1. Add Reply Contexts to your site
+
+
Posting replies to other people’s posts is the next step after just being able to mention them with webmention.
+
+
Usually a reply is a note just like any other, but linking in a special way to the post it’s in reply to. When marked up with h-entry and rel=in-reply-to and/or class=u-in-reply-to, your reply can show up as a comment on the original post.
+
+
To test if your webmention sending is working, try replying to a post by someone who’s implemented comment receiving. There’s a list on the wiki.
+
+
If you wish you can also go the extra mile and display a copy of the post you’re replying to. This is called a reply context, and is an excellent way to practise parsing posts on other people’s sites.
+
+
2. Receive webmentions on your site
+
Now you can post replies which show up as comments on other people’s sites, the next step is to be able to receive comments yourself. There are several ways to do this.
+
+
+
If you’re using a project like Known, it may already support indieweb comments — you don’t have to do anything!
+
If you’re using a project like WordPress, there may already be a plugin enabling receiving of indieweb comments. See if the software you’re using is on the project list on the wiki
+
If you’re rolling your own project and want to implement webmention yourself, have a read through the spec and the wiki page for tips
+
If you want to get started quickly without implementing receiving of webmentions yourself, take a look at a hosted service like webmention.io
+
+
+
Once you’ve got webmention receiving set up, there are a few different ways of making sure it’s working correctly:
+
+
+
Link to one of your own posts and send yourself a mention. This works best if you know you can send webmentions successfully
+
Ask a friend (or a new friend in the online #indieweb chat to reply or mention one of your posts
+
If you’re POSSEing your content, setting up backfeed so that silo replies, likes, reshares, and event RSVPs show up on your own site. You can use a service like Bridgy, a server plugin, or roll your own
2. Add the ability to send Webmentions to other IndieWeb sites
-
-
When you reply to something on another indieweb site, or mention someone with an indieweb site, sending a webmention lets them know they’ve been linked to.
-
-
Sending webmentions allows you to write replies to other content and participate in cross-site conversations. You can send webmentions by:
-
-
-
using the form below
-
using Telegraph, which lets you choose which links to send to
When sending webmentions and pingbacks for , we got this problem:
-
-
-
Successfully sent webmentions/pingbacks from
-
-
-
-
-
No h-entries were found on !
-
-
When you send webmentions from a page, the pages you’ve mentioned will usually fetch it and parse it for h-entry markup, to display as comments or notifications. You should mark up your posts with h-entry so the people you mention can do something useful with the information.
2. Add the ability to send Webmentions to other IndieWeb sites
+
+
When you reply to something on another indieweb site, or mention someone with an indieweb site, sending a webmention lets them know they’ve been linked to.
+
+
Sending webmentions allows you to write replies to other content and participate in cross-site conversations. You can send webmentions by:
+
+
+
using the form below
+
using Telegraph, which lets you choose which links to send to
When sending webmentions and pingbacks for , we got this problem:
+
+
+
Successfully sent webmentions/pingbacks from
+
+
+
+
+
No h-entries were found on !
+
+
When you send webmentions from a page, the pages you’ve mentioned will usually fetch it and parse it for h-entry markup, to display as comments or notifications. You should mark up your posts with h-entry so the people you mention can do something useful with the information.
It looks like your site is hosted on the WordPress.com Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — here are some resources which might help you out:
Once you’ve got your own domain, check out the IndieWeb WordPress wiki page for tips and plugins for adding things like webmentions and microformats to your site.
-
+
+
+
It looks like your site is hosted on the WordPress.com Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — here are some resources which might help you out:
Once you’ve got your own domain, check out the IndieWeb WordPress wiki page for tips and plugins for adding things like webmentions and microformats to your site.
+
-
-
-
It looks like your site is hosted on Tumblr.com Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — Tumblr has an article demonstrating how to give your web presence your own domain.
-
Once you’ve got your own domain, check out the IndieWeb Tumblr wiki page for tips on adding indieweb functionality to your site, or exporting your data elsewhere.
-
+
+
+
It looks like your site is hosted on Tumblr.com Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — Tumblr has an article demonstrating how to give your web presence your own domain.
+
Once you’ve got your own domain, check out the IndieWeb Tumblr wiki page for tips on adding indieweb functionality to your site, or exporting your data elsewhere.
+
-
-
-
It looks like your site is hosted on Github.io Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — Github has an article demonstrating how to give your web presence your own domain.
-
Once you’ve got your own domain, check out the IndieWeb Github wiki page for tips on adding indieweb functionality to your site.
-
+
+
+
It looks like your site is hosted on Github.io Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — Github has an article demonstrating how to give your web presence your own domain.
+
Once you’ve got your own domain, check out the IndieWeb Github wiki page for tips on adding indieweb functionality to your site.
+
-
-
It looks like you’re using WordPress to power your site — check out the IndieWeb WordPress wiki page for tips on how to indiewebify your WordPress site!
+
+
It looks like you’re using WordPress to power your site — check out the IndieWeb WordPress wiki page for tips on how to indiewebify your WordPress site!
-
-
It looks like you’re using MediaWiki to power your site — check out the IndieWeb MediaWiki wiki page for tips on how to indiewebify your MediaWiki site!
+
+
It looks like you’re using MediaWiki to power your site — check out the IndieWeb MediaWiki wiki page for tips on how to indiewebify your MediaWiki site!
-
-
It looks like you’re using idno to power your site — check out the IndieWeb idno wiki page for tips on how to indiewebify your idno site!
+
+
It looks like you’re using idno to power your site — check out the IndieWeb idno wiki page for tips on how to indiewebify your idno site!
Humans can already understand the things you post on your site. By adding a few short class names to your HTML, other people’s software can understand it and use it for things like reply contexts, cross-site comments, event RSVPs, and more.
This representative h-card was found on your site:
-
- 0):
- $hCard = $allHCards[0];
- $intro_phrase = 'An h-card was found on your site! Consider ';
- if (count($allHCards) > 1) {
- $intro_phrase = 'Multiple h-cards were found on your site! Consider only having one and ';
- }
- ?>
-
-
Humans can already understand the things you post on your site. By adding a few short class names to your HTML, other people’s software can understand it and use it for things like reply contexts, cross-site comments, event RSVPs, and more.
This representative h-card was found on your site:
+
+ 0) :
+ $hCard = $allHCards[0];
+ $intro_phrase = 'An h-card was found on your site! Consider ';
+ if (count($allHCards) > 1) {
+ $intro_phrase = 'Multiple h-cards were found on your site! Consider only having one and ';
+ }
+ ?>
+
+
Check your posts (notes, articles, etc.) are marked up with h-entry:
-
-
-
-
-
-
-
Something Went Wrong!
-
When fetching , we encountered this problem:
-
-
-
Success!
-
-
We found the following h-entry on your site:
-
-
-
-
-
Name
-
-
-
Name
-
-
The parsed name name is longer than the content, which is usually a sign is it malformed due to being implicitly rather than explicitly parsed.
-
-
You should always manually specify what the name of a post is. If it doesn’t have one, make the name the same as the content, e.g. <div class="e-content p-name">…
-
-
-
-
Author
-
-
-
-
-
-
-
-
Add a photo!
-
<img class="u-photo" src="…" />
-
-
-
-
-
-
-
-
You’re marking up your post’s author as a string — add h-card to make it a full h-card!
The nested in-reply-to microformat should be an h-cite as it refers to off-site content.
-
-
-
-
-
-
Give the nested microformat a URL property! <a class="u-url" href="…"></a>
-
-
- The value for an in-reply-to property should be a URL or an embedded h-cite.
-
-
-
-
-
-
-
Like Of
-
-
-
-
-
The nested h-cite microformat should be an h-cite as it refers to off-site content.
-
-
-
-
-
-
Give the nested microformat a URL property! <a class="u-url" href="…"></a>
-
-
- The value for a like-of property should be a URL or an embedded h-cite.
-
-
-
-
Repost Of
-
-
-
-
-
The nested h-cite microformat should be an h-cite as it refers to off-site content.
-
-
-
-
-
-
Give the nested microformat a URL property! <a class="u-url" href="…"></a>
-
-
- The value for a repost-of property should be a URL or an embedded h-cite.
-
-
-
-
-
Content
-
-
-
-
It looks like your content is marked up as a plain property — consider using class="e-content" so that consumers can parse rich text (i.e. with images and formatting)
Add some categories! <a class="p-category" href="…">…</a>
-
-
-
-
No h-entry found
-
-
Adding h-entry markup to posts on your site allows computers to understand them as easily as humans can, without publishing separate copies. All you need to do is add microformats2 h-entry classnames, for example:
-
-
<article class="h-entry">
+
+
+
Check your posts (notes, articles, etc.) are marked up with h-entry:
+
+
+
+
+
+
+
Something Went Wrong!
+
When fetching , we encountered this problem:
+
+
+
Success!
+
+
We found the following h-entry on your site:
+
+
+
+
+
Name
+
+
+
Name
+
+
The parsed name name is longer than the content, which is usually a sign is it malformed due to being implicitly rather than explicitly parsed.
+
+
You should always manually specify what the name of a post is. If it doesn’t have one, make the name the same as the content, e.g. <div class="e-content p-name">…
+
+
+
+
Author
+
+
+
+
+
+
+
+
Add a photo!
+
<img class="u-photo" src="…" />
+
+
+
+
+
+
+
+
You’re marking up your post’s author as a string — add h-card to make it a full h-card!
The nested in-reply-to microformat should be an h-cite as it refers to off-site content.
+
+
+
+
+
+
Give the nested microformat a URL property! <a class="u-url" href="…"></a>
+
+
+ The value for an in-reply-to property should be a URL or an embedded h-cite.
+
+
+
+
+
+
+
Like Of
+
+
+
+
+
The nested h-cite microformat should be an h-cite as it refers to off-site content.
+
+
+
+
+
+
Give the nested microformat a URL property! <a class="u-url" href="…"></a>
+
+
+ The value for a like-of property should be a URL or an embedded h-cite.
+
+
+
+
Repost Of
+
+
+
+
+
The nested h-cite microformat should be an h-cite as it refers to off-site content.
+
+
+
+
+
+
Give the nested microformat a URL property! <a class="u-url" href="…"></a>
+
+
+ The value for a repost-of property should be a URL or an embedded h-cite.
+
+
+
+
+
Content
+
+
+
+
It looks like your content is marked up as a plain property — consider using class="e-content" so that consumers can parse rich text (i.e. with images and formatting)
Add some categories! <a class="p-category" href="…">…</a>
+
+
+
+
No h-entry found
+
+
Adding h-entry markup to posts on your site allows computers to understand them as easily as humans can, without publishing separate copies. All you need to do is add microformats2 h-entry classnames, for example:
+
+
<article class="h-entry">
<div class="e-content p-name">Hello world! This is my first indieweb post.</div>
<a class="u-url" href="https://example.com/my-first-post">
- Published <time class="dt-published"></time>
+ Published <time class="dt-published"></time>
</a>
</article>
-
+
- $url)) ?>
-
+ $url)) ?>
+
-
Your h-entries should have, at minimum, the following properties:
+
Your h-entries should have, at minimum, the following properties:
-
-
e-content — the main content of the post
-
p-name — if your post is an article with a name, use this classname.
-
dt-published — the datetime the post was published at, in ISO8601 format, with a timezone
-
u-url — the canonical URL of the post, especially important on pages listing multiple posts
-
+
+
e-content — the main content of the post
+
p-name — if your post is an article with a name, use this classname.
+
dt-published — the datetime the post was published at, in ISO8601 format, with a timezone
+
u-url — the canonical URL of the post, especially important on pages listing multiple posts
+
-
It’s a common convention for the published datetime to be a link to the post itself, but they can be separate if you want.
+
It’s a common convention for the published datetime to be a link to the post itself, but they can be separate if you want.
-
There should also be some way to discover the author of the post — either link to your homepage (which should have your h-card on it) from anywhere within the body of the page with rel=author, or optionally embed a p-author h-card in the h-entry.
+
There should also be some way to discover the author of the post — either link to your homepage (which should have your h-card on it) from anywhere within the body of the page with rel=author, or optionally embed a p-author h-card in the h-entry.
-
The web is an expressive medium, and as such there are many other properties which you can add to your posts. Check out the h-entry documentation for a full list.
-
+
The web is an expressive medium, and as such there are many other properties which you can add to your posts. Check out the h-entry documentation for a full list.
+
- Want to be able to use h-entry data in your code? Check out the open-source implementations.
+ Want to be able to use h-entry data in your code? Check out the open-source implementations.
-
-
-
A personal domain name is an inexpensive, internationally universal identifier which gives you more control over your space than other IDs (e.g. email address or phone number.)
In order to be able to sign in using your domain name, connect it to your existing identities.
-
-
You probably already have many disconnected profiles on the web. Linking between them and your domain name with the rel=me microformat ensures that it’s easy to see that you on Google/Twitter/Github/Flickr/Facebook/email are all the same person as your domain name.
-
-
-
-
- Want to be able to use rel-me data in your code? Check out the open source implementations.
+
1. Get your own domain name
+
+
A personal domain name is an inexpensive, internationally universal identifier which gives you more control over your space than other IDs (e.g. email address or phone number.)
In order to be able to sign in using your domain name, connect it to your existing identities.
+
+
You probably already have many disconnected profiles on the web. Linking between them and your domain name with the rel=me microformat ensures that it’s easy to see that you on Google/Twitter/Github/Flickr/Facebook/email are all the same person as your domain name.