Chithravishesham
Sankethikam
Kaliyarangu Grahanam Nishchalam
സാങ്കേതികം - ഗ്രാഫിക് ഡിസൈന്‍ ട്യൂട്ടോറിയലുകള്‍, ബ്ലോഗര്‍ വിഡ്ജറ്റുകള്‍...

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Malayalam Blogger Profile. Powered by newnmedia.

Wednesday, April 7, 2010

സോഷ്യല്‍ ഷെയറിംഗ് ബട്ടണുകള്‍ (Social Sharing Buttons)

Social Share Buttons. Post by Haree for Sankethikam Blog.
ഓര്‍ക്കുട്ട്, ഫേസ്ബുക്ക്, ട്വിറ്റര്‍ എന്നിങ്ങനെ ഒരുപിടി സോഷ്യല്‍ നെറ്റ്‌‌വര്‍ക്കിംഗ് സേവനങ്ങളാണ് ഇന്ന് ഇന്റര്‍നെറ്റില്‍ ലഭ്യമായിരിക്കുന്നത്. സൌഹൃദങ്ങള്‍ പുതുക്കുവാനും പുതിയവ തേടുവാനും എന്നതിനൊപ്പം തന്നെ ആശയങ്ങളും ചിത്രങ്ങളും ലിങ്കുകളുമൊക്കെ പ്രചരിപ്പിക്കുന്നതിനും ഈ സൈറ്റുകള്‍ ഉപകരിക്കും. ഒരു ബ്ലോഗുടമയെ സംബന്ധിച്ചിടത്തോളം ബ്ലോഗ് പോസ്റ്റുകള്‍ കൂടുതല്‍ വായനക്കാരിലെത്തിക്കുന്നതിനാണ് സോഷ്യല്‍ നെറ്റ്‌വര്‍ക്കിംഗ് സൈറ്റുകള്‍ സഹായകമാവുക. ഒരു വായനക്കാരന് ഇഷ്ടമായ ഒരു പോസ്റ്റ് ഇത്തരം സൈറ്റുകളില്‍ ഷെയര്‍ ചെയ്യുവാന്‍ സഹായിക്കുന്ന സോഷ്യല്‍ ഷെയറിംഗ് ബട്ടണുകള്‍ ബ്ലോഗില്‍ ചേര്‍ക്കുന്നത് ഈ ലക്ഷ്യം സാധിച്ചെടുക്കുവാന്‍ സഹായകരമാണ്.

ഗൂഗിള്‍ ബസ്, ഫേസ്‌ബുക്ക്, ട്വിറ്റര്‍ എന്നീ പ്രാചാരത്തില്‍ മുന്നിലുള്ള സൈറ്റുകളിലേക്ക് പോസ്റ്റുകള്‍ ഷെയര്‍ ചെയ്യുവാനായി ഉപയോഗിക്കാവുന്ന ബട്ടണുകള്‍ എങ്ങിനെ നിര്‍മ്മിച്ചെടുക്കാം എന്നതാണ് ഇവിടെ വിശദമാക്കിയിരിക്കുന്നത്. പുറമേ നിന്നുള്ള ജാവസ്ക്രിപ്പ്റ്റുകള്‍ ഒന്നും ഉപയോഗിക്കാതെ, അതാത് സൈറ്റുകള്‍ തന്നെ നല്‍കുന്ന ഷെയര്‍ ബട്ടണ്‍ സൌകര്യം ചെറിയ ചില പുതുക്കലുകളോടെ അവതരിപ്പിക്കുകയാണിവിടെ. ഷെയര്‍ ചെയ്തവരുടെ എണ്ണവും മറ്റും കാണിക്കുന്ന തരത്തില്‍ വിപുലപ്പെടുത്തുവാന്‍ ജാവസ്ക്രിപ്റ്റും മറ്റും ഉപയോഗിച്ചുള്ള ബട്ടണുകളും വിവിധ സൈറ്റുകളില്‍ ലഭ്യമാണ്.

ആദ്യമായി ഇപ്രകാരം ചേര്‍ക്കുവാനായി മൂന്ന് ഗ്രാഫിക്കുകള്‍ ആവശ്യമുള്ള വലുപ്പത്തില്‍ ഉണ്ടാക്കിയെടുക്കുക. അവ ഏതെങ്കിലുമൊരു സെര്‍വ്വറിലേക്ക് ചേര്‍ക്കുക. (ഉദാ: Google Sites) അപ്രകാരം ചേര്‍ത്ത മൂന്നു ഗ്രാഫിക്കുകളാണ് ചുവടെ.




100 x 20 വലുപ്പത്തിലുള്ളവയാണ് ഈ മൂന്ന് ബട്ടണുകളും. ഓരോന്നിന്റെയും URL വിലകള്‍ ചുവടെ നല്‍കിയിരിക്കുന്നു. ആവശ്യമുള്ളവര്‍ക്ക് ഈ ബട്ടണുകള്‍ തന്നെ ഡൌണ്‍ലോഡ് ചെയ്ത് ഉപയോഗിക്കാവുന്നതാണ്.

http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_buzz.png
http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_facebook.png
http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_twitter.png
ഇവയെ ഒരു DIV ടാഗില്‍ ഉള്‍ക്കൊള്ളിക്കുകയാണ് അടുത്ത പടി.

<!-- Social Sharing Buttons Start -->
<!-- ============================ -->
<div style="background:FF9; padding:5px; clear:both; float:right; height:70px; width:100px; border:#996 dotted thin;">
<img src="http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_buzz.png" title="Share on Buzz."/>
<img src="http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_facebook.png" title="Share on Facebook."/>
<img src="http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_twitter.png" title="Share on Twitter."/>
</div>
<!-- Social Sharing Buttons End -->
<!-- ========================== -->
DIV style ആയി നല്‍കിയിരിക്കുന്ന height, width വിലകള്‍ ബട്ടണുകള്‍ക്ക് അനുസൃതമായി വേണം നല്‍കുവാന്‍. അടുത്തതായി ഓരോ ബട്ടണ്‍ ചിത്രവും ലിങ്കുകളാക്കി മാറ്റുകയാണ് വേണ്ടത്. ലിങ്കുകള്‍ കൂടി ചേര്‍ക്കുമ്പോള്‍ ലഭ്യമാവുന്ന കോഡാണ് ചുവടെ നല്‍കിയിരിക്കുന്നത്.

<!-- Social Sharing Buttons Start -->
<!-- ============================ -->
<div style="background:FF9; padding:5px; clear:both; float:right; height:70px; width:100px; border:#996 dotted thin;">
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title + "&srcURL=" + data:blog.homepageUrl' target='_blank' title='Share on Buzz.'><img src="http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_buzz.png"/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='Share on Facebook.'><img src="http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_facebook.png"/></a>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:blog.title + ": " + data:post.url' target='_blank' title='Share on Twitter.'><img src="http://sites.google.com/site/sankethikam/20100407_social-share-buttons/button_twitter.png"/></a>
</div>
<!-- Social Sharing Buttons End -->
<!-- ========================== -->
മുകളില്‍ നല്‍കിയിരിക്കുന്നത്രയും കോഡ് കോപ്പി ചെയ്ത് ബ്ലോഗ് ലേഔട്ടിലേക്ക് ചേര്‍ക്കുകയാണ് അടുത്ത പടി. (ശ്രദ്ധിക്കുക: ഗൂഗിള്‍ ബസ്സ് ബട്ടണില്‍ &title, &srcTitle, &srcURL എന്നിവിടങ്ങളിലെ & ന് പകരമായി & amp; [&-നും amp;-യ്ക്കും ഇടയില്‍ സ്പേസില്ലാതെ] എന്ന് പേസ്റ്റ് ചെയ്യുന്നതിനു മുന്‍പ് മാറ്റി എഴുതേണ്ടതുണ്ട്.) അതിനായി ബ്ലോഗിന്റെ Layout > Edit HTML എന്ന ഭാഗത്തെത്തുക. ഇപ്പോഴുള്ള ടെമ്പ്ലേറ്റിന്റെ ഒരു കോപ്പി എടുത്ത് സൂക്ഷിക്കുന്നത് നന്നായിരിക്കും. Download Full Template എന്നതില്‍ ക്ലിക്ക് ചെയ്ത് ടെമ്പ്ലേറ്റ് സേവ് ചെയ്യാവുന്നതാണ്. അതിനു ശേഷം Expand Widget Templates എന്ന ചെക്ക്ബോക്സ് സെലക്ട് ചെയ്യുക. HTML കോഡില്‍ <div class='post-header'> എന്ന ഭാഗം കണ്ടു പിടിച്ച് അതിനു തൊട്ടു താഴെയായി മുകളില്‍ കാണുന്നത്രയും ഭാഗം കോപ്പി-പേസ്റ്റ് ചെയ്യുക.

ടെമ്പ്ലേറ്റ് PREVIEW ചെയ്ത് പ്രശ്നങ്ങളൊന്നുമില്ല എന്നുറപ്പുവരുത്തിയതിനു ശേഷം SAVE TEMPLATE അമര്‍ത്തി ടെമ്പ്ലേറ്റ് സേവ് ചെയ്യുക. ബ്ലോഗിലെത്തി ബട്ടണുകള്‍ ഉദ്ദേശിച്ചതുപോലെ പ്രവര്‍ത്തിക്കുന്നുണ്ട് എന്നു കൂടി ഉറപ്പുവരുത്തുക. ഇവിടെ കാണുന്ന ബട്ടണുകളില്‍ ക്ലിക്ക് ചെയ്ത് ഈ പോസ്റ്റ് സുഹൃത്തുക്കളുമായി പങ്കുവെയ്ക്കുവാന്‍ സാധിക്കും. ഇതേ പ്രകാരം നിങ്ങളുടെ ബ്ലോഗിലെ ബട്ടണുകളും പ്രവര്‍ത്തിക്കേണ്ടതാണ്. (ബ്ലോഗറില്‍ ഹോസ്റ്റ് ചെയ്തിരിക്കുന്ന ബ്ലോഗുകളില്‍ മാത്രമേ ഈ ബട്ടണുകള്‍ ശരിയായി പ്രവര്‍ത്തിക്കുകയുള്ളൂ.)
--

5 comments:

Haree said...

ഗൂഗിള്‍ ബസ്, ഫേസ്ബുക്ക്, ട്വിറ്റര്‍ എന്നിവയില്‍ പോസ്റ്റുകള്‍ ഷെയര്‍ ചെയ്യുവാന്‍ ഉതകുന്ന ബട്ടണുകള്‍ ബ്ലോഗര്‍ ബ്ലോഗുകളില്‍ എങ്ങിനെ ചേര്‍ക്കാം എന്നതിനെക്കുറിച്ച് ഒരു പോസ്റ്റ്.
--

ബഷീർ said...

ഹരി,

ഇതിൽ കാണിച്ചിരിക്കുന്ന മൂന്നാമത്തെ ബോക്സിലെ കോഡുകളാണല്ലോ കോപ്പി ചെയ്യേണ്ടത്. ഈ ബ്ലോഗിന്റെ ലിങ്കുകളാണല്ലോ അപ്രകാരം കോപ്പി പേസ്റ്റ് ചെയ്താൽ വരിക. അവരവരുടെ ബ്ലോഗിന്റെ അഡ്രസ് കൊടുക്കണമല്ലോ അത് സൂചിപ്പിച്ച് കാണുന്നില്ല

Anonymous said...

ഹരീ,

പോസ്റ്റ് വളരെ ഉപകാരപ്രദമായി. ഞങ്ങള്‍ക്കിത് ഏറെ ഉപകാരപ്രദമായിരിക്കും. മാത്‍സ് ബ്ലോഗില്‍ ഇത് പരീക്ഷിക്കുന്നു.

ഹരി

Haree said...

@ബഷീര്‍ പി.ബി.വെള്ളറക്കാട്‌,
ഈ ബ്ലോഗില്‍ നിന്നും ബട്ടണ്‍ ഇമേജുകള്‍ മാത്രമാണ്‌ എടുക്കുന്നത്. ബ്ലോഗ്/പോസ്റ്റ് യു.ആര്‍.എല്‍. വേരിയബിള്‍ മുഖേനയാണ്‌ എടുക്കുന്നത്. ചേര്‍ക്കുന്ന ബ്ലോഗിനനുസരിച്ച് അവ മാറിക്കോളും.

@ Maths Blog Team,
നന്ദി.
--

Shahid Ibrahim said...

nannayirikkunnu suhruthe

Post a Comment

40- ദിവസത്തിനു മേല്‍ പ്രായമുള്ള പോസ്റ്റുകളുടെ കമന്റുകള്‍ പരിശോധിച്ചതിനു ശേഷം മാത്രമേ പ്രസിദ്ധീകരിക്കുകയുള്ളൂ. സഹകരിക്കുക.
--

 
Sankethikam - Technology Blog. Tutorials on Adobe Photoshop, Adobe Flash, Digital Photography and other general technical articles.
Original theme by Douglas Bowman | Theme customized by newnmedia | Lightbox v2.0 by Lokesh Dhakar | Recent Comments Widget by Blogger Templates
Recommended Browsers: Mozilla Firefox / Google Chrome