New Identi.ca Share Button

Author: Jacob Barkdull on Thursday, June 30 2011 Comments ↴

Identi.ca still doesn't have a proper share button. For a long time I've looked for a good Identi.ca share button. One like Twitter's, one that: displays a count of posts, and lets people share the page with the post automatically containing the page title and URL. I looked so long without finding anything that I wrote one myself. And I've talked a little bit about the half-PHP-half-JavaScript Identi.ca share button that I wrote, but I really haven't shown it off or explained how to use it. It's kind of pointless to write it just for myself.

So allow me to explain a few things.

• How It Looks <-- Beauty, eh?



• How It Works The button works by sending the current page URL to Identi.ca's search and counting how many times it appears in the JSON feed. That number is used to represent how many other people have "dented" something about the page. That number is also a link that links to a page to post a new notice containing the page title and URL. If you'd like a better understanding, the source code is here



• The Button Code Either via JavaScript or an Iframe. Simply copy the lines for whichever method you like, paste them where you want in your HTML code. And you're done. Additionally, you may use a specific page title by adding "?title=<page title here>" after the "identishare.php", and/or use the secondary style by using "?style2", if you're using the Iframe code these options should be "&title=<page title here>" and "&style2" respectively. You may also host the files yourself, which I would recommend and appreciate.
  
  The code you'll need to use the button on your website:
  
  Default Style
  
  
  • Use this code if you'd like to use JavaScript:
    <span id="identishare"></span><script type="text/javascript">(function() { var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true; s.src = "http://tildehash.com/identishare.php"; t.parentNode.insertBefore(s, t); })();</script>
  
  
  
  • Use this code if you'd like to use an iFrame:
    <iframe height="61" width="51" scrolling="no" frameborder="0" src="http://tildehash.com/identishare.php?noscript" border="0" marginheight="0" marginwidth="0" allowtransparency="true"></iframe>
  
  
  
  • Use this code if you'd like to use an Object:
    <object type="text/html" data="http://tildehash.com/identishare.php?noscript" style="width: 51px; height: 61px; overflow: hidden;"></object>
    
    
    
  
  
  Secondary Style (more like Twitter's)
  
  
  • JavaScript code:
    <span id="identishare"></span><script type="text/javascript">(function() { var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true; s.src = "http://tildehash.com/identishare.php?style2"; t.parentNode.insertBefore(s, t); })();</script>
  
  
  
  • iFrame code:
    <iframe height="61" width="51" scrolling="no" frameborder="0" src="http://tildehash.com/identishare.php?noscript&style2" border="0" marginheight="0" marginwidth="0" allowtransparency="true"></iframe>
  
  
  
  • Object code:
    <object type="text/html" data="http://tildehash.com/identishare.php?noscript&style2" style="width: 51px; height: 61px; overflow: hidden;"></object>
    
    
    
  
  
  Default Style (wide)
  
  
  • JavaScript code:
    <span id="identishare"></span><script type="text/javascript">(function() { var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true; s.src = "http://tildehash.com/identishare.php?wide"; t.parentNode.insertBefore(s, t); })();</script>
  
  
  
  • iFrame code:
    <iframe height="28" width="130" scrolling="no" frameborder="0" src="http://tildehash.com/identishare.php?noscript&wide" border="0" marginheight="0" marginwidth="0" allowtransparency="true"></iframe>
  
  
  
  • Use this code if you'd like to use an Object:
    <object type="text/html" data="http://tildehash.com/identishare.php?noscript&wide" style="width: 51px; height: 61px; overflow: hidden;"></object>
    
    
    
  
  
  Default Style (wide & small)
  
  
  • JavaScript code:
    <span id="identishare"></span><script type="text/javascript">(function() { var s = document.createElement('script'), t = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true; s.src = "http://tildehash.com/identishare.php?wide&small"; t.parentNode.insertBefore(s, t); })();</script>
  
  
  
  • iFrame code:
    <iframe height="20" width="100" scrolling="no" frameborder="0" src="http://tildehash.com/identishare.php?noscript&wide&small" border="0" marginheight="0" marginwidth="0" allowtransparency="true"></iframe>
  
  
  
  • Object code:
    <object type="text/html" data="http://tildehash.com/identishare.php?noscript&wide&small" style="width: 51px; height: 61px; overflow: hidden;"></object>




• A Few Sites Using The Button Note: some of these sites use an older version of the button.

  Softcatalà Ethical Pets Cuslanz Inconstant Moon

  Emmabuntüs' Blog JRobb.org Jason's Chatter Tekkit Crunch

  Fyns Linux User Group Metztli IT Blog Planet Communia Duh Časa




• Help Me Out Please help me improve the button, if you make improvements please send them my way. "Perfect" isn't a word I would use when describing this button. It is perfectly functional, but it doesn't do a few important things, like count short URLs. However, I think it is still the best button around currently.
  
  Another thing you can do to help me out is host the files yourself. It's okay if you want to use this button as-is, but please host the files yourself if you are able. I'd just rather not have my server doing the work. These are the files you'll need: identishare.zip
  
  Also, you can help me by Flattring this page.

Thank you. And enjoy :)

Advertisements: