تبلیغات
Next - Tech
موضوعات
آرشیو مطالب
کلمات کلیدی
چهارشنبه 23 شهریور 1390, 09:36 ب.ظ محمد رزاق نوری
وقتی یه نفر میاد تو سایت یا وبلاگتون اگه از وب شما خوشش بیاد سعی میکنه که اونو با دوست های اینترنتیش به اشتراک بزاره . بعد میگرده دنبال قسمت به اشتراک گذاری و اگه شما این قسمت رو نداشته باشید واقعا ضرر می کنید چون فرض کنید اگه هر نفر که میاد وبسایت شمارو به یه نفر دیگه ( حذاقل ) معرفی کنه این یعنی بازدید 2 برابر . 
خوب برای ساختن این قسمت که خیلی هم آسونه کارایی که تو ادامه ی مطلب میگم رو انجام بدید .


خوب اول از همه شما به آیکون شبکه های اجتماعی نیاز دارید که به راحتی می تونید آیکون های لایه باز رو از گوگل دانلود کنید به طور مثال من از این آیکون ها استفاده می کنم :

آیکون شبکه های اجتماعی

خوب حالا که این آیکون هارو دارید این شکلی عمل کنید :
چند تا از اونایی که فکر میکنید به دردتون میخوره رو بردارید و up کنید حالا برای این که با کلیک روی هر آیکون به اون سایت بریم کد رو این شکلی می نویسیم ( من کد رو برای فیس بوک - توییتر - digg  و linkedin رو می نویسم بقیه رو میتونید کدشون رو از اینترنت در بیارید )

 فیس بوک <a href="http://facebook.com/share.php?u=http://yoursite.com"><img src="images/facebook.png" alt="facebook" id="fbimg" class="social"/></a>
 توییتر<a href="http://twitter.com/home?status=http://yoursite.com"><img src="images/twitter.png"  alt="twitter"  id="twimg" class="social"/></a>
 digghttp://yoursite.com
<a href="http://digg.com/submit?phase=2&amp;url=
"><img src="images/digg.png"     alt="digg"     id="dgimg" class="social"/></a>

 linkedin<a href="http://linkedin.com/shareArticle?mini=true&amp;url=http://yoursite.com"><img src="images/linkedin.png" alt="facebook" id="inimg" class="social"/></a>


با این که آدرس صفحه ها درست در جدول قرار نگرفته ( به خاطر پشتیبانی شدید از زبان شیرین فارسی ) اما میتونید بفهمید که تنها کاری که باید بکنید اینه که یه لینک رو به هر دکمه وصل کنید که این لینک تشکیل شده از آدرس شبکه اجتماعی مورد نظر - صفحه ای از اون سایت که مخصوص اشتراک لینک هست و مقدار دهی چند پارامتر . به طور مثال برای فیس بوک این قسمت ها این شکلیه : 

آدرس سایت : http://facebook.com
آدرس صفحه ی اشتراک گذاری : share.php
پارامتری که مقدار دهی می کنیم : u  . که این پارامتر در واقع آدرس اینترنتی شماست .

حالا که این لینک ها رو به عسک هاتون وصل کردید قسمت اشتراک گذاری شما درست کار میکنه اما اگه مثل من دوست دارید یه افکت بهش اضافه کنید که یه کم قشنگ تر بشه بقیه ی این قسمت رو هم بخونید 

برای جذاب تر شدن این قسمت من می خوام یه کم کد jquery بنویسم . اگه نمی دونید jquery چیه پیشنهاد میکنم حتما یاد بگیرید اما برای این که یه کم توضیح داده باشم jquery در واقع یه کتابخونه برای javascript هستش که خیلی کار مارو راحت میکنه مثلا در javascript معمولی برای این که شما بخواهید با کلیک کردن روی هز textbox رنگ اون عوض بشه باید تو رویداد onclick هر کدوم یه تابع رو فراخوانی کنید حالا تصور کنید اگه 30 تا textbox رو صفحه داشته باشید چی میشه ؟ () اما با jquery در 1/3 خط میتونید تمام این کار رو انجام بدید 

اما قبل از هر چیزی باید این کتابخونه ی پرکاربرد رو از سایت خودش به این آدرس ( http://jquery.com/ ) دانلود کنید که نتیجه ی این دانلود میشه یه فایل js .
برای این که از jquery استفاده کنیم و برای این که سایت با بلاگ ما دستورات jquery رو بشناسه باید اونو up کنیم و آدرسشو در خط اول کد پایین قرار بدیم که اگه دقت کنید واسه من این شکلیه : js/jquery-1.5.js


اما در هر صورت اگر هم jquery بلد نیستید می تونید از این کد استفاده کنید که کاری که انجام میده اینه که وقتی روی هر عکس میرید شفاف میشه و وقتی موس رو کنار میبرید کدر میشه .
این کد رو اگه صفحه ی پر حجمی دارید بعد از اتمام تگ body و اگه صفحه ی کم حجمی دارید در قسمت head قرار بدید .

<script src="js/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("img.social").fadeTo('slow','0.25');
$("img.social").mouseout(function()
{
$(this).fadeTo('slow','0.25');
});
$("img.social").mouseover(function()
{
$(this).fadeTo('slow','1');
});
  
  
});
</script>

و در ضمن باید به class = social دز عکس ها توجه کنید چون در کد های jquery از همین ویژگی مشترک همه ی عکس ها استفاده شده و حتما میدونید که عملا نیازی به ساختن کلاسی به این اسم نیست و این فقط یه اسمه .


بی انصاف ها +1 نزنن چون با وجود کنکور دارم مطلب می نویسم 




برچسب ها : آموزش ساخت قسمت اشتراک گذاری , آموزش ساخت دکمه های به اشتراک گذاری , کد قسمت اشتراک گذاری , ارسال لینک به شبکه های اجتماعی , کد اشتراک گذاری در شبکه های اجتماعی , شبکه اجتماعی , share this code , share on social networks , share in , ارسال مطالب به شبکه های اجتماعی , کد به اشتراک گذاری مطالب , فیس بوک , توییتر , دیگ , لینکداین , digg , linkedin , ابزار وبمستر ها , ابزار وبلاگ , ابزار سایت ,
آخرین مطالب
» آموزش ویدئویی 2010 #Visual C بخش 1 قسمت 2 ( سه شنبه 9 آبان 1391 )
» آموزش ویدئویی 2010 #Visual C ( شنبه 28 مرداد 1391 )
» پروژه نوشتن بازی هوش Speed Match با c# به همراه دانلود بازی ( سه شنبه 3 مرداد 1391 )
» نحوه از بین بردن Licence Expired محصولات Adobe ( پنجشنبه 15 تیر 1391 )
» چند تکنیک موثر در افزایش page rank و رتبه سایت ( سه شنبه 16 خرداد 1391 )
» تکنولوژی جدید مایکروسافت به نام Illumishare ( پنجشنبه 17 فروردین 1391 )
» دانلود ماشین حساب کارآمد و زیبا به همراه کد visual basic ( چهارشنبه 3 اسفند 1390 )
» آموزش سئو - تگ alt ( سه شنبه 13 دی 1390 )
» آموزش ساخت هواپیمای گلایدر کاغذی ( پنجشنبه 24 آذر 1390 )
» محاسبه ی سریع جذر و توان ( دوشنبه 16 آبان 1390 )
» آموزش سئو - woorank ( چهارشنبه 6 مهر 1390 )
» آموزش ساخت قسمت اشتراک گذاری در شبکه های اجتماعی ( چهارشنبه 23 شهریور 1390 )
» توییتر چیست ؟ چه فرقی با فیس بوک داره؟ و ...( حرفه ای ها حتما بخوانید) ( شنبه 12 شهریور 1390 )
» آموزش سئو - کلمات کلیدی ( پنجشنبه 10 شهریور 1390 )
» آموزش سئو - بک لینک ( پنجشنبه 20 مرداد 1390 )
ADS
چت روم
نظرسنجی
لینکدونی
درباره ما


ایجاد کننده وبلاگ : محمد رزاق نوری


  • کل بازدید ها :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل مطالب :
  • آخرین بروز رسانی :

تمامی حقوق متن ها، تصاویر سایت مربوط به این سایت می باشد و استفاده از آن ها در سایت ها و وبلاگ ها با لینک دادن به سایت مجاز می باشد.
.CopyRight © 2010 - 2011 next-tech Group , All Rights Reserved

Theme Design By ParsTools.Com