Monday, 1 November 2010

Tina's Tutorials: "Sharing is" Social Networking Widget

Many of you might have seen the awesome "Sharing is Caring" buttons under many blog posts, including mine. You can see a demo of what it does at the bottom of this post. By clicking on one of the pop-up buttons, people are able to share your post via social networking systems.


This tutorial, part of my series of tutorials, will show you how to get this awesome and handy widget.


Step 1:
First, open up your dashboard in another tab or window. Go to Design, then Edit HTML, and tick the “Expand Widget Template”.

Step 2:
Put your cursor in the box below, press CTRL+ A, then CTRL+C.
Go back to your HTML, and press CTRL+Fand type in "</head>" (without quotations).
Paste the code before </head> by pressing CTRL+V  with your cursor in front of </head>.


Code 1:


Step 3:
Now, as before, copy everything in the box below by pressing CTRL+ A, then CTRL+C.
Go back to your HTML again, and press CTRL+F and type in "JumpLink".

Now, look for </b:if>, which should be several lines of code before JumpLink.
You need to paste the code I have after </b:if> by pressing CTRL+V.

(The reason for this is because the JumpLink code codes for "Read More>>", and you want this to go before your social networking widget.)

Code 2:



Now, remember to SAVE your code.

Step 4 (optional):
For those of you that have Twitter, please follow this step! In your HTML, press CTRL+F (⌘+F) and search for data:blog.title. Then add + " (@TWITTERNAME)" straight afterwards. Then if people tweet your posts, your twitter name will show up.

SAVE your code.
Note: If you have an RSS, you don't need to change anything. The code will link to your feed by default.

Step 5 (optional):
Some of you might want to customise the default "Sharing is Caring" caption. To do this, you must change the image.

Here are some different options: 
To change it, find http://img259.imageshack.us/img259/892/bookcoutureblogspotcoms.png in your code, and replace it with one of the following.

http://2.bp.blogspot.com/_DUmSBN5Hxrw/TMuQir1vnSI/AAAAAAAAASc/NAT4oEjc9FM/s1600/bookcouturesharingiscaring2.png

(I made this one, and you are free to use it if you wish.)
http://3.bp.blogspot.com/_DUmSBN5Hxrw/TL7KfyFuaII/AAAAAAAAAPs/jo0nk5pUSu8/s1600/bookcouture-sharethelove+copy.png


http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMcQe16YP-I/AAAAAAAAB7I/h0kYdQw_cTQ/s1600/share+the+knowledge.png


 http://4.bp.blogspot.com/_DUmSBN5Hxrw/TMuPzL6vPMI/AAAAAAAAASM/eDvr4RCvDlI/s1600/bookcouturesharethelove.png

 http://3.bp.blogspot.com/_DUmSBN5Hxrw/TMuPzm8t5AI/AAAAAAAAASQ/OC-jtTkrJzA/s1600/bookcouturesharethewealth.png

http://3.bp.blogspot.com/_DUmSBN5Hxrw/TMuP0IE7lQI/AAAAAAAAASU/eTYCGK2oW9s/s1600/bookcouturesharingiscaring.png

http://2.bp.blogspot.com/_DUmSBN5Hxrw/TMuP0rEsx3I/AAAAAAAAASY/6IAGv2-FbUI/s1600/bookcouturesharingissxy.png

Remember to SAVE your code.

Step 6 (optional):
Help others! Share this post by testing the widget below. As you can see, there are a myriad of options to choose from. Click on the RSS to subscibe, or Twitter to tweet my post.

Add me:
More tutorials from Tina...