Posts tagged code

[UPDATE] Changed base URLs for yFrog and TwitPic in the code. And edited the name of the yFrog image.

Since I’ve launched the redesigned BradArsenault dot com, I’ve been using a WordPress plugin called Social Links to show my social links (such as to Last.fm, Digg, Flickr, etc.) and this is how to add services that aren’t included by default.

First off, I’ll walk you through adding yFrog, however this will work with any site (that is publicly accessible with a user-specific URL)

First you have to get an image for the site you want to add. This could be from the favicon.ico file from the site (look for a link to that in the site’s source code) or from an image search. You then have to dress the icon up by cropping it, giving it a transparent background (if it has empty space in the icon), and resizing it to 16×16 pixels.

This was my design process in Pixelmator

Pixelmator designing yFrog favicon

You now have to upload this to the /images of this plugin’s folder with an easy name, like yfrog.php. The next step is to add the right code to the php file.

I use Espresso by MacRabbit for my code, however any raw text editor will work (Smultron, SubEthaEdit, Coda, the Transmit built-in editor, and many others will work for this). Open the sociallinks.php in the main plugin folder.

Look down the code for the

$definitions array

and add another definition at the end (so that you would be at

array(22

if you are starting from the stock code). Add this code.

 /sociallinks/sociallinks.php
array(22,'yfrog.jpg','http://yfrog.com/%userid%','Enter your Twitter handle','yFrog'),

If you’re not familiar with PHP then you may need this help: The first quoted block (that’s an apostrophe there, it’s the non-shifted quotation mark) is the location of the image relating to that service, in this case yFrog.png. This is what we just edited and put in the /images folder of the plugin. The next portion is the link that this will go to when clicked to bring you to your user page, excluding the feature that uniquely identifies your account. Where you see %userid% is where your user name will be inserted by this script in the management page.
The next block gives you instruction as to what to enter, in this case yFrog uses your Twitter handle for your page. Finally, you have to state what this service is called.
Save. Now rename the old version of the script (sociallinks-1.php?) and upload the new script with the name sociallinks.php. Now you can go to the administrative page and select your new service. If there are errors, it’s most likely because you forgot a comma after each entry except for the last, forgot to close a quote, used the mismatched quotes, or didn’t use quotes at all.

fwiw here is what I have: (starting at line 67 of the PHP file)

 /sociallinks/sociallinks.php
array(20,'technorati.jpg','http://technorati.com/people/technorati/%userid%/','Enter your Technorati username.','Technorati'),
array(21,'friendfeed.png','http://friendfeed.com/%userid%','Enter your FriendFeed username.','FriendFeed'),

/*I added the rest of theses --BradArsenault (Nov 28/09)*/
/*Note the changes I made to TwitPic and yFrog -- these are the correct base URLs*/

array(20,'technorati.jpg','http://technorati.com/people/technorati/%userid%/','Enter your Technorati username.','Technorati'),
array(21,'friendfeed.png','http://friendfeed.com/%userid%','Enter your FriendFeed username.','FriendFeed'),
array(22,'yfrog.png','http://www.yfrog.com/froggy.php?username=','Enter your Twitter handle','yFrog'),
array(23,'twitpic.png','http://twitpic.com/photos/%userid%','Enter your Twitter handle','TwitPic'),
array(24,'qik.jpg','http://qik.com/%userid%','Enter your Qik user account','Qik'),
array(25,'wakoopa.png','http://wakoopa.com/%userid%','Enter your Wakoopa user account','Wakoopa')
);

If you want to use the icons that I used you can download them here (icons.zip)