<commit_before>
<div class="container-narrow">

  <br /><br />

  <div class="hero-unit">
    <img src="/img/webmention-logo-380.png" width="200px" class="pull-left" style="background-color: #eee; margin-right: 30px;" />

    <h1>Webmention.io</h1>
    <p>
      Webmention.io is a hosted service created to easily handle webmentions (and legacy pingbacks) on any web page. Currently it is not open for signups, but you can <a href="https://github.com/aaronpk/webmention.io">download the source code</a> and run it on your own server.
    </p>
    <p>
      You might also be interested in reading about this project on the <a href="http://indiewebcamp.com/webmention.io">IndieWebCamp wiki</a>.
    </p>

      <!-- <a class="btn btn-primary btn-large" href="/auth/github">
        Log in with Github
      </a> -->
  </div>

  <div style="background-color: #fff; padding: 10px 20px;">
    <h2 id="use-it"><a href="#use-it" class="in-page-link icon-link"></a>Use it on your site</h2>

    <p>Once you have a username, add the following tags to your HTML:</p>

    <p><pre><code>    &lt;link rel="pingback" href="http://webmention.io/username/xmlrpc" /&gt;
    &lt;link rel="webmention" href="http://webmention.io/username/webmention" /&gt;
</code></pre></p>

    <p>The system will begin collecting webmentions and pingbacks on your behalf.</p>
  </div>



  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="forwarding"><a href="#forwarding" class="in-page-link icon-link"></a>Forward pingbacks to webmentions</h2>

    <p>If you want to accept pingbacks but don't want to deal with the hassle of XMLRPC, you can use this service to forward pingbacks as webmentions to your server. You don't need an account for this to work.</p>

    <p><pre><code>&lt;link rel="pingback" href="http://webmention.io/webmention?forward=http://example.com/endpoint" /&gt;</code></pre></p>

    <p>For further details and an example, please refer to the <a href="https://github.com/aaronpk/webmention.io#pingback-to-webmention-service">README</a>.</p>
  </div>



  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="display-mention-counter"><a href="#display-mention-counter" class="in-page-link icon-link"></a>Display a mention counter</h2>

    <p>You can use the API from Javascript to display a mention count of one or more URLs</p>

    <p><b>Getting the data manually</b></p>

    <p>To retrieve the data manually using jQuery, you can make a request like the following. Be sure to add a parameter for your access token if your account is set to disable public access to the data.</p>

    <p><pre><code>$(function(){
  $.getJSON("http://webmention.io/api/count?jsonp=?", {
    target: "http://example.com/page/100"
  }, function(data){
    console.log(data.count);
  });
});
</code></pre></p>

    <p><b>Displaying counts automatically</b></p>

    <p>You can include some simple markup and a Javascript file to automatically display the mention counter for one or more URLs on a page.</p>

    <p>First, choose an element that will be used to display the counter. Add the an attribute <code>data-webmention-count</code> to it, as well as <code>data-url=""</code> with the full URL of the page you would like to count. This might look something like the following:</p>

    <p><pre><code>&lt;span data-indieweb-comment-count data-url="http://example.com/page/100"&gt;&lt;/span&gt; mentions</code></pre></p>

    <p>Then, add the following script tag to your page after you've included jQuery:</p>

    <p><pre><code>&lt;script type="text/javascript" src="http://webmention.io/js/mentions.js"&gt;&lt;/script&gt;</code></pre></p>

    <p>

  </div>


  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="show-all-mentions"><a href="#show-all-mention" class="in-page-link icon-link"></a>Show all mentions</h2>

    <p>You can also use the API to show all mentions of a URL. This will work with jQuery or you can use the API directly from a server.</p>

    <p><pre><code>$(function(){
  $.getJSON("http://webmention.io/api/mentions?jsonp=?", {
    target: "http://example.com/page/100"
  }, function(data){
    console.log(data);
  });
});</code></pre></p>

    <p>Which will return data in this format:</p>

    <p><pre><code>{
  "links": [
    {
      "source": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback",
      "verified": true,
      "verified_date": "2013-04-25T17:09:33-07:00",
      "id": 900,
      "data": {
        "author": {
          "name": "<NAME>",
          "url": "http://tantek.com/",
          "photo": "http://tantek.com/logo.jpg"
        },
        "name": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html",
        "content": "Another milestone: &lt;a class=\"auto-link h-x-username\" href=\"https:\/\/twitter.com\/eschnou\">@eschnou&lt;\/a> automatically shows #indieweb comments with h-entry sent via pingback &lt;a class=\"auto-link\" href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html&lt;\/a>",
        "published": "2013-04-22T15:03:00-07:00",
        "published_ts": 1366668180,
        "url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback"
      }
    }
  ]
}</code></pre></p>
  </div>



  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="streaming-api"><a href="#streaming-api" class="in-page-link icon-link"></a>Streaming API</h2>

    <p>You can use the Websockets API to receive comments on specific URLs in realtime!</p>

    <p>Below is sample code for connecting to the Websockets API and rendering inline comments in real time on a specific post.</p>

    <p><pre><code>&lt;script&gt;
var commentContainerSelector = '#comments ul';
 
if($(commentContainerSelector).length > 0 && "WebSocket" in window) {
  var ws = new WebSocket("ws://webmention.io:8080");
  ws.onopen = function(event) {
    // Send the current window URL to the server to register to receive notifications about this URL
    ws.send(window.location);
  };
  ws.onmessage = function(event) {
    var data = JSON.parse(event.data);

    if(data && data.type == "webmention") {
      // Create a simple &lt;li&gt; element with the information from the post.
      // Probably you will want to change the HTML generated here.
      var comment = $('&lt;li/>').html('&lt;a href="'+data.author.url+'">&lt;img src="'+data.author.photo+'" width="48">&lt;/a> &lt;a href="'+data.author.url+'">'+data.author.name+'&lt;/a>&lt;br />'+data.content+'&lt;br />&lt;a href="'+data.url+'">'+data.published+'&lt;/a>');

      // Check if we've already added a comment for this ID, and update the existing one if so
      if($("#"+data.element_id).length == 0) {
        $(commentContainerSelector).append(comment);
      } else {
        $("#"+data.element_id+" li").html(comment);
      }
    }
  };
}
&gt;/script&gt;</code></pre></p>

  </div>


  <div style="background-color: #fff; padding: 10px 20px;">
    <h2 id="more"><a href="#more" class="in-page-link icon-link"></a>More Information</h2><commit_msg>fix tag<commit_after>
<div class="container-narrow">

  <br /><br />

  <div class="hero-unit">
    <img src="/img/webmention-logo-380.png" width="200px" class="pull-left" style="background-color: #eee; margin-right: 30px;" />

    <h1>Webmention.io</h1>
    <p>
      Webmention.io is a hosted service created to easily handle webmentions (and legacy pingbacks) on any web page. Currently it is not open for signups, but you can <a href="https://github.com/aaronpk/webmention.io">download the source code</a> and run it on your own server.
    </p>
    <p>
      You might also be interested in reading about this project on the <a href="http://indiewebcamp.com/webmention.io">IndieWebCamp wiki</a>.
    </p>

      <!-- <a class="btn btn-primary btn-large" href="/auth/github">
        Log in with Github
      </a> -->
  </div>

  <div style="background-color: #fff; padding: 10px 20px;">
    <h2 id="use-it"><a href="#use-it" class="in-page-link icon-link"></a>Use it on your site</h2>

    <p>Once you have a username, add the following tags to your HTML:</p>

    <p><pre><code>    &lt;link rel="pingback" href="http://webmention.io/username/xmlrpc" /&gt;
    &lt;link rel="webmention" href="http://webmention.io/username/webmention" /&gt;
</code></pre></p>

    <p>The system will begin collecting webmentions and pingbacks on your behalf.</p>
  </div>



  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="forwarding"><a href="#forwarding" class="in-page-link icon-link"></a>Forward pingbacks to webmentions</h2>

    <p>If you want to accept pingbacks but don't want to deal with the hassle of XMLRPC, you can use this service to forward pingbacks as webmentions to your server. You don't need an account for this to work.</p>

    <p><pre><code>&lt;link rel="pingback" href="http://webmention.io/webmention?forward=http://example.com/endpoint" /&gt;</code></pre></p>

    <p>For further details and an example, please refer to the <a href="https://github.com/aaronpk/webmention.io#pingback-to-webmention-service">README</a>.</p>
  </div>



  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="display-mention-counter"><a href="#display-mention-counter" class="in-page-link icon-link"></a>Display a mention counter</h2>

    <p>You can use the API from Javascript to display a mention count of one or more URLs</p>

    <p><b>Getting the data manually</b></p>

    <p>To retrieve the data manually using jQuery, you can make a request like the following. Be sure to add a parameter for your access token if your account is set to disable public access to the data.</p>

    <p><pre><code>$(function(){
  $.getJSON("http://webmention.io/api/count?jsonp=?", {
    target: "http://example.com/page/100"
  }, function(data){
    console.log(data.count);
  });
});
</code></pre></p>

    <p><b>Displaying counts automatically</b></p>

    <p>You can include some simple markup and a Javascript file to automatically display the mention counter for one or more URLs on a page.</p>

    <p>First, choose an element that will be used to display the counter. Add the an attribute <code>data-webmention-count</code> to it, as well as <code>data-url=""</code> with the full URL of the page you would like to count. This might look something like the following:</p>

    <p><pre><code>&lt;span data-indieweb-comment-count data-url="http://example.com/page/100"&gt;&lt;/span&gt; mentions</code></pre></p>

    <p>Then, add the following script tag to your page after you've included jQuery:</p>

    <p><pre><code>&lt;script type="text/javascript" src="http://webmention.io/js/mentions.js"&gt;&lt;/script&gt;</code></pre></p>

    <p>

  </div>


  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="show-all-mentions"><a href="#show-all-mention" class="in-page-link icon-link"></a>Show all mentions</h2>

    <p>You can also use the API to show all mentions of a URL. This will work with jQuery or you can use the API directly from a server.</p>

    <p><pre><code>$(function(){
  $.getJSON("http://webmention.io/api/mentions?jsonp=?", {
    target: "http://example.com/page/100"
  }, function(data){
    console.log(data);
  });
});</code></pre></p>

    <p>Which will return data in this format:</p>

    <p><pre><code>{
  "links": [
    {
      "source": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback",
      "verified": true,
      "verified_date": "2013-04-25T17:09:33-07:00",
      "id": 900,
      "data": {
        "author": {
          "name": "<NAME>",
          "url": "http://tantek.com/",
          "photo": "http://tantek.com/logo.jpg"
        },
        "name": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html",
        "content": "Another milestone: &lt;a class=\"auto-link h-x-username\" href=\"https:\/\/twitter.com\/eschnou\">@eschnou&lt;\/a> automatically shows #indieweb comments with h-entry sent via pingback &lt;a class=\"auto-link\" href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html&lt;\/a>",
        "published": "2013-04-22T15:03:00-07:00",
        "published_ts": 1366668180,
        "url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback"
      }
    }
  ]
}</code></pre></p>
  </div>



  <div style="background-color: #fff; padding: 10px 20px; margin-top: 20px;">
    <h2 id="streaming-api"><a href="#streaming-api" class="in-page-link icon-link"></a>Streaming API</h2>

    <p>You can use the Websockets API to receive comments on specific URLs in realtime!</p>

    <p>Below is sample code for connecting to the Websockets API and rendering inline comments in real time on a specific post.</p>

    <p><pre><code>&lt;script&gt;
var commentContainerSelector = '#comments ul';
 
if($(commentContainerSelector).length > 0 && "WebSocket" in window) {
  var ws = new WebSocket("ws://webmention.io:8080");
  ws.onopen = function(event) {
    // Send the current window URL to the server to register to receive notifications about this URL
    ws.send(window.location);
  };
  ws.onmessage = function(event) {
    var data = JSON.parse(event.data);

    if(data && data.type == "webmention") {
      // Create a simple &lt;li&gt; element with the information from the post.
      // Probably you will want to change the HTML generated here.
      var comment = $('&lt;li/>').html('&lt;a href="'+data.author.url+'">&lt;img src="'+data.author.photo+'" width="48">&lt;/a> &lt;a href="'+data.author.url+'">'+data.author.name+'&lt;/a>&lt;br />'+data.content+'&lt;br />&lt;a href="'+data.url+'">'+data.published+'&lt;/a>');

      // Check if we've already added a comment for this ID, and update the existing one if so
      if($("#"+data.element_id).length == 0) {
        $(commentContainerSelector).append(comment);
      } else {
        $("#"+data.element_id+" li").html(comment);
      }
    }
  };
}
&lt;/script&gt;</code></pre></p>

  </div>


  <div style="background-color: #fff; padding: 10px 20px;">
    <h2 id="more"><a href="#more" class="in-page-link icon-link"></a>More Information</h2>
{'fraction_non_alphanumeric': 0.1761149919398173, 'fraction_numerical': 0.02109081139172488, 'mean_word_length': 3.641209476309227, 'pattern_counts': {'":': 30, '<': 291, '<?xml version=': 0, '>': 321, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2830838', 'n_tokens_mistral': 5311, 'n_tokens_neox': 4930, 'n_words': 1304}