sharelink-examples

Part of the Sharelink effort.

Malte Ubl ‏@cramforce Jan 19

• specifically we’d like to propose <link rel=share> (or similar name) to provide preference of shared URL for a given page.

Per the microformats process this page is here to document existing real world visible web publishing examples of pages publishing share links for themselves.

This article is a stub. You can help the microformats.org wiki by expanding it.

examples

• Twitter has a "copy link" dropdown with javascript, no rel on the tweet link.
• Medium changes the address bar link
• giphy under the advanced tab has multiple links, displayed as text input fields to copy

<div class="advanced-action-group">
    <div class="action clearfix">
        <p class="action-note">Giphy links preview in Facebook and Twitter. HTML5 links autoselect optimized format.</p>
        <span class="action-label">Giphy Link</span>
        <div class="action-field">
            <input type="text" value="http://gph.is/2dmmt6J" data-copy="true">
        </div>
    </div>
    <div class="action clearfix">
        <span class="action-label">HTML5 Video</span>
        <div class="action-field">
        
            <input type="text" value="https://giphy.com/gifs/lC86xNTUs7CM0/html5" data-copy="true">
        
        </div>
    </div>
    <div class="action clearfix">
        <span class="action-label">Gif Download</span>
        <div class="action-field has-button">
            <input type="text" value="http://i.giphy.com/lC86xNTUs7CM0.gif" data-copy="true">
            <a class="action-button button blue" href="https://media.giphy.com/media/lC86xNTUs7CM0/giphy.gif" download="giphy.gif" target="_blank">Download</a>
        </div>
    </div>
    
</div>

• svgshare has multiple URLs to copy as well:

  <ul id="shares">
  <li><h3>Image Link (chat, IM, email)</h3>
  <input readonly value="http://svgshare.com/s/Xe" type="text" >
  <li><h3>Direct Link (chat, IM, email)</h3>
  <input readonly value="http://svgshare.com/i/Xe.svg" type="text" >
  <li><h3>HTML (website, blog)</h3>
  <input readonly value="&lt;a href='http://svgshare.com/s/Xe' &gt;&lt;img src='http://svgshare.com/i/Xe.svg' title='' /&gt;&lt;/a&gt;" type="text" >
  <li><h3>HTML iframe (website, blog)</h3>
  <input readonly value="&lt;iframe src='http://svgshare.com/f/Xe' width=100% height=100% &gt;&lt;/iframe&gt;" type="text" >
  <li><h3>Hash resolver</h3>
  <input readonly value="http://svgshare.com/getbyhash/sha1-S0gBndRX/ONq105EfF1/tF8h9Lo=" type="text" >
  </ul>

• …

see also

• sharelink-formats