More Sociable Hacks: Adding MySpace And Yahoo! Buzz, Changing The Look

I’ve done some more hacking of the Sociable social bookmarking plug-in for WordPress and I’d thought I’d share them with others.

I’ve added buttons for MySpace and Yahoo! Buzz. I’ve also changed the layout to put all the icons inside a fieldset tag and eliminate the rollover effects.

I’ve also cleaned up some more code, most notably making a change to the way the script creates excerpts when the user has not done so.

Let’s look at the changes.

Adding The MySpace Icon

Adding a bookmarking site icon to Sociable is pretty straightforward, as I mostly described in my earlier post.

The first step is to obtain a 16×16-pixel icon (in GIF, PNG or JPG format) for the site you want to add. I made one from the MySpace homepage icon; you can do the same with pretty much any image-editing program.

The icon then needs to be placed inside the images directory that is inside the sociable plug-in directory (that is, inside wp-content/plugins/sociable/images).

As a last part of this step, you need to add the icon’s file name to the $sociable_files array in sociable.php.

I specifically look for the lines that refer to images/myshare.png and images/n4g.gif, somewhere around line 600:

'images/myshare.png',
'images/n4g.gif',

and between those two lines, I add the MySpace icon, so the block now looks like this:

'images/myshare.png',
'images/myspace.gif',
'images/n4g.gif',

With the icon ready to go, we can now add an entry in sociable.php for a MySpace link. Once again, we scroll through sociable.php, looking for the entries for MyShare and N4G that appear somewhere around line 315:

'MyShare' => Array(
	'favicon' => 'myshare.png',
	'url' => 'http://myshare.url.com.tw/index.php?func=newurl&url=PERMALINK&desc=TITLE',
),

'N4G' => Array(
	'favicon' => 'n4g.gif',
	'url' => 'http://www.n4g.com/tips.aspx?url=PERMALINK&title=TITLE',
),

Once again, we will be placing a code block between those two entries for MySpace. This is what we will paste:

'MySpace' => array(
	'favicon' => 'myspace.gif',
	'url' => 'http://www.myspace.com/index.cfm?fuseaction=postto&t=TITLE&u=PERMALINK&c=EXCERPT'
),

Note that when we specify the favicon (which will appear in the Sociable settings menu), we provide only the name of the icon file.

In the entry above, TITLE will be replaced by sociable.php with the title of the entry; PERMALINK will be replaced by the URL to your entry; and EXCERPT will be replaced either with the excerpt you gave to the entry, or with one that sociable.php will calculate for us.

We simply paste this new entry between the MyShare and N4G entries, so the block will now appear as below:

'MyShare' => Array(
	'favicon' => 'myshare.png',
	'url' => 'http://myshare.url.com.tw/index.php?func=newurl&url=PERMALINK&desc=TITLE',
),

'MySpace' => array(
	'favicon' => 'myspace.gif',
	'url' => 'http://www.myspace.com/index.cfm?fuseaction=postto&t=TITLE&u=PERMALINK&c=EXCERPT'
),

'N4G' => Array(
	'favicon' => 'n4g.gif',
	'url' => 'http://www.n4g.com/tips.aspx?url=PERMALINK&title=TITLE',
),

And with that, MySpace becomes one of the entries I can select and order in the Sociable settings menu; if you select it, it appears on your pages where you say and properly posts to MySpace.

Adding A Yahoo! Buzz Icon

The steps for adding a Yahoo! Buzz icon are fundamentally the same as for MySpace.

First, create the icon, upload it to the icon directory, then add it to the $sociable_files array:

'images/wykop.gif',
'images/yahoobuzz.png', // this is the new entry line
'images/yahoomyweb.png',

Next, we need to look at the code that adds Yahoo! Buzz to the $sociable_known_sites array.

'YahooBuzz' => array(
	'favicon' => 'yahoobuzz.png',
	'url' => 'http://buzz.yahoo.com/submit/?submitUrl=PERMALINK&submitHeadline=TITLE&submitSummary=EXCERPT&submitCategory=science&submitAssetType=text',
	'description' => 'Yahoo! Buzz'
),

Note the line that begins ‘url’ =>. This is going to send our page to the Yahoo! Buzz page that either enters the item into Buzz or lets you buzz the item if it’s already been added.

We’re specifically interested in submitCategory=science. This is the default category in which the entry should be placed on Buzz.

Most of what I write about is technical, so this is what I use as a default category. You, on the other hand, may want to use one of the other categories. The available categories are: entertainment, health, images, lifestyle, politics, science, sports, travel, usnews, video, world-news (these are the exact, case-sensitive values you can use).

So, if you wanted your default category to lifestyle, you would change submitCategory=science to submitCategory=lifestyle. So your Yahoo! Buzz code block for $sociable_known_sites would look like this:

'YahooBuzz' => array(
	'favicon' => 'yahoobuzz.png',
	'url' => 'http://buzz.yahoo.com/submit/?submitUrl=PERMALINK&submitHeadline=TITLE&submitSummary=EXCERPT&submitCategory=lifestyle&submitAssetType=text',
	'description' => 'Yahoo! Buzz'
),

Now, we simply add that code between the entries for Xerpi and YahooMyWeb:

'Xerpi' => Array(
	'favicon' => 'xerpi.gif',
	'url' => 'http://www.xerpi.com/block/add_link_from_extension?url=PERMALINK&title=TITLE',
),

'YahooBuzz' => array(
	'favicon' => 'yahoobuzz.png',
	'url' => 'http://buzz.yahoo.com/submit/?submitUrl=PERMALINK&submitHeadline=TITLE&submitSummary=EXCERPT&submitCategory=lifestyle&submitAssetType=text',
	'description' => 'Yahoo! Buzz'
),

'YahooMyWeb' => Array(
	'favicon' => 'yahoomyweb.png',
	'url' => 'http://myweb2.search.yahoo.com/myresults/bookmarklet?u=PERMALINK&=TITLE',
),

And as it was with MySpace, we now have a Yahoo! Buzz icon that can be selected and ordered from the Sociable settings menu to appear on our Sociable link list.

Fixing The Excerpt Code

You’ll notice that both the links above make use of excerpts. If you provide excerpts for your blog entries through WordPress, then you can skip this section; it doesn’t apply to you.

If you don’t normally create post excerpts but you are not using PHP 5, you should skip this section. What I describe below makes use of a function, strripos(), available only in PHP 5.

Sociable uses a very simple method for getting post excerpts when they don’t exist for a given post: It grabs the first 250 characters of the post and uses that.

The problem with this methodology is twofold. It doesn’t remove carriage returns / newlines encountered within those first 250 characters; sending HTTP GET variables that contain newlines and carriage returns is a bad idea. And just picking the first 250 characters from a post almost always means the excerpt will cut off in mid-word.

So I altered sociable.php to give a better excerpt. Namely, the excerpt now takes the first 300 characters of the post, and uses all the text up to the last carriage return; and if there is no carriage return in that excerpt, then up to the last period that is followed by a space.

I also strip the carriage returns and newlines from the excerpt, after having decided how long it should be, to ease any problems with sending data to the bookmarking site.

To implement these changes, you should open sociable.php and look for these lines, which should now be somewhere around line 670:

$excerpt	= $post->post_excerpt;
if ($excerpt == "") {
	$excerpt = urlencode(substr(strip_tags($post->post_content),0,250));
}
$excerpt	= str_replace('+','%20',$excerpt);

You should replace those lines with this code:

$excerpt = $post->post_excerpt;
if ($excerpt == "") {
	$excerpt = substr(strip_tags($post->post_content), 0, 300);
	if(strripos($excerpt, "\r") === false) {
		$excerpt = substr($excerpt, 0, strripos($excerpt, ". "));
	}
	else {
		$excerpt = substr($excerpt, 0, strripos($excerpt, "\r"));
	}
}
$excerpt = str_replace("\r", " ", $excerpt);
$excerpt = str_replace("\n", "", $excerpt);
$excerpt = urlencode($excerpt);
$excerpt = str_replace('+', '%20', $excerpt);

Removing The Hover Effects From The Icons

I don’t like the muted icons that come stock in Sociable (they appear full-color when you mouse over them). So, I simply commented out the relevant parts of sociable.css that set the icons to be muted and cause the hover (rollover / mouseover) effect.

Look for these lines, somewhere around line 40, in sociable.css:

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}

Just comment out the entire block by adding a /* at the top and a */ at the bottom of the items, like this:

/*
.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}
*/

Placing Sociable’s Icons Inside A Fieldset

Speaking of sociable.css, you can always style the div.sociable class to pretty up your pages as much as you want.

But when I look at the Sociable icons, all lined up, they seem ripe for inclusion in a fieldset. So, a little more hacking in both sociable.php and sociable.css was required.

First, in sociable.css, I needed to add styles for the fieldset and legend. I added these styles just under div.sociable but you can put them anywhere you like in sociable.css:

div.sociable fieldset { padding: 5px; }
div.sociable legend { font-weight: bold; }

In sociable.php, I needed to change how the program sends out the tagline code. I first located this code, somewhere around line 680:

$html .= "\n<div name=\"sociable\">\n<div name=\"sociable_tagline\">\n";
$html .= stripslashes(get_option("sociable_tagline"));
// $html .= "\n\t<span>" . __("These icons link to social bookmarking sites where readers can share and discover new web pages.", 'sociable') . "</span>";
$html .= "\n</div>\n<ul>\n";

I replaced those lines with these:

$html .= "\n<div name=\"sociable\">\n";
$html .= "<fieldset>\n";
$html .= "<legend>" . stripslashes(get_option("sociable_tagline")) . "</legend>\n";
$html .= "<ul>\n";

I then looked for these lines, somewhere around line 720:

$html .= "</ul>\n</div>\n";

return $html;

and I replaced those lines with these:

$html .= "</ul>\n";
$html .= "</fieldset>";
$html .= "</div>\n";

return $html;

Now, the icons are contained in an element that is pretty much rendered consistently across browsers. However, I did need to add the 5 pixels of padding to the fieldset because without it, the icons were crowded against the borders of the fieldset in Internet Explorer 7.

And that’s it. Out of respect to Sociable’s copyright holders, I will not provide code to download, but I license what I have written here under their license terms (namely, the GNU GPL 2).

2 thoughts on “More Sociable Hacks: Adding MySpace And Yahoo! Buzz, Changing The Look

  1. Pingback: dougv.com | The Web home of Doug Vanderweide : Goodbye, TypoXP; Hello, Barthelme; Welcome Back, WP-Syntax; Tag, You’re It

  2. Pingback: How to Share Like a Pro | Jonny Tokyo

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *