Social Links Without a Plugin: Part 1

Kris J — Tue, 04 May 2010 08:21:48 +0000

Hello all, Kris J here. Thought today I would share a quick and easy way to add social media links to your WordPress website without having to use another plugin. By using this method, you will gain full control over the look, placement and size of your social icon setup. The Final is what you can See and Use at the bottom of every post on this blog (Graphic Dreams).

First off you will need the basics: Notepad (or some other basic text editor), and a social media icon set. For this tut and setup, I’m going to use a great icon set made by Paul Robert Lloyd. It contains a nice assortment of sites to choose from, and different sizes to boot… So now that we have our basic tools, lets begin…

Create a new bank text file, and call it something like ‘simplesocial.php’ or something along those lines (just to save it for keep-sake). Within this we are going to add the Bookmarking Codes for the sites we want available to your readers.
Now many-many social media and bookmarking sites are out there, and you have to choose and find the right codes…right? Well I’ve simplified this and compiled a list of 30 Top sites, and the required php calls for your users to submit to. It’s good for reference. Download it Here.

For this tut I’ve selected: Delicious, Digg, Twitter, StumbleUpon, Facebook, Reddit, Identi.ca, LinkedIn, NewVine, Technorati, Yahoo Buzz.

Here is the html and php code I’m using:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//Delicious

//Digg

//Twitter

//StumbleUpon
< a rel="nofollow" href="http://www.stumbleupon.com/submit?url=&title=" title="Bookmark @ ">< img src=" " alt=""/>< /a>

//Facebook

//Reddit

//Identi.ca

//Linked In

//Newsvine

//Technorati

//Yahoo Buzz

Now that we have the sites and code selected, we need to add the Icons to the links. So now you have to choose what size of icons will work best. Be carefull, over-sized icons can make your page or site look wonky… choose respectfully.
For this tut I’m using 16px by 16px icons. Create, and upload a folder to your server named ‘images’… (if one dosen’t already exist…it should!). Upload your Icons. Add the address for each image to your bookmarking code, and remove the text name from above each link:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

" title="Share this article with your Twitter followers">

OK. We have our basic framework down. Now I will show you how and where to put this code so it shows up on your WordPress website. Continue reading the rest in part two by following the link below.

Social Links Without a Plugin: Part 2

Kris J — Tue, 04 May 2010 08:21:25 +0000

Lets start out by making our social link code a little lighter by removing any whitespace, and wrap it in a < div> tag (you really can wrap it in whatever your use requires you to):

1
2
3

" title="Share this article with your Twitter followers">

Depending on where you wish the bookmarks to show, you can add style to the ‘plugin’ by using css. Now I know my websites tend to change around, so css is a must. I’m not going to show you any css markup, since yours and my uses along with placing will be completly different. But, since I’ve wraped it in a < div> tag, lets give it an ID for easy referencing when using css:

Graphic Dreams Studio » PHP Tutorials

Social Links Without a Plugin: Part 1

Social Links Without a Plugin: Part 2