Catalog of ADN Web Widgets

By @ryantharp

Widget Catalog:

Alpha iframe

Can be used for:

Web-intents using the API

Follow Widget by @abraham

<!-- ADN Widgets alpha -->
<!-- Sign up for alpha deprecation announcements:!forum/adn-widgets-announce -->
<!-- To install: include script on your web site and add the <a> tag where you want the follow button -->
<!-- Tested to work in the latest Chrome, Firefox, Safari, and IE9 -->

<!-- ADN Widgets: -->
<script async src=""></script>
<!-- ADN Widgets follow button: Replace abraham with your username -->
<a class="adnw-follow" data-username="abraham" href="">Follow @abraham on ADN</a>

Place link where you want the button to load:

<a class="adnw-follow" data-username="abraham" href="">Follow @dalton on ADN</a>

Place in your head tag:

<script async src=""></script>

Follow @dalton on ADN Roster by @pelargir

Place stub where you want the roster to load:

<div id="appnetroster"><p>Loading...</p></div>

Place in your head tag (or put in your stylesheet without the style tag):

#appnetroster ul { list-style: none; margin: 0 0 1em 0; padding: 0; }
#appnetroster li { margin-bottom: 1em; position: relative; width: 100%; }
#appnetroster .avatar { position: absolute; }
#appnetroster .avatar img { border: none; }
#appnetroster .username { display:none; }
#appnetroster .name, #appnetroster .extra { font-weight: bold; }
#appnetroster .name, #appnetroster .tweets, #appnetroster .extra { padding-left: 60px; }

Before your closing body tag:

<script type="text/javascript" src="[]=dalton&u[]=berg"></script>


Embedded posts by @adrianus

You have to be followed by @adrianus and will need to look up your userid.
<div class="textwidget"><iframe src="" width="260" height="200" frameborder="0" style="overflow:hidden;" scrolling="no"></iframe></div>
    <small>&#8216;Embedded Post&#8221; by <a target=_blank href="//"></a></small>
‘Embedded Post” by

Also see, this link for other sample, view the source of this link to see how to apply these different styling.

ADN Button from by @ca & @rowntree

Place where you want the "Post To ADN" button to show up:
<script src=""></script><a class="button" style="margin-left:auto;margin-right:auto;position:block;" onClick="Send()">Post to ADN</a>

Post to ADN See Introducing by @rowntree

Contact & Support

If there's something you made that we don't have, let us know! Or if you have an idea for a widget, let me know too!

contact @ryantharp on ADN, if you have any comments, questions, feedback.

Contact Form: