Displaying social buttons like the Twitter button, the Facebook button, the RSS Button or buttons of whatever social network you favour into your WordPress Theme is nothing difficult. There are lots of free WordPress plugins that does the job easily without you having to mess with any codes or any WordPress files. However, noting beats the thrill of being able to create your own social buttons for your WordPress Theme and display them in your own unique way without any third party plugin.
Display The Social Buttons Differently From Others
Being able to display the social buttons a little bit different from the masses will not get you more followers, subscribers, re-tweets or likes. Authors of plugins or whatever scripts will always make outlandish claims that your subscribers, followers, re-tweets and likes will increase a thousand fold if you use their products or follow their method. Most, if not all the time, you will find the claims to be false. It is all sales talk. Salesmen always talks big.
So please do not have the notion that by displaying your social buttons or whatever forms in a certain way can improve your social standings. It won’t.
Then why do we want to take all the trouble to create something that is of no real value or return?
The answer is simple. Just like masturbation, it is solely for self satisfaction and to feed the ever hungry self ego.
When we create something all by ourselves and see it function the way we want it, the orgasmic feeling of self satisfaction is enormous and the sense of accomplishment is additively high.
Getting The Social Buttons Ready For Your WordPress Theme
The first step to achieve that satisfaction is to get all the social buttons ready. There are tons of them available for free online, but for this example I am using the pack from Studiopress because it includes the Pinterest button.
Pinterest, if you all are still hiding in the caves is the latest rising star in the Internet social scene. It is still by invitation only and you can request for an invite. Once you are in, you can then invite your friends.
Anyway, once you have found the social buttons you want to use for whatever social networks you are part of, you will need to arrange and re-size the image to exactly the same as the one you see below. You can right-click and save that image to your computer if you want to use the same ones.
Once the image is ready, you must upload it to your Theme’s images folder. That is the folder WITHIN the Theme you are using. Simply use your favourite FTP Client, Log In to your server, go Public-Html-Your Domain Folder – Wp-Contents – Themes-Your Theme Folder – Images.
For Catalyst Theme users. just upload the ready image using the Image Uploader under Dynamik Options.
The HTML Codes For Displaying The Social Buttons
Once the image is in place, copy these HTML codes below.
<!--Social Buttons--!>
<ul id="navigationMenu">
<li>
<a class="fb" href="http://your-facbook-profile">
<span>Like Me</span>
</a>
</li>
<li>
<a class="twitter" href="http://your-twitter-pagel">
<span>Follow Me</span>
</a>
</li>
<li>
<a class="rss" href="http://your-feedburner-id">
<span>Subscribe</span>
</a>
</li>
<li>
<a class="gplus" href="http://your-gplus-page">
<span>Add Me</span>
</a>
</li>
<li>
<a class="pinterest" href="http://your-pinterest-page">
<span>Pin Me</span>
</a>
</li>
</ul>
<!--end social buttons--!>
Remember to change the file path to that of yours in all the social networks. For example, your Facebook URL will be something like this : http://facebook.com/yourprofilename.
You can also replace the text within the span tag to whatever you like. Just do not use too many words.
That done, go to Appearance – Editor in your WordPress Dashboard.
Look for your header.php file. All the codes above must be in the header php file so that the social buttons will appear in all your pages.
For this example, I am using the WordPress Default Theme, TwentyEleven. The above codes were pasted immediately after the closing head tag.
Generally, it should be okay if you paste it anywhere as long as it is in the header php file. Of course then, common sense will tell you that is will be best to paste it where any part of the existing codes have ended.
For Catalyst Users.
Simply go to Catalyst – Advanced Options – Custom Hook Boxes.
Add New Hook Box – Fill in the Name Field with a name you prefer – Choose any hook available under Header Hooks – Priority 1 – Hooked
Choose all the layouts that you want these social buttons to be displayed. Paste in the codes in the box.
Styling The Social Buttons In Your WordPress Theme
If you check your Theme now without any css styling, you will only see text links and nothing else. To make it unique, we must style it. Copy the CSS codes below.
/*navigation buttons*/
#navigationMenu {
position:fixed;
margin-left:-60px;
list-style:none;
}
#navigationMenu li{
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
height: 37px;
right:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Arial', Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url('images/navigation2.png') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Facebook Button */
#navigationMenu .fb { background-position:0 0;}
#navigationMenu .fb:hover {background-position:0 -39px;}
#navigationMenu .fb span{
background-color:#ffffff;
color:#777777;
text-shadow:1px 1px 0 #cccccc;
border: 1px solid #dddddd;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
/* Twitter Button */
#navigationMenu .twitter { background-position:-38px 0;}
#navigationMenu .twitter:hover { background-position:-38px -39px;}
#navigationMenu .twitter span{
background-color:#ffffff;
color:#777777;
text-shadow:1px 1px 0 #cccccc;
border: 1px solid #dddddd;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
/* Rss Button */
#navigationMenu .rss { background-position:-76px 0;}
#navigationMenu .rss:hover { background-position:-76px -39px;}
#navigationMenu .rss span{
background-color:#ffffff;
color:#777777;
text-shadow:1px 1px 0 #cccccc;
border: 1px solid #dddddd;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
/* Gplus Button */
#navigationMenu .gplus { background-position:-114px 0;}
#navigationMenu .gplus:hover{ background-position:-114px -39px;}
#navigationMenu .gplus span{
background-color:#ffffff;
color:#777777;
text-shadow:1px 1px 0 #cccccc;
border: 1px solid #dddddd;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
/* Pinterest Button */
#navigationMenu .pinterest { background-position:-152px 0;}
#navigationMenu .pinterest:hover { background-position:-152px -39px;}
#navigationMenu .pinterest span{
background-color:#ffffff;
color:#777777;
text-shadow:1px 1px 0 #cccccc;
border: 1px solid #dddddd;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
In line 42, remember to change the image file name to the one you are using
Paste all these codes into your WordPress Theme Stylesheet.
For Catalyst Users, paste them into Advanced Options- Custom Css.
How To Align The Social Buttons
Your theme will have different dimensions and so the buttons might be hidden or too far away fro your main content. Adjusting the alignment of the social buttons can be done from line 3 to line 6 in the above provided codes.
You can increase or decrease the margins to suit your blog theme.
You can also add some top margins if you think it is too close to the top. e.g.
#navigationMenu {
position:fixed;
margin-left:-60px;
margin-top: 300px;
list-style:none;
}
You can also float the buttons to the right if you prefer. e.g.
#navigationMenu {
position:fixed;
float: right;
margin-left:1020px;
margin-top: 300px;
list-style:none;
}
Note that if you float it right, the left margin is no more a negative value. The margin will be the total width of your layout.
Be reminded that CSS codes will not break your Theme, so relax and experiment with the widths, margins and whatnots. Most of the time, it is all trial and error.
How The Social Buttons Looks In Twenty Eleven WordPress Theme And The Catalyst Theme.
It is difficult to describe the “special effects” of displaying the Social Buttons with the above codes. Here’s a live demo of how it will look in the TwentyEleven Theme and the Catalyst Theme.
The TwentyEleven Theme is displaying the Social Buttons without any changes to the CSS codes.
The Catalyst Theme displays the Social Buttons on the right with some top margins and the spanned text moved from left to the right.
Share This Video With Your Readers.
credits:
codes re-tailored from the original by: TutorialZine
Social buttons from: StudioPress Social Media Icons
Download TwentyEleven Theme
Download Catalyst Theme