Snippets: Broadcasting DZONE Shares
In their recent redesign, DZONE.com gave users three ways to acknowledge articles. First there is the vote, the digital equivalent of applause (or boos). Next you can save articles you feel you'll want to come back to -- I use this all the time for reference works and true information resources. Finally there is the share which lets you tag interesting articles to share with other people.
While I'm a big fan of the up-vote (it's great feedback on the articles I write), and I use the save function extensively, DZONE's share feature is -- by far -- the most fun of the new features since I can clip interesting articles and make them available on my web pages. This snippet will show you, step by step, how to include your shares on your own web page. The only thing you need is HTML, no server-side scripting is necessary.
This isn't a tutorial -- I've covered the concept of serverless RSS feeds in several articles (many would say too many!) -- think of this article as more as a plug-in. If you really want to know exactly how this snippet works, you should check out the Yahoo Pipes--RSS without Server Side Scripts article.
The HTML
The first step is to create a container for your DZONE shares. We'll do this with two divisions. The outer division can hold any title or text you want to display and the inner division will be automatically populated by the DZONE links.
<div id='dzoneLayer'> My DZONE Recommendations <div id='dzoneLinks'> </div> </div>
Place this block wherever you want your DZONE shares to appear, you can also
apply any styles and class names you wish. You can also remove, change or replace
the My DZONE Recommendations
text.
Find Your Share Feed
For this step you need to visit DZONE and make sure you are logged in.
At the top of the page you'll see a link named shared
.
When you click on this link you'll be taken to your personal shared links page. At the top of the page you'll see an area which will offer you a RSS feed of your shared page. Click on that link…
Now copy (highlight and cntrl-c) the url you see in the browser's location bar…
(Fear the mighty power of print screen and MS Paint!).
The Script
Copy the URL in the browser and paste it as the value of sharedURL in the following script. If your url was…
http://www.dzone.com/feed/shared/209881/rss.xml
Then the first line of the script would read…
var sharedURL='http://www.dzone.com/feed/shared/209881/rss.xml'; // Place your url between the quotes.
As a convenience, you can paste the url in the following text box and the script will automatically be modified to use that url (making it very easy to cut and paste).
<script type='text/javascript'>
var sharedURL=''; // Place your url between the quotes.
function getFeed(url, callback) {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=JSON&_callback='+callback+'&feed=' + sharedURL;
document.getElementsByTagName("head")[0].appendChild(newScript);
}
function dzone(feed) {
var tmp='';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<a href="'+feed.value.items[i].link+'" rel="nofollow">';
tmp+=feed.value.items[i].title+'</a><br>';
}
document.getElementById('dzoneLinks').innerHTML=tmp;
}
getFeed(sharedURL, 'dzone');
</script>
That's the only modification you need to make to the script.
To copy the script (or pretty much any code block on this site) simply right click in the script's area and select copy. The javascript on this page will automatically select the script area for you when you right click (the site is pretty cool that way).
Paste the script in your web page's <body> near the end, BELOW where you placed the division HTML. If you have problems first check to make sure you entered the URL properly and that the script does not come before the division tags.
Profit!
If all went well you should now have your DZONE shares appearing on your web page, always updated and always cool. Just remember to give your division some basic styles!
RSS 2.0
JSON