Here are my notes on configuring WordPress on your own domain for IndieWeb. By posting these I hope that others can get started quickly and join the quickly growing indieweb community.
This post is long and may seem intimidating at first. Really it isn’t all that hard. The length is do to the explanations of the various bits and how to avoid any pitfalls. If you want to get your feet wet in the indeweb world, just keep this post bookmarked and implement a bit at a time. When you get that working, move on to the next step.
I’m assuming you have your own domain and have installed WordPress. Also you should know how to install a theme and plugins. There is lots of help around the web if you need help getting started with WordPress itself..
Lots of details on indewebifying your WordPress site can be found here: http://indiewebcamp.com/WordPress. These notes are what I did and are meant as a supplement to the work done there.
First steps: Create an h-card and enable Google Authorship
- An h-card is basically your contact details marked up with microformats. This should go on the home or root page of you site. I put this on my home page sidebar by creating the h-card markup in a widget. More on that later.
- Set up Web Sign-in using your domain. Details here. and some extra details below for WordPress. It’s easier than it looks:
- Your home or root page should contain rel-me links to all your social network profiles like Twitter, Facebook, Google+, etc. (LinkedIn doesn’t support rel-me but I did it anyway in case they get their act together).
- Note: For IndieAuth to work it is important that 2-way communication or handshaking exists between your social network and your own site. Using Twitter for example, on your WordPress home page, link to your Twitter profile like:
<a rel=”me” href=”https://twitter.com/yourtwittername”>@yourtwittername</a>
- On your Twitter profile you should link directly to your WordPress home page.
- Link directly to your home page from ALL your social profiles.
- Side Note about Google+: In Google+ you list links to your WordPress site and other social sites in the Other Profiles section. I found it works best if you have the link to your WordPress site first in the list. It just avoids complications later on.
- Behind the scenes, these social sites are already coding your link with rel-me. You can check if you view source on your profile page on Twitter, etc.
- Here’s a crappy illustration of the two-way linking:
- Try Logging In to the Indiewebcamp.com Wiki. Note: Where it says enter your domain, put in the whole URL to your home page like: http://mydomain.com/ (be sure to use the trainling slash)
- Be sure to validate your h-card markup by putting in the URL to your About page here: http://indiewebify.waterpigs.co.uk/validate-h-card/
- Assuming your h-card validates and you are able to log on to the indiewebcamp.com wiki you are done with this step!
Next step, install the SemPress theme. We’re talking about getting started here so this theme is a perfect place to start. This theme is based on HTML5 mixed with microformats, microformats v2 and microdata (Schema.org). Hang out and ask in the IRC channel and you’ll probably find some more.
Next, install the WebMention plugin.
Webmention is a simple way to automatically notify any URL when you link to it on your site. From the receivers perpective, it’s a way to request notification when other sites link to it. It’s a modern alternative to Pingback and other forms of Linkback.
Next, install the Semantic-Linkbacks plugin. This uses Microformats 2 to generate richer WordPress comments.
Be sure you have allowed pingbacks and comments. In WordPress, go to the Settings => Discussion page in your WordPress admin, and check the “Allow link notifications from other blogs (pingbacks and trackbacks)” and “Allow people to post comments on new articles” checkboxes.
Install the webmentions form. This puts a form in your comments section so if someone is running a site that does not have webmentions implemented they can use this form to notify you that they have linked to your site. Basically you are helping other folks out until they get on the IndieWeb bandwagon.
Next, install the Jetpack plugin from WordPress.com. You’ll also need to have an account on WordPress.com to connect the plugin to.
- If you want, this plugin will let you easily and automatically post your content to Facebook, Twitter, Tumblr, LinkedIn, Path and Google+
- For these options, activate and configure the Publicise option under the Jetpack settings
- NOTE: By default, when you set up your connections, Jetpack will autopost every time you publish a new post. If you would rather have it where you have to select your networks each time, you have to add one line of code to your functions.php file. The code and explanation are here. You may want to install and edit a functionality plugin so you aren’t editing your theme’s main function.php)
- You can also enable Share This buttons for all the major sites by activating and configuring the Sharing option in Jetpack settings
- Lots of other things you can do so look through the settings and activate the ones you think you might want. The ones I find useful are:
Next, setup brid.gy. Bridgy is a service that pulls comments, likes, and reshares of links to your site on public posts to social networks back to your web site. Go to brid.gy and click each icon you are interested in monitoring. For example, if you want brid.gy to monitor twitter for retweets etc. then you’ll need to click the Twitter icon and authorize Brid.gy to connect to your Twitter account. Do this for the others like Facebook and Google+ if you want Brid.gy to monitor those as well.
- Brid.gy can also post to Twitter and/or Facebook for you. When you connect to those services you’ll see the option to set up posting as well.
- Side note: If you need to adjust what groups (Friends, Friends of Friends, etc) can see your posts made with apps like brid.gy, go here: https://www.facebook.com/settings?tab=applications&view
Setting up POSSE : Publish (on your) Own Site, Syndicate Elsewhere
This is one of the main reasons you set all this up. To let you create your content on WordPress and push it out to the other silos and maintain control of the original.
As mentioned above, you can use Jetpack for this and you can also use Brid.gy for Twitter and Facebook. However, I wanted a bit more control and to be able to post to Twitter and Facebook via a tag. That is, I tag my posts with tw and/or fb and they automatically get shared to those silos. I achieve that with IFTTT. The beauty here is I can use any WordPress client whether it be the standard web interface or mobile like Android or iOS and easily cross post the the places I want via a tag.
This first one lets me auto-tweet anything tagged “tw”
I handle photo posts to Facebook a little differently. I don’t tag them “fb”. Instead I put them in the “Photo” category and let his IFTTT handle it:
IndieWeb Press-This: A nice feature of WordPress is the Press-This tool. This lets you quickly create a post with a link to a site. There is a handy plugin that was created to add the proper microformats2 to create reply or likes to a post. Have a look at this plugin: https://github.com/pfefferle/wordpress-indieweb-press-this
Setting up PESOS: Publish Elsewhere, Syndicate (to your) Own Site
While POSSE is preferable, sometime we put stuff elsewhere and want to bring it into WordPress. There are 2 cases where I often do this. One, I like how Google+ handles photos. And the other is articles I’ve saved and favorited in Pocket. Here are the recipes I use to achieve this: This one takes photos from my Google+ feed and posts them to WordPress in the Photo category with the “tw” tag. Then the recipes above post out to Twitter and Facebook for me. Best of both worlds.
Here is the one I use for Pocket favorites. This one tag it automatically tagged “tw”. Not everything I save needs to go to my Facebook friends but I don’t mind it going to Twitter.
Customization for sharing
Twitter Cards: If you want your sharing to Twitter to look a little cleaner and use the Card feature, you need to set that up through Twitter at this address: https://dev.twitter.com/docs/cards/validation/validator. You should set one up for Summary and one for Photos. You need to have a link to an example of each for proper validation.
Updated 09SEP2014: Added details about the WebMention and Semantic-Linkbacks plugins because these are better alternatives to the indieweb plugin at this time.