Catalog of ADN Web Widgets

Widget Catalog:

Alpha iframe

Can be used for:

Viewing a user:

<iframe src="http://alpha.app.net/dalton" frameborder=0 width=100% height=640></iframe>

Viewing a hashtag:

<iframe src="http://alpha.app.net/hashtags/adn" frameborder=0 width=100% height=480></iframe>

Viewing global:

<iframe src="http://alpha.app.net/global/" frameborder=0 width=100% height=480></iframe>

Viewing posts a user starred:

<iframe src="http://alpha.app.net/dalton/stars/" frameborder=0 width=100% height=480></iframe>

Web-intents using the App.net API

Link

<a target=_blank href="https://alpha.app.net/intent/post?text=@dalton">Write Dalton</a>

Write Dalton

Javascript

This can be blocked by pop-up blockers but gives you a bit more control of where the pop-up happens

<script type="text/javascript">

function adn_web_intent_send_post() {

  window.open(

      'https://alpha.app.net/intent/post?text=@dalton',

      'adn_post',

      'width=750,height=400,left=100,top=100'

  );

}

</script>

<a href="javascript://Send msg via alpha (via webintents)" onclick="adn_web_intent_send_post();">Send dalton message now</a>

Send dalton message now

Iframe

I recommend a minumum height of 400px so users can easily use the log in page.

<iframe src="https://alpha.app.net/intent/post?text=@dalton" width=100% height=400></iframe>

Follow Widget by @abraham

<html>
<head>
<!-- ADN Widgets alpha -->
<!-- Sign up for alpha deprecation announcements: https://groups.google.com/forum/#!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: https://alpha.app.net/widgets -->
<script async src="https://adnwidgets.herokuapp.com/alpha.js"></script>
</head>
<body>
<!-- ADN Widgets follow button: Replace abraham with your username -->
<a class="adnw-follow" data-username="abraham" href="https://alpha.app.net/abraham">Follow @abraham on ADN</a>
</body>
</html>

Place link where you want the button to load:

<a class="adnw-follow" data-username="abraham" href="https://alpha.app.net/dalton">Follow @dalton on ADN</a>

Place in your head tag:

<script async src="https://adnwidgets.herokuapp.com/alpha.js"></script>

Follow @dalton on ADN

App.net 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):

<style>
#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; }
</style>

Before your closing body tag:

<script type="text/javascript" src="http://www.appnetroster.com/js?t=_blank&u[]=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="http://appnetizens.com/embed_adn?userid=7314&width=240&font_c=574d4d&bo_t=0" width="260" height="200" frameborder="0" style="overflow:hidden;" scrolling="no"></iframe></div>
    <small>&#8216;Embedded Post&#8221; by <a target=_blank href="//Appnetizens.com">Appnetizens.com</a></small>

‘Embedded Post” by Appnetizens.com

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

ADN Button from http://adnbutton.com by @ca & @rowntree

Place where you want the "Post To ADN" button to show up:

<script src="http://adnbutton.com/button.js"></script><a class="button" style="margin-left:auto;margin-right:auto;position:block;" onClick="Send()">Post to ADN</a>

Post to ADN See Introducing ADNButton.com 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: