Displaying Data from the Swarm API
The final step is to insert the code where you want the data to display. This can be done in a new page you create or in the footer, header, sidebar, etc. Below are a few simple code samples that you can copy and paste or just use as examples for your own edits.
The plugin operates by swapping out a specific tag with the requested HTML module. Specific tags include:
- [sf:tweetview] - for a listing of recent tweets in the swarm from Twitter.
- [sf:memberview] - for a listing of thumbnail images of top rated swarm members.
- [sf:linkview] - for a listing of the most popular links within the swarm.
- [sf:photoview] - displays the most popular images from Flickr.
Here is a sample creating a new page called "Swarm" and simply stacking all of the display modules vertically in a single div tag:
Sample Code for Copy and Paste:
- One Column with one module:
<div id="primary"> [sf:tweetview] </div>
- One Column with all modules vertically stacked:
<div id="primary"> [sf:memberview] [sf:linkview] [sf:tweetview] [sf:photoview] </div>
- Two Column with two modules in each:
<div id="primary"> <div id="leftColumn"> sf:tweetview sf:memberview </div> <div id="rightColumn"> sf:photoview sf:linkview </div> </div>
Onece you have put your HTML code into the page (or edited it directly into the PHP of a page), preview the page and see how your data looks. From this point, you can fine tune the HTML and CSS to your liking.
Congratulations! You now have real-time swarm data in your blog.
Have a question or suggestion? Ask Us.