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>
-
Use this code if you'd like to use JavaScript:
-
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 :)