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:
600 601 | 'images/myshare.png', 'images/n4g.gif', |
and between those two lines, I add the MySpace icon, so the block now looks like this:
600 601 602 | '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:
315 316 317 318 319 320 321 322 323 | '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:
315 316 317 318 319 320 321 322 323 324 325 326 327 328 | '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:
645 646 647 | '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:
525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 | '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.
Page 1 of 2 | Next page
