Look carefully at the bottom of this post - and other posts in this blog. Right below "Topics", do you see "Share This Post!"? The "Share This Post!" section is what we call Social Networking. It lets your readers - hopefully those who have social networking memberships - bookmark your posts in the social networking services. In my blogs, we currently have De.licio.us, Digg, FaceBook, StumbleUpon, Technorati, and Twitter.
If one of your readers has a membership in one of those services, and wishes to share your post with other members, he / she has only to click on the icon, or the adjacent text link, and the selected service will bookmark the post (subject to the normal site bookmarking procedure, which varies by service).
In order to make that happen, the icon / shortcut contains code which automatically picks up the Title and / or URL of the post being viewed.
The code has to be part of the post template, to pick up the Title / URL, which are XML variables. This works only for a Layouts template, and requires manual installation into the template code. No HTML gadget here, and no GUI Page Elements wizard. Sorry.
You have to edit the template code, and insert this into the post footer, which is part of the post template.
Here is the current XML code involved in my "Share This Post!" paragraph. There are 12 sections of code, here - 6 buttons, and 6 text links - look at the "Share This Post!" section below this post. All 12 sections have to be part of one logical line, so they display as one line below each blog post (though possibly flowing onto another physical line, if the post column width requires). Note that if you wish to copy this code, you'll need to be very careful with your copying, and check afterwards (and remove) any gratuitous line breaks, which may or may not be present!
Need I remind you to back up the template, before and after making this change?
You'll want to Edit Template HTML, and select "Expand Widget Templates". Find a section of code similar to:
and add the above code, giving you:
Note that this example puts the code into the third line of the footer. You're welcome to put your code into any line that you wish.
Just do it, Save Template, and test it, and backup the template, before and after making the change (yes, I said that above too!).
If one of your readers has a membership in one of those services, and wishes to share your post with other members, he / she has only to click on the icon, or the adjacent text link, and the selected service will bookmark the post (subject to the normal site bookmarking procedure, which varies by service).
In order to make that happen, the icon / shortcut contains code which automatically picks up the Title and / or URL of the post being viewed.
The code has to be part of the post template, to pick up the Title / URL, which are XML variables. This works only for a Layouts template, and requires manual installation into the template code. No HTML gadget here, and no GUI Page Elements wizard. Sorry.
You have to edit the template code, and insert this into the post footer, which is part of the post template.
Here is the current XML code involved in my "Share This Post!" paragraph. There are 12 sections of code, here - 6 buttons, and 6 text links - look at the "Share This Post!" section below this post. All 12 sections have to be part of one logical line, so they display as one line below each blog post (though possibly flowing onto another physical line, if the post column width requires). Note that if you wish to copy this code, you'll need to be very careful with your copying, and check afterwards (and remove) any gratuitous line breaks, which may or may not be present!
<p class='post-footer-line post-footer-line-3'>
<strong>Share This Post! </strong> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'><img alt='Del.icio.us' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZaxAEaK1NLRCpVDzylmnsuKP6OdeIq8DNPOHmF3_pj76byrI_YLn6LFP-sca7hwHJ3-FNBeG7JpiwEWUdnauYgAXcxUXn0NGKle3W_7vV2x9oyqkPyUWKb-1-iRLkR3Igs_5mQ/s400/De.licio.us+Icon.gif' width='16'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'>Del.icio.us</a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'><img alt='Digg' border='0' height='14' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_callYHxzgoS3uVhaKjlAbkW6sngh6dPEGSGl9Irb44BcCwf1p4krTvXpm-gfrU8PPCra6SULV3cLYoYxgN7tgs6-gTxvSdCUnE_w-UwH2jHlHgTqWSslsQt0396YJKhp7sPQw/s400/Digg+Icon.gif' width='16'/></a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'>Digg</a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'><img alt='Facebook' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3tG0QSlb_HmyfyiwY9lWdkb4QX5MUoHCLD8oQMbMVdst_0N4B1s2sMzwpVqI9RSNcFlOdzQusiBqttvCYLczhPI_MkkfhzNvyYmCyRujn0B3pvBUrPmaT15pcPebVfYgTO_szA/s400/Facebook+Icon.png' width='14'/></a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'>Facebook</a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJz5buiovZdQ6ivCuSOVZ6fF2OO0s2rtDsMvo9ASyIcyDvd40ZmxFUGvUjaIp5P3eQF6dVPKdahnxFKLMPkx5YhFGiT6n4ajOMTGTBhPcW7TVRx1BTWoVQSqnjA002UTfHSir7A/s320/StumbleUpon+Icon.gif' width='16'/></a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'>StumbleUpon</a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCAxF3fvpLV4FfXlC9MPp2Y7bwTw0ZTloVTJphRQOIDgiGBofVkeQw4Mpgcjs-5csUMXelQYLBew7J4WbGN7Y6Y_4gETNtApppPRZ5GqVHjgCyd8EeJ428bGM8iyX5_nn3IEjng/s400/Technorati+Icon.gif' width='14'/></a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'>Technorati</a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'><img alt='Twitter' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqtGDj8n8pifEico9E1wmkwuwQnA0ZY5MkNljVyvpOSyYWO1_RAx_UKuYblkda1vlTJ4nW99QZvNhd5zPdAFcPV9K4l_G_VcGF7_MOMue8rvCOHIL7SQo-VjM_w-786ppV1M_jeg/s400/Twitter+Icon.png' width='16'/></a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'>Twitter</a>
</p>
Need I remind you to back up the template, before and after making this change?
You'll want to Edit Template HTML, and select "Expand Widget Templates". Find a section of code similar to:
<p class='post-footer-line post-footer-line-3'> </p>
and add the above code, giving you:
<p class='post-footer-line post-footer-line-3'> <strong>Share This Post! </strong> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'><img alt='Del.icio.us' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkZaxAEaK1NLRCpVDzylmnsuKP6OdeIq8DNPOHmF3_pj76byrI_YLn6LFP-sca7hwHJ3-FNBeG7JpiwEWUdnauYgAXcxUXn0NGKle3W_7vV2x9oyqkPyUWKb-1-iRLkR3Igs_5mQ/s400/De.licio.us+Icon.gif' width='16'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'>Del.icio.us</a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'><img alt='Digg' border='0' height='14' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_callYHxzgoS3uVhaKjlAbkW6sngh6dPEGSGl9Irb44BcCwf1p4krTvXpm-gfrU8PPCra6SULV3cLYoYxgN7tgs6-gTxvSdCUnE_w-UwH2jHlHgTqWSslsQt0396YJKhp7sPQw/s400/Digg+Icon.gif' width='16'/></a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'>Digg</a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'><img alt='Facebook' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3tG0QSlb_HmyfyiwY9lWdkb4QX5MUoHCLD8oQMbMVdst_0N4B1s2sMzwpVqI9RSNcFlOdzQusiBqttvCYLczhPI_MkkfhzNvyYmCyRujn0B3pvBUrPmaT15pcPebVfYgTO_szA/s400/Facebook+Icon.png' width='14'/></a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'>Facebook</a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJz5buiovZdQ6ivCuSOVZ6fF2OO0s2rtDsMvo9ASyIcyDvd40ZmxFUGvUjaIp5P3eQF6dVPKdahnxFKLMPkx5YhFGiT6n4ajOMTGTBhPcW7TVRx1BTWoVQSqnjA002UTfHSir7A/s320/StumbleUpon+Icon.gif' width='16'/></a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'>StumbleUpon</a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCAxF3fvpLV4FfXlC9MPp2Y7bwTw0ZTloVTJphRQOIDgiGBofVkeQw4Mpgcjs-5csUMXelQYLBew7J4WbGN7Y6Y_4gETNtApppPRZ5GqVHjgCyd8EeJ428bGM8iyX5_nn3IEjng/s400/Technorati+Icon.gif' width='14'/></a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'>Technorati</a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'><img alt='Twitter' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqtGDj8n8pifEico9E1wmkwuwQnA0ZY5MkNljVyvpOSyYWO1_RAx_UKuYblkda1vlTJ4nW99QZvNhd5zPdAFcPV9K4l_G_VcGF7_MOMue8rvCOHIL7SQo-VjM_w-786ppV1M_jeg/s400/Twitter+Icon.png' width='16'/></a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'>Twitter</a> </p>
Note that this example puts the code into the third line of the footer. You're welcome to put your code into any line that you wish.
Just do it, Save Template, and test it, and backup the template, before and after making the change (yes, I said that above too!).
Comments
The template I have has < div class='post-footer-line post-footer-line-3' instead of < p.... (no spaces after the < ... I just couldn't post it otherwise...)
I read something about this type of thing not working well with AdSense, so I disabled it, still nothing.
I would love to integrate this into my site, but am not a hard-core programmer and am having some difficulty. Please advise.
Thank you for this resource!
(PS - I did check for bogus line breaks) ;)
This would be a great discussion item in BHF: How Do I?, or in Nitecruzr Dot Net - Blogging. We'll be posting a bit of code, and doing that here isn't done easily.