Egna sociala bokmärken med WordPress

Efter att ha använt Sociable en längre tid för att visa sociala bokmärken så skapade jag för några dagar sedan mina egna bokmärken för att dela och spara mitt innehåll på sociala medier och nätverk, som Facebook, Twitter och Pusha för att ta några exempel.

WordPress-koder för länkarna

Här är de koder du kan använda för att göra egna sociala bokmärken, länkar som lägger till och delar ditt innehåll genom sociala medier. I mitt fall har dessa länkar lagt direkt i single.php i mitt tema, men möjligheten finns också till exempel att lägga till dem genom WordPress Shortcodes.

Dela på Bloggy

<a rel="nofollow" class="bloggy" target="_blank" href="http://bloggy.se/home?status=<?php the_title(); ?>+<?php the_permalink() ?>">Dela på Bloggy</a>

Pusha inlägget

<a rel="nofollow" class="pusha" target="_blank" href="http://www.pusha.se/posta?url=<?php the_permalink() ?>">Dela på Pusha</a>

Dela på Facebook

<a rel="nofollow" class="facebook" target="_blank" href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>">Dela på Facebook</a>

Dela på Twitter

<a rel="nofollow" class="twitter" target="_blank" href="http://twitter.com/home?status=<?php the_permalink() ?>">Dela på Twitter</a>

Dela på LinkedIn

<a rel="nofollow" class="linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>&amp;source=<?php bloginfo('name'); ?>">Dela på Linked In</a>

Dela på Google

<a rel="nofollow" class="google" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>">Dela på Google Bookmarks</a>

• Visa HTML-koden för mina ikoner i sin helhet (Textfil)

CSS-sprite för ikonerna

Visserligen kan man använda textlänkar för att ge besökarna möjlighet att interaktera med innehållet, men att använda snygga och stora ikoner brukar underlätta för läsarna att göra det du vill, dela innehållet.

Jag har använt ikonpaketet Aquaiticus Social, men gjort egna ikoner för Pusha och Bloggy som ni självklart också får använda. Tillvägagångssättet som jag använt är att använda en stor bild som bakgrund och sedan positioneras varje länk med background-position. Anledningen till detta är främst att minimera antal HTTP-förfrågningar.

Det finns även två versioner av varje ikon – en med okapacitet som visas normalt och en som visar med full synlighet när man för muspekaren över ikonen (hover).

CSS för ikonerna

Som ni kan se här under, så har varje länk (a) en bestämd höjd och bestämd längd. Samma bakgrund är applicerad på länkarna, men sedan används bakgrundspositionering för att visa vilken del av bildfilen som ska visas, utefter hur ikonerna är positionerade i bildenfilen.

Varje ikon har en egen klass (.facebook, .pusha) som bestämmer det, samt en hover-klass som flyttar bilden som visas till den versionen med full synlighet.
[sourcecode language='css']
#content .share-box ul{list-style-type: none; margin: 0 0 0 0px;}
#content .share-box li{float: left}
#content .share-box a{
display: block;
float: left;
margin: 0 15px 0 0 ;
width: 32px;
height: 32px;
background: url(images/sprite-social.png) no-repeat;
text-indent: -9000px; }

#content .share-box a.facebook{background-position: 0 0; }
#content .share-box a.facebook:hover{background-position: -32px 0; }
#content .share-box a.twitter{background-position: 0 -33px; }
#content .share-box a.twitter:hover{background-position: -32px -33px; }
#content .share-box a.linkedin{background-position: 0 -65px; }
#content .share-box a.linkedin:hover{background-position: -32px -65px; }
#content .share-box a.google{background-position: 0 -99px; }
#content .share-box a.google:hover{background-position: -32px -99px; }
#content .share-box a.mail{background-position: 0 -132px; }
#content .share-box a.mail:hover{background-position: -32px -132px; }
#content .share-box a.bloggy{background-position: 0 -164px; }
#content .share-box a.bloggy:hover{background-position: -32px -164px; }
#content .share-box a.pusha{background-position: 0 -196px; }
#content .share-box a.pusha:hover{background-position: -32px -196px; }
[/sourcecode]

• Visa CSS för mina ikoner i sin helhet (Textfil)
• Visa bildfilen för mina ikoner i sin helhet (PNG-fil)

• Share on Twitter
• Share on Google+
• Share on Facebook