Att lägga till StumbleUpon till Google Blogger är föredömligt enkelt. Medan vi för Facebook behöver du inte göra avancerade förändringar av som när Like knappen lades till Blogger.
 |
 |
|
|
1. StumbleUpon knappen i HTML-koden för Layout | ||
 |
 |
Det är dock beroende på hur man väljer när knappen skapas göra vissa mindre förändringar av koden eftersom koden som StumbleUpon skriver ut i vissa fall är felaktig.
1. StumbleUpon knappen i HTML-koden för Layout
1. Gå till: www.stumbleupon.com/buttons/.
2. Välj utseendet på den knapp du vill använda.
3. Gå vidare till Select Your Site (bör ske automatiskt) och väljer Blogger.
4. Koden du får för knappen är anpassad Redigera HTML för Layout men måste skrivas om.
I koden StumbleUpon ger skrivs data:post.body ut innan knappen vilket kommer göra att hela inlägget undantaget titel och liknande skrivs ut igen.
Den felaktiga koden är:
<p><data:post.body/></p><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
Varför man gjort det vet jag inte men gissningsvis har de antingen kopierat in koden och fått med för mycket eller så saknas en funktion för att skicka med detta upp till StumbleUpon.
5. Skriv om koden genom att ta bort <p><data:post.body/>. Du får istället med mitt exempel (siffran kan variera beroende på vilket utseende du valde på knappen):
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
Du kan också få denna direkt genom att istället för Blogger välja Any web page or blog. Emellertid är det möjligt att StumbleUpon korrigerar problemet för Blogger och jag ska se till att e-posta dem om det.
6. För att lägga till koden i Redigera HTML gör du på samma sätt som för Facebook Like knappen.
2. Arrangera flera knappar tillsammans
En tabell (med <table>) eller liknande (table är en ganska gammal konstruktion och senare möjligheter används idag troligen oftare och är antagligen bättre) kan göra det enklare att få flera olika knappar att hamna rätt relativt varandra.
För Nyhetsbloggen är denna kod just nu:
<table cellpadding='2'>
<tr>
<td valign='top'>
<a class='google-buzz-button' data-button-style='small-button' data-locale='sv' href='http://www.google.com/buzz/post' reL='nofollow' title='Skicka till Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/> </td>
<td valign='top'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</td>
<td valign='top'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:blog.url + "&layout=button_count&action=like&width=100&show_faces=false"' frameborder='0' height='20' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px' width='100px'/>
</td>
</tr>
</table>
Vill man ha samma utseende bör det i princip bara vara att kopiera in koden om sajten använder Google Blogger. För andra sajter kommer Facebook Like inte fungera och för att visa Facebook Like behöver man istället följa denna guide:
För Nyhetsbloggen ser resultatet ut enligt:
3. StumbleUpon knappen i HTML/Javascript Gadget
Vill du inte editera HTML-koden för layouten går knappen givetvis också att lägga den i en gadget:
1. I Select Your Site väljer du Any web page or blog.
2. Koden du får är:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
3. Den kopierar du in i en HTML/Javascript Gadget du redan har i din layout eller lägger du till en ny.
4. Börja med att gå in på Layout.
5. Har du en HTML/Javascript Gadget där den passar klickar du på Redigera för denna och kopierar in koden:
6. Behöver du lägga till en ny klickar du på Lägg till en gadget för den del av layouten där du vill ha den. Välj sedan HTML/JavaScript:
7. Du kan ändra ordningen dina gadgets visas i genom att dra dem i layouten.
