davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>POSSE - IndieWebCamp (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://indiewebcamp.com/POSSE">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  POSSE - IndieWebCamp (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://indiewebcamp.com/POSSE">Source originale du contenu</a></h3>
    <p><span class="p-summary"><b><dfn>POSSE</dfn></b> is an abbreviation for <b>Publish (on your) Own Site, Syndicate Elsewhere</b>, a content publishing model that starts with posting content on your own domain first, then syndicating out copies to 3rd party services with <a href="/permashortlinks" title="permashortlinks" class="mw-redirect">permashortlinks</a> back to the original on your site.</span>
</p>

<h2> <span class="mw-headline" id="Why"> Why </span></h2>

<p>POSSE lets your friends keep using whatever they use to read your stuff (e.g. <a href="/silo" title="silo">silo</a> aggregators like <a href="/Facebook" title="Facebook">Facebook</a>, <a href="/Tumblr" title="Tumblr">Tumblr</a>, <a href="/Twitter" title="Twitter">Twitter</a>, etc.).
</p>

<p>It's a key part of why and how the IndieWeb movement is <a href="/different" title="different">different</a> from just "everyone blog on their own site", and also different from "everyone just install and run StatusNet/Diaspora" etc. <a href="/monoculture" title="monoculture">monoculture</a> solutions.
</p>

<p>POSSE is about staying in touch with current friends now, rather than the potential of staying in touch with friends in the future.
</p>

<p>As such, POSSE is more important than <a href="/federation" title="federation">federation</a>. In addition, if federated approaches take a POSSE approach first, they will likely get better adoption (everyone wants to stay in touch with their friends), and thereby more rapidly approach that federated future.
</p>

<h3> <span class="mw-headline" id="Advantages"> Advantages </span></h3>

<p>POSSE is considered a robust and preferable syndication model for the following reasons:
</p>

<ul><li> <b>Ownership.</b> By posting <i>first</i> on your own site, you create a direct ownership chain that can be traced back to you without any intervening 3rd party services (silos) TOS's getting in the way (which is a vulnerability of <a href="/PESOS" title="PESOS">PESOS</a>).
</li><li> <b>Reduce 3rd party dependence.</b> By posting directly to your own site, you're not dependent on 3rd Party services to do so -- if you can access your site, you can publish your content
</li><li> <b>Own canonical URLs to your content.</b> Canonical URLs to your content are on your domain.
</li><li> <b>Copies can cite the original.</b> By posting content first to your own site (and thus creating a permalink for it), copies that you post on 3rd Party services can link or cite the original on your site (see <a href="/syndication_formats" title="syndication formats">syndication_formats</a> and <a href="/Twitter#POSSE_Notes_to_Twitter" title="Twitter">POSSE Notes to Twitter</a>)
</li><li> <b>Discovery of your original content.</b> <a href="/discovery" title="discovery">discovery</a> of your original content from the copies on 3rd party services is enabled by the permashortlinks to your originals posted on said services
</li><li> <b>Better search.</b> Searching public content on your own domain (with any web search engine of your choice) works better than depending on Twitter exclusively to search your tweets.<a href="http://tantek.com/2011/009/t3/value-searching-finding-past-tweets-self-hosting" class="external autonumber">[1]</a>. And when the copies link to your original posts, search engines figure that out by following those links back to the original and ranking it higher.
</li><li> <a href="/backfeed" title="backfeed">backfeed</a> can be used to pull in (reverse syndicate) responses from other services
</li><li> allows taking advantage of other services' social layers and aggregation features while storing the canonical copy of your content on your own site
</li><li> ...
</li></ul>

<h2> <span class="mw-headline" id="How_To_Implement"> How To Implement </span></h2>

<h3> <span class="mw-headline" id="In_General"> In General </span></h3>

<p>In general, when your content posting software posts something, it should also post a copy to the <a href="/silo" title="silo">silo</a> destinations of your choice, with a <a href="/permashortlink" title="permashortlink">permashortlink</a> (or <a href="/permashortcitation" title="permashortcitation">permashortcitation</a>) back to your original.
</p>

<p>The details of how to do so vary per destination. See the silo-specific sections below.
</p>

<p>Once you have posted the copy to the silo, you should:
</p>

<ul><li> link to the copy from the original in a <b><a href="/posts-elsewhere" title="posts-elsewhere">posts-elsewhere</a></b> section on your post.
</li></ul>

<h3> <span class="mw-headline" id="Twitter"> Twitter </span></h3>

<p><a href="/Twitter" title="Twitter">Twitter</a> is perhaps the most popular POSSE destination and a good place to start.
</p>

<p>If you can start posting notes (tweets) to your own site and POSSEing to Twitter, <em>instead of</em> posting directly to Twitter, you have taken a big step towards owning your data.
</p>

<p>Details:
</p>

<ul><li> API Access - <a href="https://dev.twitter.com/docs/api/1.1/post/statuses/update" class="external text">posting new tweets</a> works nicely due to permanent API tokens, and the return value contains a URL to the posted
</li><li> Supports very complete web action endpoints, so semi-manual posting is easy to implement
</li></ul>

<p>See <a href="/Twitter#POSSE_to_Twitter" title="Twitter">POSSE to Twitter</a> for details on how to POSSE both notes and articles (blog posts) to Twitter.
</p>

<h3> <span class="mw-headline" id="Facebook"> Facebook </span></h3>

<ul><li> API Access - New posts can be created through the API using the <a href="https://developers.facebook.com/docs/reference/api/publishing/" class="external text">Publishing API</a>
</li><li> A web action endpoint (<code><a href="https://www.facebook.com/dialog/feed" class="external free">https://www.facebook.com/dialog/feed</a></code>) is supplied by the Feed social plugin for semi-manual posting. Requires a facebook app id, but no authentication. It accepts a callback URL, to which it redirects with ?post_id GET param set, from which a URL can be constructed.
</li></ul>

<h3> <span class="mw-headline" id="Google_Plus"> Google Plus </span></h3>

<ul><li> No write API (yet)
</li><li> There are several endpoints which can be used as web action dialogs, but none of them support callbacks, so it’s trick to get the URL of the posted copy.

</li></ul>

<h3> <span class="mw-headline" id="Medium"> Medium </span></h3>

<ul><li> how does iamshane.com do it? (all his articles are POSSEd to Medium)
</li></ul>

<h3> <span class="mw-headline" id="WordPress"> WordPress </span></h3>

<ul><li> how does iamshane.com do it? (all his articles are POSSEd to WordPress)
</li></ul>

<h3> <span class="mw-headline" id="Plain_Text_Notes"> Plain Text Notes </span></h3>

<p>Some destinations (e.g. <a href="/wiki/index.php?title=SMS&amp;action=edit&amp;redlink=1" class="new" title="SMS (page does not exist)">SMS</a> or <a href="/push_notification" title="push notification">push notifications</a>) may require a pure plain text representation.
</p>

<h3> <span class="mw-headline" id="Software"> Software </span></h3>

<p>Software and libraries to implement POSSE:
</p>

<ul><li> PHP
<ul><li> The POSSE namespace in <a href="https://github.com/barnabywalters/php-helpers" class="external text">php-helpers</a> (might be moved to a separate package) contains various truncation, preparation and syndication functions including HTML =&gt; plaintext µblog syntax converter
</li></ul>
</li><li> …
</li></ul>

<h3> <span class="mw-headline" id="Services"> Services </span></h3>

<p><br/>
</p>

<h3> <span class="mw-headline" id="Publishing_Flows"> Publishing Flows </span></h3>

<p>There's at least two ways to implement a POSSE content posting flow:
</p>

<h4> <span class="mw-headline" id="Client_to_site_to_silo"> Client to site to silo </span></h4>

<ul><li> The user writes a piece of content using a publishing client
<ul><li> Optional: client provides UI for selecting which 3rd party services to push to if it knows about them, with optional customizations for per service
</li></ul>
</li><li> Having finished the content, the user publishes content to their server (optionally: with metadata of which 3rd party services and any customizations thereof)
<ul><li> Optional: client can generate a permalink knowing the state of the server, and publish to that permalink
</li></ul>
</li><li> The server publishes the content, generates a permalink and summary (and/or customized content suited to 3rd party services) if necessary
</li><li> The server posts copies with permalinks to 3rd party services
</li></ul>

<p>Advantages:
</p>

<ul><li> User only has to interact with one site over the internet, their own
</li><li> Syndication can be done fully automatically by the server
</li></ul>

<p>Disadvantages:
</p>

<h4> <span class="mw-headline" id="Client_to_site_and_silo"> Client to site and silo </span></h4>

<ul><li> The user writes a piece of content using a publishing client
</li><li> Having finished the content, the user publishes it to their server
</li><li> The client queries the server for the URL of the content it just pushed
</li><li> The publishing client presents the user with an interface for selecting:
<ul><li> Which 3rd party services to publish to
</li><li> The exact content published to the services, pre-filled with a summary based on the produced content
</li></ul>
</li><li> The user selects the services and submits the form
</li><li> The publishing client posts the content summaries out to the 3rd party services
</li></ul>

<p>Advantages:
</p>

<ul><li> More user control over timing and editing of copies of content to 3rd party services
</li></ul>

<p>Disadvantages:
</p>

<ul><li> Syndication requires a manual step each time
</li><li> Dependent on client connectivity directly to 3rd party services (problematic in flakey mobile situations, or when client is publishing using domain-censored internet access).
</li></ul>

<h2> <span class="mw-headline" id="IndieWeb_Examples"> IndieWeb Examples </span></h2>

<p>The following IndieWebCamp participants' <span id="IndieWeb_examples">sites</span> support a POSSE architecture. If you have an implementation, add it, make screenshots or a screencast or blog about it and post the details/link here. In date order (earliest first) :
</p>

<h3> <span class="mw-headline" id="Tantek"> Tantek </span></h3>

<p><b><a href="http://tantek.com" class="external text">Tantek.com</a></b> as of 2010-01-01<a href="http://tantek.com/2010/001/t1/declaring-independence-building-it" class="external autonumber">[2]</a> (2010-01-26 Twitter syndication started<a href="http://twitter.com/t/status/8228455558" class="external autonumber">[3]</a> and caught up<a href="http://tantek.com/2010/026/t2/tweeting-from-tantek-com" class="external autonumber">[4]</a><a href="http://twitter.com/t/status/8228820728" class="external autonumber">[5]</a>). <a href="/User:Tantek.com" title="User:Tantek.com">Tantek Çelik</a> implemented POSSE in <a href="http://tantek.com/w/Falcon" class="external text">Falcon</a> on <a href="http://tantek.com" class="external text">tantek.com</a>.
</p>

<ul><li> all self-hosted posts are openly with <a href="/PuSH" title="PuSH" class="mw-redirect">PuSH</a> v0.4 + <a href="/h-feed" title="h-feed">h-feed</a> and Atom real-time syndicated with a PubsubHubbub hub to <a href="/StatusNet" title="StatusNet" class="mw-redirect">StatusNet</a>, other subscribers etc. (also to <a href="/Google_Buzz" title="Google Buzz">Google Buzz</a> til it shutdown)
</li><li> <a href="/note" title="note">note</a> (and <a href="/article" title="article">article</a> titles), <a href="/reply" title="reply">reply</a>, <a href="/RSVP" title="RSVP" class="mw-redirect">RSVP</a> posts are <a href="/snowflake" title="snowflake">snowflake</a> copied by the personal site server to Twitter with permashortlink citation links/references (see <a href="http://tantek.com/w/Whistle" class="external text">Whistle</a> for details) back to the original. Copies of notes to Twitter are also automatically recopied from there to Facebook.
<ul><li> <a href="/RSVP" title="RSVP" class="mw-redirect">RSVPs</a> to Facebook events are "copied" (more like propagated) to Facebook using <a href="/Bridgy" title="Bridgy">Bridgy</a> publish
</li></ul>
</li><li> <a href="/like" title="like">likes</a> of tweets are "copied" (more like propagated) to Twitter using <a href="/Bridgy" title="Bridgy">Bridgy</a> publish
</li></ul>

<h3> <span class="mw-headline" id="Barnaby_Walters"> Barnaby Walters </span></h3>

<p><b><a href="http://Waterpigs.co.uk" class="external text">Waterpigs.co.uk</a></b> as of 2012-03-12. <a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Barnaby Walters</a> implemented POSSE over at <a href="http://waterpigs.co.uk" class="external text">waterpigs.co.uk</a>
</p>

<ul><li> as of 2012-09-25 all collections (notes, articles, activity) are <a href="/PuSH" title="PuSH" class="mw-redirect">PuSH</a>-subscribable <a href="/feeds" title="feeds" class="mw-redirect">feeds</a>.
</li><li> Using the Client to Server to 3rd Parties flow --<a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Waterpigs.co.uk</a> 06:08, 25 September 2012 (PDT)
</li><li> Syndicating to Twitter + Facebook
</li><li> As of 2014-06-19 <a href="/Taproot" title="Taproot">Taproot</a> can now optionally post additional POSSE tweets when updating a note or article — example of <a href="http://waterpigs.co.uk/notes/4WfKUc/" class="external text">updated note</a> and <a href="https://twitter.com/BarnabyWalters/status/479721886503288832" class="external text">POSSE tweet for the update</a>. Note that <a href="/Bridgy" title="Bridgy">Bridgy</a> successfully backfeeds silo interactions from the update tweet as well as the original POSSE tweet
</li></ul>

<h3> <span class="mw-headline" id="Brennan_Novak"> Brennan Novak </span></h3>

<p><b><a href="https://brennannovak.com" class="external text">brennannovak.com</a></b> as of 2012-07-01<a href="https://brennannovak.com/notes/10" class="external autonumber">[6]</a><a href="https://twitter.com/brennannovak/status/212243963011280897" class="external autonumber">[7]</a>. <a href="/User:Brennannovak.com" title="User:Brennannovak.com">Brennan Novak</a> implemented POSSE on his site <a href="https://brennannovak.com" class="external text">brennannovak.com</a> with copies posted to Twitter and Facebook
</p>

<h3> <span class="mw-headline" id="Aaron_Parecki"> Aaron Parecki </span></h3>

<p><b><a href="http://aaronparecki.com" class="external text">aaronparecki.com</a></b> as of 2012-08-19<a href="http://aaronparecki.com/2012/232/note/1" class="external autonumber">[8]</a><a href="https://twitter.com/aaronpk/status/237344101928951808" class="external autonumber">[9]</a>. <a href="/User:Aaronparecki.com" title="User:Aaronparecki.com">Aaron Parecki</a> implemented POSSE on his site <a href="http://aaronparecki.com" class="external text">aaronparecki.com</a> with copies posted to Twitter containing permashortlinks back to originals on his own site.
</p>

<h3> <span class="mw-headline" id="Sandeep_Shetty"> Sandeep Shetty </span></h3>

<p><b><a href="/User:Sandeep.io" title="User:Sandeep.io">User:Sandeep.io</a></b> First post POSSE'd on 2012-11-05. I primarily syndicate to Twitter using a very lo-fi solution of adding silo (Facebook, Twiiter, Google+) provided share links to each post that I can manually click to prefill content, edit and post. I've avoided API integration because of the extensive experience I've had using Facebook API and dealing with it's random changes. "Integration" has high costs sometimes so I keep it as simple as possible.
</p>

<h3> <span class="mw-headline" id="Ben_Werdmuller"> Ben Werdmuller </span></h3>

<p><b><a href="http://werd.io" class="external text">werd.io</a></b> as of 2013-05-31 <a href="http://werd.io/view/51a7fb55bed7de2f06761712" class="external autonumber">[10]</a>. <a href="/User:Benwerd.com" title="User:Benwerd.com">Ben Werdmuller</a> implemented POSSE in his <a href="http://idno.co" class="external text">idno</a> platform via plugins. New content has an associated Activity Streams object type; POSSE plugins listen for post events associated with those object types and syndicate appropriately.
</p>

<ul><li> Notes and articles are syndicated to Twitter and Facebook
</li><li> Images are syndicated to Facebook, Flickr and Twitter
</li><li> Places are syndicated to Foursquare
</li><li> More plugins are very easily possible; the Foursquare plugin took about an hour to build
</li></ul>

<h3> <span class="mw-headline" id="Shane_Becker"> Shane Becker </span></h3>

<p>iamshane.com - need to copy example from <a href="/rel-syndication" title="rel-syndication">rel-syndication</a> page
</p>

<h3> <span class="mw-headline" id="Glenn_Jones"> Glenn Jones </span></h3>

<p><b><a href="http://glennjones.net" class="external text">glennjones.net</a></b> as of 2014-01-14 <a href="/User:Glennjones.net" title="User:Glennjones.net">Glenn Jones</a> The blog implemented POSSE using a new version of <a href="http://transmat.io" class="external text">transmat.io</a> system. New content added to transmat is associated with objects types. A POSSE twitter plugins listens for post events syndicating content. At moment only notes are syndicated.
</p>

<h3> <span class="mw-headline" id="Jeremy_Keith"> Jeremy Keith </span></h3>

<p><b><a href="http://adactio.com" class="external text">adactio.com</a></b> as of 2014-05-27 <a href="/User:Adactio.com" title="User:Adactio.com">Jeremy Keith</a> has implemented POSSE using his own custom CMS.
</p>

<h3> <span class="mw-headline" id="Shane_Hudson"> Shane Hudson </span></h3>

<p><b><a href="https://shanehudson.net" class="external text">shanehudson.net</a></b> as of 2014-09-19 <a href="/User:ShaneHudson.net" title="User:ShaneHudson.net">Shane Hudson</a> has implemented POSSE to Twitter for Craft CMS.
</p>

<ul><li> Previously working on Wordpress but he was not keen on the UX.
</li><li> Has reply contexts working but has to manually copy the ID.
</li><li> Not yet POSSEing photos but plans to.
</li><li> Currently he has to manually copy the tweet from the main text box to a 140 character limit tweet text box. He plans to make that automatic.
</li></ul>

<h3> <span class="mw-headline" id="..._add_more_here_..."> ... add more here ... </span></h3>

<p>... Add a link to your POSSE–enabled site and the date you started syndicating copies of your content out to 3rd party social sharing/publishing services.
</p>

<h3> <span class="mw-headline" id="Partial_POSSE_sites"> Partial POSSE sites </span></h3>

<p>Sites which only POSSE some of their content, and still post directly to the same silo they POSSE to.
</p>

<p>Other partial POSSE sites:
</p>

<ul><li> <b><a href="/User:Hupili.net" title="User:Hupili.net">User:Hupili.net</a></b> implements a partial POSSE with the following setups:
<ul><li> <a href="/SNSAPI" title="SNSAPI">SNSAPI</a> is a lightweight middleware to unify the data structure and interfaces of different social networking services. It gives the scripting flexibility for developer users to manipulate social silos.
</li><li> <a href="/SNSRouter" title="SNSRouter">SNSRouter</a> is a web UI built upon SNSAPI where one can read an aggregated timeline from different sites, mass forward messages, and update statuses on all channels.
</li><li> Part of my daily usage is to go to my running SNSRouter, read messages and update statuses on it. The new status is written to the RSS feeds, <a href="http://hupili.net/feeds/all.xml" class="external free">http://hupili.net/feeds/all.xml</a> , and other silos. ( This feed is indeed a mix of <strong class="selflink">POSSE</strong> <a href="/PESOS" title="PESOS">PESOS</a> )
</li><li> As is said in one of the description paragraph above, this model is not truly POSSE. One can not (hardly) distinguish original/ syndicated status. I'm planning to put a page with permlink on my site upon each status update and then use SNSAPI to syndicate to other silos.
</li></ul>
</li></ul>

<h2> <span class="mw-headline" id="Other_Approaches"> Other Approaches </span></h2>

<h3> <span class="mw-headline" id="PESOS"> PESOS </span></h3>

<p>A similar but opposite approach is <a href="/PESOS" title="PESOS">PESOS</a> where content is posted first to 3rd party services and then copied/syndicated into a personal site.
</p>

<p>If exact copies of content are posted on both a personal site and 3rd party services, there's no way to tell (short of comparing possibly non-existent sub-second accurate published dates) whether a site is using POSSE or PESOS. Sites can provably support POSSE by including perma(short)links in syndicated copies that link/reference back to published originals.
</p>

<h3> <span class="mw-headline" id="PESETAS"> PESETAS </span></h3>

<p><a href="/PESETAS" title="PESETAS">PESETAS</a> is like PESOS but copying/syndicating everything to a particular silo (without any involvement of a personal site).
</p>

<p>For example, most silos support cross-posting to <a href="/Twitter" title="Twitter">Twitter</a>, thus you could connect everything to your Twitter account and always (auto-)cross-post there to keep a copy.
</p>

<p>E.g. <a href="/Tumblr" title="Tumblr">Tumblr</a> has a UI for cross-posting to <a href="/Twitter" title="Twitter">Twitter</a>. See <a href="http://webapps.stackexchange.com/questions/15315/customize-the-message-tumblr-sends-to-twitter" class="external text">Webapps StackExchange post</a> for documentation and screenshots of UI.
</p>

<p>Tumblr is a better PESETAS destination however, since it is well established, allows for a wider variety of content, and allows more text, and links to URLs directly instead of linkwrapping them like Twitter does.
</p>

<p><br/>
</p>

<h2> <span class="mw-headline" id="Brainstorming"> Brainstorming </span></h2>

<h3> <span class="mw-headline" id="CRUD"> CRUD </span></h3>

<p>All of the above, and to date (2013-222), POSSE has solely described syndicating the <b>C</b>reation of content on your site (publishing) to other sites. This model has been quite successful and perhaps may be sufficient.
</p>

<p>However, it is worth exploring the potential utility of a full CRUD protocol for POSSE.
</p>

<h3> <span class="mw-headline" id="Create"> Create </span></h3>

<p>Create is the POSSE default. You create content on your site, you POSSE your creates to other sites. All of this is described above, and in silo-specific details on <a href="/silo" title="silo">silo</a> pages.
</p>

<h3> <span class="mw-headline" id="Read"> Read </span></h3>

<p>Read as a verb is interesting when applied to POSSE.
</p>

<p>At a minimum, it's useful to implement storing links to syndicated copies of your content to provide for the future possibility of reading from downstream POSSE copies.
</p>

<p>See:
</p>

<p>Actual direct uses of Reading from downstream POSSE copies:
</p>

<ul><li> reverse-syndication / <a href="/backfeed" title="backfeed">backfeed</a> of activity around the POSSE copy onto your original:

</li></ul>

<p>In addition, keeping a <a href="/rel-syndication" title="rel-syndication">rel-syndication</a> link to the POSSE copy enables deleting it to perform an Update or a Delete action, as described in the following sections.
</p>

<h3> <span class="mw-headline" id="Update"> Update </span></h3>

<p>If a downstream service allows updates/edits, then when you edit your post, you could propagate that update to the downstream POSSE copy as well. (Any existing POSSE destinations that allow this?)
</p>

<p>It would be possible to POSSE updates to <a href="/Twitter" title="Twitter">Twitter</a> (or any other silo that disallows edits to posts) by deleting the POSSE tweet and reposting.
</p>

<p>Consider only POSSEing updates to Twitter:
</p>

<ul><li> if no one has replied to it yet (otherwise you'd break a threaded conversation on Twitter)
</li><li> if your changes would be shown in the truncated copy on Twitter (i.e. if your changes are past the 140 (more like 120) character horizon, no point in churning the Twitter copy).
</li><li> within a very short time window, maybe like 2-5 minutes, because otherwise the update will be seen as a duplicate to people who are reading you on Twitter.
</li></ul>

<p>All of these concerns are regarding the experience that you provide to your friends reading your tweets on Twitter, which of course should be the whole (design) reason you're bothering to POSSE to Twitter in the first place.
</p>

<h3> <span class="mw-headline" id="Delete"> Delete </span></h3>

<p>Deletes seem fairly straightforward to POSSE, especially to services which themselves propagate deletes to clients.
</p>

<p>E.g. one can delete a note on Twitter at any point.
</p>

<p>Similar to updates, consider:
</p>

<ul><li> if there are already replies to a POSSE copy (or activity like favorites/retweets), consider keeping it to keep conversation threading (and others' favorites/retweets).
</li></ul>

<p>However, if you really feel like deleting the content from your site and POSSE copies (e.g. on Twitter), go ahead and do so.
</p>

<p>Perhaps this is an opportunity for the UI for the deletion of a post to check to see if there's been any activity (replies, favorites, retweets) on the POSSE copy before performing the delete. One possible implementation could involve the UI informing the user of this activity (or lack of it) and reconfirming the delete request on a per-service basis.
</p>

<h2> <span class="mw-headline" id="FAQ"> FAQ </span></h2>

<h3> <span class="mw-headline" id="Worry_about_search_engines_and_duplicates"> Worry about search engines and duplicates </span></h3>

<p>Q: Do we need to worry about search engines penalizing apparently duplicate posts?
</p>

<p>A: That's why the POSSE copies SHOULD always link back to the originals. So that search engines can infer that the copies are just copies. Ideally POSSE copies on silos should use <a href="/rel-canonical" title="rel-canonical">rel-canonical</a> to link back to the originals, but even without explicit rel-canonical, the explicit link back to the original is a strong hint that it is an original.
</p>

<p>This is also an advantage of POSSE over PESOS. With PESOS - there's no way to tell what's the original and what's the copy - so they do look like duplicates.
</p>

<h3> <span class="mw-headline" id="POSSE-post-discovery_and_backlinks"> POSSE-post-discovery and backlinks </span></h3>

<p>Q: Brid.gy can use <a href="/posse-post-discovery" title="posse-post-discovery">posse-post-discovery</a> to find the relationship between a syndicated post and the original when there is not explicit link. Does this mean I should stop adding backlinks to syndicated copies?
</p>

<p>A: POSSEing without a backlink is considered a last resort, and has some costs associated with it. See <a href="/posse-post-discovery#Tradeoffs" title="posse-post-discovery">posse-post-discovery#Tradeoffs</a> for more details.
</p>

<h3> <span class="mw-headline" id="POSSE_or_Send_Webmentions_First"> POSSE or Send Webmentions First </span></h3>

<p>In short, <b><strong class="selflink">POSSE</strong> first, then send <a href="/webmentions" title="webmentions" class="mw-redirect">webmentions</a></b>.
</p>

<p>See: <a href="/Webmention#POSSE_or_Send_Webmentions_First" title="Webmention">Webmention FAQ: POSSE or Send Webmentions First</a> for details and reasoning.
</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://indiewebcamp.com/POSSE">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>