How to add your social bookmark icon into Thesis theme

FourBlogger December 25, 2009

{ 21 comments }

Social bookmarking is a good place to share, organize, and manage your web resources.They are lot of social bookmarking sites are available. The most popular social sites like twitter, facebook, digg, mixx, stumbleupon, reddit and faqpal. In these popular sites more people are sharing their web. To get traffic to your site submitting social bookmarking is a good thing. In this tutorial I will explain about how to add social bookmarking icon into your thesis theme.

Watch this video tutorial below:

Follow this step below:

Login to your wordpress admin panel.
Then upload your bookmark icon into the media library from your pc.
Note the every upload image url.
Then, go to appearance click widgets.
Now drag and drop the text widgets into the sidebar 1.
just copy and paste the code in text widgets.

<p><a rel="nofollow" href="http://your own url here">

<img src="http://your image path" border="0" alt="" /></a>

<a rel="nofollow" href="http://your twitter url here">

<img src="http://your image for twitter icon here" border="0" alt="" /></a></p>

7. you will see the href=”yourownurl” and img src=”your image path” replace with your url and uploaded image url.

8. If you want to add more icon links you should all within the paragraph<p> and</p> mentioned in the above code. If you and icons after </p> it will be displayed in vertical order.
9. Then click save.
10. Now you will see this icon into your webpage

Do you have any trouble while using this make a comment below?

{ 21 comments… add one }

mustafa February 18, 2010, 9:28 PM

there is something wrong things in this code i put code and image ways but it appereance only ” ”

Reply
- Suresh February 18, 2010, 11:45 PM
  
  hai mustafa,
  
  Now i checked this code is working fine. may be there is chance for misalignment while copying the code. try it once again it is working fine.
  
  Reply
mustafa February 19, 2010, 6:29 AM

yeah i did it but the buttons appear
x
y
z
but i want this x y z i use and not use space

Reply
- Suresh February 19, 2010, 11:12 AM
  
  hai mustafa,
  
  you should add all the icons link codes within the paragraph
  and as mentioned in post.
  if you add any icons after it will be displayed in vertical order..
  
  Reply
mustafa February 19, 2010, 4:21 PM

i cant do it allways it show hortizal oerder so i abandonto do it 🙂

Reply
- Suresh February 19, 2010, 6:42 PM
  
  hai,
  give your site name otherwise i cant figure out your problem..
  
  Reply
  - mustafa February 20, 2010, 4:33 AM
    
    please put right side and your image way after that i will change ways
    
    Reply
    - Suresh February 20, 2010, 10:38 AM
      
      hai mustafa,
      I cant access your wp-admin. I send you code via email copy and paste it in sidebar text widget and replace with your link..
      
      Reply
mustafa February 20, 2010, 11:43 PM

it dosent work ..

Reply
- Suresh February 21, 2010, 12:20 PM
  
  hai mustafa,
  check your site now it is working fine..
  
  Reply
Steve March 12, 2010, 10:42 PM

Excellent tutorial, thank you. I do have one question…I did this but when you click on the links, it does not open a new window to go to those social sites. How can I make it so it opens a new window (like yours) ?

Thanks!

Reply
- Suresh March 12, 2010, 11:13 PM
  
  hai steve,
  
  The code mentioned in the above post each link add target=”_blank” for opening the link in new window
  
  example <a target="_blank" rel="nofollow" href="http:….
  like this add in each link..
  
  Reply
SimonSaysMom May 21, 2010, 6:32 AM

Thanks! I wanted the Icons in my banner (like you have it) but for the moment this will do!

Reply
- Suresh May 21, 2010, 10:40 AM
  
  hai SimonSaysMom,
  
  To add social bookmark icons in header follow below tutorial
  http://fourblogger.com/how-to-add-social-bookmarking-icons-in-widgetized-header-of-thesis-theme/
  
  Reply
nina May 26, 2010, 6:59 AM

Hi,

Can you show me how to add the other icons and the code for facebook, rss, and youtube?
I can only seem to get twitter

Thank you!

Reply
- Suresh May 26, 2010, 2:33 PM
  
  hai nina,
  I saw your site all the icons are available in the sidebar..
  
  Reply
Tobi Rhayne August 7, 2010, 10:22 PM

Great tutorial, thank you.

My question is say I only want 3 icons. I figures out the align=center thing but was wondering how to adjust the spacing between the icons.

I’m not a coder but I can cut and paste 🙂

Any ideas?

Thanks

Reply
- Pascal August 9, 2010, 6:49 PM
  
  Hi tobi,
  
  Our thesis team totally move to our membershipsite fourbloggerclub. so nowadays we are solve any single thesis issue for $5 only. it is ok for you. send your requirements.
  contact us via contact form
  
  Reply
Pratik October 16, 2010, 7:37 AM

Hi,

i have put the social icons as per your given tutorial.
it’s displaying perfect..but links are not coming (hand cursor is not coming also onclick it doesn’t open url)

please help me for this…..
it’s urgent.

Reply
jerel December 9, 2010, 1:12 AM

I am having the same pronlem as the guy with the first comment,it is appearing
x
y
z
when i want it xyz
I did all the steps right, someone help plz

Reply
murat February 6, 2012, 4:23 PM

Hi, Thanks for the tutorial.
It works as described, but I have a problem. I want rss feed icon and “twitter follow button” in one line horizontally. If I use any button image and code for twitter, it stays where it should. But if I use original button code from twitter(which I prefer) it aligns to the next line. How can I change this?

Reply