Update, 09/10/2010: Updated as the Citings & Sightings badge instead of the Contexts Crawler badge.

Citings & Sightings offers catchy & concise snapshots of what sociology is and what sociologists are doing. Now you can put Citings on your website or blog with a Citings & Sightings badge that scrolls through our most recent headlines. Here’s what it looks like:

This badge was created for sociologists with their own personal websites, sociology departments who want an easy way to show off the exciting work being done in their discipline, or anyone else that likes what we’re doing here at The Society Pages.

To put this on your site, copy and paste the following code wherever you want it to appear on your site:

<div id="feed-control"><span style="height: 5.7em;color:#676767;font-size:11px;margin:10px;padding:4px;font-family: Verdana, sans-serif">Loading...</span></div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="http://thesocietypages.org/badges/citings/embed-v1.css" />
<script type="text/javascript" src="http://thesocietypages.org/badges/citings/embed-v1.js"></script>

If you want to add a light border around it, you can wrap it in a div, by putting this before the code:

<div style="border: solid 1px #ccc;padding: 6px">
</div>

and then, of course, add a closing </div> at the end of the above code block.

If you want to read more about customizing the badge or creating your own, read on.

Details & Customization

This badge was created using the Google AJAX Feed API and what you’re embedding in your site was produced by simply passing the Citings & Sightings RSS feed into Google’s Feed Control Wizard and then applying our own stylesheet.

It’s really incredibly easy to do: all the work is in the stylesheet. Since a simple “View Source” in your browser won’t suffice since javascript is at work here, here’s a simple reference of the HTML you can write your stylesheet against:

<div id="feed-control">
    <div class="gfg-root">
 
        <div class="gfg-title">
            <a class="grg-collapse-href" target="_blank" href="http://thesocietypages.org/citings">Citings &amp; Sightings</a>
        </div><!-- close gfg-title -->
 
        <div class="gfg-entry">
            <div class="gf-result">
                <div class="gf-title">
                    <a class="gf-title" href="http://thesocietypages.org/citings/LINK-TO-POST">POST TITLE</a>
                </div><!--close gf-title -->
                <div class="gf-author">by POST AUTHOR</div>
                <div class="gf-spacer">-</div>
                <div class="gf-relativePublishedDate">POST DATE</div>
                <div class="gf-snippet">POST DESCRIPTION</div>
            </div><!-- close gf-result -->
        </div><!-- close gfg-entry -->
 
        <div class="gfg-list">
            <div class="gfg-listentry gfg-listentry-even">
                <a href="http://NEXT-LINK-IN-FEED">POST TITLE</a>
            </div><!-- close gfg-listentry-even -->
            <div class="gfg-listentry gfg-listentry-odd">
                <a href="http://NEXT-LINK-IN-FEED">POST TITLE</a>
            </div><!-- close gfg-listentry-odd -->
        </div><!-- close gfg-list -->
 
    </div><!--close gfg-root -->
</div><!-- close feed-control -->

A few things you’ll notice if you look at that: most of what our stylesheet does is actually hide elements. We needed a simple badge that would fit in on a lot of sites, so we started with the simple one you see above. I hope to design some more complex badges as well, but feel free to take the above information and restyle our Citings badge to fit your site perfectly! (Or use this information here, along with Google’s documentation to create your own badge!)

About performance & validation

As I described above, you can just paste the block of code wherever you want it to appear on your page. There are two downsides to doing things this way: speed & XHTML validation. Ideally, it’s best to split that code up into three places:

1. Put the feed-control div where you want the badge to appear:

<div id="feed-control"><span style="height: 5.7em;color:#676767;font-size:11px;margin:10px;padding:4px;font-family: Verdana, sans-serif">Loading...</span></div>

2. Put the stylesheet in between your <head> and </head> tags:

<link rel="stylesheet" type="text/css" href="http://thesocietypages.org/badges/citings/embed-v1.css" />

You shouldn’t have <link> tags inside your body. Moving it to the head allows your HTML to validate.

3. Put the javascript at the very bottom of your page, as close to </body> as you can:

<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://thesocietypages.org/badges/citings/embed-v1.js"></script>

This allows the entire page to load before loading the javascript. The box for the badge will simply display “Loading…” in the meantime and the badge won’t slow down your web page.

Another alternative is to use an iframe, though people tend to disagree on whether or not that’s a good practice:

<iframe src="http://thesocietypages.org/badges/citings/embed-v1.html" scrolling="0" frameborder="0" marginwidth="0" marginheight="0" width="250px" style="padding: 5px;height: 9em">(If you can read this, your browser does not support iframes.)</iframe>