دکمه های اشتراک گذاری مطالب در شبکه های اجتماعی در asp.net mvc

 
منظور از دکمه های به اشتراک گذاری چیزی مشابه تصویر زیر است که کاربر وقتی مطلب موجود در وب سایت شما را مطالعه کرد در صورت تمایل می تواند با فشردن یکی از کلید های مربوطه آن مطلب را در حساب کاربری خودش، در آن شبکه اجتماعی اصطلاحا" Share کند تا دیگر دوستان و یا دنبال کننده های او نیز آن مطلب را مشاهده کنند.
 
به اشتراک گذاری تصاویر در mvc 
 
برای مثال اگر روی دکمه Facebook کلیک کرد عنوان و لینک آن مطلب در صفحه Facebook او به اشتراک گذاشته می شود.

چگونه این امکان را در وب سایتمان پیاده سازی کنیم؟

در حالتی که وب سایت ما یک مدیریت محتوا مانند وردپرس و یا جوملا نباشد اگر بخواهیم برای یک مطلب یا یک محصول یا هر صفحه ای در وب سایتمان دکمه های اشتراک گذاری در شبکه های اجتماعی را قرار دهیم باید به چه صورت عمل کنیم؟
بدون شک روش های فراوانی وجود دارد. وب سایت های مختلفی وجود دارند که مانند یک واسط عمل کرده و این کار را برای ما تسهیل می کنند به این صورت که در آن ها ثبت نام می کنیم و پس از طی چند فرایند قطعه کد جاوا اسکریپتی به ما ارائه می دهند و آن را در وب سایت خودمان قرار می دهیم... اما فرض می کنیم اکنون قصد نداریم از این سرویس ها نیز استفاده کنیم و می خواهیم خودمان به صورت مستقیم این فرایند را انجام دهیم (تصورش را بکنید آن وب سایت واسط از دسترس خارج شود بدین ترتیب برای شما نیز مشکل ساز خواهد بود و بخش به اشتراک گذاری از کار خواهد افتاد یا مسائل دیگر...)
زیاد تفاوتی نمی کند که وب سایت شما توسط MVC ایجاد شده یا ASP وب فرم و یا هیچ کدام... به این دلیل عنوان این مطلب را  به اشتراک گذاری در ASP.NET MVC قرار داده ام تا پاسخی باشد برای دوستانی که مکررا" سؤال می پرسیدند در MVC چگونه دکمه های به اشتراک گذاری مطلب در Facebook  ،twitter و گوگل پلاس را قرار دهیم و همچنین برخی از توضیحات موجود در این نوشتار مرتبط با محیط MVC می باشد.
 

 دکمه به اشتراک گذاری در Facebook

برای استفاده از قابلیت اشتراک گذاری در Facebook نیاز به Application Id  دارید که برای به دست آوردن آن می بایست با حساب کاربری خود در Facebook لاگین کنید و سپس صفحه developer page را باز کنید.
در گوشه بالای این صفحه  سمت راست دکمه Register را فشار دهید تا پنجره ی انتخاب حساب کاربری باز شود اکنون نام account خود را مشاهده می کنید، تیک پذیرفتن قوانین را نیز بزنید و تایید کنید تا وارد صفحه ای مشابه شکل زیر بشوید:
 
ایجاد app id در فیسبوک
 
اکنون روی دکمه Create APP کلیک کنید  تا پنجره ای مشابه شکل زیر باز شود: 
 
 ساخت APP ID در فیسبوک برای اشتراک گذاری
 
اطلاعات مورد نیاز را وارد کنید، نامی به آن اختصاص دهید و سپس در بخش Category گزینه مورد نظر را مثلا Apps for Pages انتخاب کرده و سپس کلید Create App ID را فشار دهید که در این صورت از شما می خواهد کد کپچا را وارد کنید...
پس از انجام عملیات فوق، App Id به شما اختصاص داده خواهد شد و در ادامه به طور خودکار وارد صفحه ی Apps خواهید شد که تقریبا مشابه تصویر زیر خواهد بود:
 
 apps page
 
در این صفحه  (تصویر فوق) جلوی گزینه Social plugins  روی Read the docs  کلیک کنید تا صفحه ای مشابه شکل زیر باز شود:
  
share button
حال در این صفحه در بخش سمت چپ روی  share  button کلیک کنید. اگر نتوانستید این صفحه را پیدا کنید از این لینک نیز می توانید آن را باز کنید.
اکنون در این صفحه بخش  Share Button Configurator که مانند شکل زیر است را بیابید:
 
ثبت app id برای فیسبوک 
 
سپس روی دکمه Get Code  کلیک کنید تا پنجره ای مشابه تصویر زیر نمایان شود:
 
به اشتراک گذاری در شبکه های اجتماعی
 
کدی که در قسمت Step 2 قرار داده شده است را کپی کنید و در انتهای صفحه خود (قبل از Body) آن را Paste  کنید.
(به این دلیل باید این کد را از آنجا کپی کنید که App Id مخصوص شما در آن قرار دارد)
سپس یک  تگ a یا  Div مطابق با کد زیر به هر کجای صفحه که تمایل دارید آیکن Facebook آنجا نمایش داده شود اضافه کنید مثلا کد زیر را هم می توانید استفاده کنید
<div class="fb-share-button" 
data-href="http://www.your-domain.com/your-page.html" 
data-layout="button_count">
</div>
 
مقدار data-href را برابر با آدرس صفحه جاری وب سایت خودتان قرار دهید.
کار تمام است اکنون اگر در صفحه مورد نظرتان روی دکمه Facebook کلیک کنید مشاهده خواهید کرد که عنوان و لینک مطلب شما در صفحه فیسبوک جهت به اشتراک گذرای باز خواهد شد و آنجا می توانید آن را به اشتراک بگذارید.
(توجه کنید که این حالت روی Localhost  ممکن است کار نکند)
 
یک نکته:
 فرض می کنیم صفحه ای که می خواهیم دکمه های اشتراک گذاری را در آن قرار دهیم صفحه نمایش مطلب است که نام View  ی آن در MVC نیز Showblog.chtml می باشد.
 
 در ادامه  بهتر است  کد های زیر را کپی کنید  و در بخش Head صفحه خود قرار دهید :
 
<meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Your Website Title" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />​
 
در MVC می توانید این کد ها را در _layout  قرار دهید  یا این که در بخش HEAD موجود در Layout  یک Section تعریف کنید و آنگاه در صفحه مورد نظر که فرضا صفحه Showblog.chtml است آن Section را با مقادیر فوق پر کنید.
(به جای your-domain و Your Website Title  می بایست عنوان های مورد نظر خود را وارد کنید )
 

دکمه به اشتراک گذاری مطلب در Twitter 

 برای اولین قدم  این صفحه را باز کنید.
در پایین صفحه بخش Twitter Buttons را انتخاب کنید
 دکمه اشتراک گذاری در توییتر
 
سپس در پنجره باز شده روی  Share Button کلیک کنید(مانند تصویر فوق)
به محض انتخاب  Share Button صفحه به بخش انتهایی آن اسکرول می شود که کادری مشابه زیر را ملاحظه خواهید کرد. روی دکمه Copy Code  کلیک کرده و سپس  در وب سایت خودتان در بخشی که می خواهید دکمه اشتراک گذاری در Twitter را قرار دهید آن را Paste کنید:
 
کد اشتراک گذاری توییتر در وب سایت MVC
 
Twitter کمی آسان تر از Facebook بود چون نیاز به App id نداشت. البته فیسبوک که ما را مجبور می کند App id دریافت کنیم به طبع امکانات بیشتری به ویسله آن App id در اختیار ما قرار می دهد که ذکر آنها خارج از حوصله این نوشتار است.
 

دکمه به اشتراک گذاری مطلب در گوگل پلاس (Googel plus) 

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

جهت اطلاع از جدید ترین مطالب سایت پیشنهاد می کنیم عضو خبرنامه شوید

تاریخ انتشار: 1395/10/04 توسط مدیر وب سایت
  امتیاز 5.00 از 5 توسط 1 نفر
گروه: مطالب آموزشی 481 بازدید 3 دیدگاه

لینک های مرتبط با این مطلب

3 دیدگاه برای این مطلب ارسال شده است

  1. زاهد پردازه
    1395/10/08

    تگ های meta property="og:url رو من متوجه نشدم چطوری و کجا قرار بدم توی MVC

    پاسخ
    1. مدیر وب سایت
      1395/10/22

      عبارت متاتگ های og را در گوگل جستجو کنید.

      پاسخ
  2. م-ایمان
    1395/11/29

    بسیار عالی. ممنون از زحماتتون

    پاسخ

دیدگاه شما چیست؟

تذکر: تگ های Html مجاز نمی باشد