WordPress.org

Ready to get started?Download WordPress

Forums

Add social bookmarking links without plug-in (3 posts)

  1. DrummerHead
    Member
    Posted 5 years ago #

    Ok people, I'm here to share with you a possible success (you'll be the judge)

    I was looking for a way to add social bookmarking icons to my blog. I found some plugins like AddThis and ShareThis but they required registration and I was not sure of what these plugins could be doing behind the scenes.

    So I found a way to make these links show editing single.php

    Basically you add

    <ul id="bookmarks">
    	<li>
    		<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>" rel="nofollow" title="Postear a Facebook">
    			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/facebook.png" alt="Postear a Facebook" />
    		</a>
    	</li>
    	<li>
    		<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" rel="nofollow" title="Agrega a Digg">
    			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/digg.png" alt="Agrega a Digg" />
    		</a>
    	</li>
    	<li>
    		<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>;title=<?php the_title(); ?>" rel="nofollow" title="Agrega a del.icio.us">
    			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/delicious.png" alt="Agrega a del.icio.us" />
    		</a>
    	</li>
    	<li>
    		<a href="http://twitthis.com/twit?url=<?php the_permalink(); ?>" rel="nofollow" title="Agrega a Twitter">
    			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/twitter.png" alt="Agrega a Twitter" />
    		</a>
    	</li>
    	<li>
    		<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" rel="nofollow" title="Agrega a StumbleUpon">
    			<img src="http://www.tusitioweb.com/lugardondeseencuentretuimagen/stumble.png" alt="Agrega a StumbleUpon" />
    		</a>
    	</li>
    </ul>

    to single.php around line 61 (after the div with the <i>CLASS</i> ENTRY ends) and bingo, you'll have your icons without having to hand-type any sort of url or worrying about their existence at all. I chose only five major social bookmarking system things because I think that 22 different icons looks a bit bloated and over the top, but you can add them if you want.

    This could be handy for theme developers, so they can just insert these in their themes or give the option to the user to show them or not.

    Don't forget to change the placeholder image paths and the link titles and img alt to whatever you want (In the above chunk of code it's all in spanish, so you will probably wanna change that)

    You can find some awesome social bookmarking images to use at http://webdesignledger.com/freebies/the-best-social-media-icons-all-in-one-place

    Moreover, you will probably wanna give some style to that list, some generic css style declarations like these might do the job for just about any sort of theme, but of course you can juice them up a gusto:

    ul#bookmarks {
    	list-style:none;
    	padding:0;
    	margin:15px 15px 15px 0;
    }
    ul#bookmarks li {
    	float:left;
    	margin:0 7px 0 7px;
    }
    
    ul#bookmarks li a {
    	display:block;
    	padding:5px;
    }

    Ok, this was the 2 minutes tutorial that I just made in... two minutes because I think that people here are generally more accustomed with how wp works and I don't have to explain the most basics of things, but if you need more help, you can check the more thorough tutorial that I made at http://www.pixeina.com/blog/2009/04/links-social-bookmarking-wordpress/ the problem is that you will probably not understand it because it's in spanish :)

    And finally, I just wanna ask for you to click on the icons to see if in fact the article gets added (they are at the bottom). It's just to see if it works, because I don't have an account on all those system things (you can delete the "like" if you want afterwards, I just need verification of functioning)

    I hope this helps anyone :) and I would really thank you if you told me in this thread if the links actually work as intended.

    See ya! :)

  2. geekette
    Member
    Posted 5 years ago #

    Hey DrummerHead,

    I tried it out, checked the links and it all works! I like to minimize the # of plugins I use (makes troubleshooting easier), so this was helpful. I implemented it at Ceci et Cela

    Thanks!

  3. DrummerHead
    Member
    Posted 5 years ago #

    Hey, I'm glad I helped! :) If you wanna throw a commentary at the article of this technique at http://www.pixeina.com/blog/2009/04/links-social-bookmarking-wordpress/ it would be awesome (you'd be my first real comment, the others were spam :) ) and write in English, it's all right.

    I like your blog, the images in the articles are impressive.

    One thing thou, at resolutions higher than 1024*768 the sidebar floats to the right beyond the background color.

    you could "fix" that by adding

    body {
    background-color: #f6f2cd;
    }

    to your CSS (you already have a body declaration, so add it to that)

    Hope also helps :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.