دکمه های اشتراک گذاری مطالب در شبکه های اجتماعی در asp.net mvc
منظور از دکمه های به اشتراک گذاری چیزی مشابه تصویر زیر است که کاربر وقتی مطلب موجود در وب سایت شما را مطالعه کرد در صورت تمایل می تواند با فشردن یکی از کلید های مربوطه آن مطلب را در حساب کاربری خودش، در آن شبکه اجتماعی اصطلاحا" Share کند تا دیگر دوستان و یا دنبال کننده های او نیز آن مطلب را مشاهده کنند.
برای مثال اگر روی دکمه Facebook کلیک کرد عنوان و لینک آن مطلب در صفحه Facebook او به اشتراک گذاشته می شود.
چگونه این امکان را در وب سایتمان پیاده سازی کنیم؟
در حالتی که وب سایت ما یک مدیریت محتوا مانند وردپرس و یا جوملا نباشد اگر بخواهیم برای یک مطلب یا یک محصول یا هر صفحه ای در وب سایتمان دکمه های اشتراک گذاری در شبکه های اجتماعی را قرار دهیم باید به چه صورت عمل کنیم؟
بدون شک روش های فراوانی وجود دارد. وب سایت های مختلفی وجود دارند که مانند یک واسط عمل کرده و این کار را برای ما تسهیل می کنند به این صورت که در آن ها ثبت نام می کنیم و پس از طی چند فرایند قطعه کد جاوا اسکریپتی به ما ارائه می دهند و آن را در وب سایت خودمان قرار می دهیم... اما فرض می کنیم اکنون قصد نداریم از این سرویس ها نیز استفاده کنیم و می خواهیم خودمان به صورت مستقیم این فرایند را انجام دهیم (تصورش را بکنید آن وب سایت واسط از دسترس خارج شود بدین ترتیب برای شما نیز مشکل ساز خواهد بود و بخش به اشتراک گذاری از کار خواهد افتاد یا مسائل دیگر...)
زیاد تفاوتی نمی کند که وب سایت شما توسط MVC ایجاد شده یا ASP وب فرم و یا هیچ کدام... به این دلیل عنوان این مطلب را به اشتراک گذاری در ASP.NET MVC قرار داده ام تا پاسخی باشد برای دوستانی که مکررا" سؤال می پرسیدند در MVC چگونه دکمه های به اشتراک گذاری مطلب در Facebook ،twitter و گوگل پلاس را قرار دهیم و همچنین برخی از توضیحات موجود در این نوشتار مرتبط با محیط MVC می باشد.
دکمه به اشتراک گذاری در Facebook
برای استفاده از قابلیت اشتراک گذاری در Facebook نیاز به Application Id دارید که برای به دست آوردن آن می بایست با حساب کاربری خود در Facebook لاگین کنید و سپس صفحه developer page را باز کنید.
در گوشه بالای این صفحه سمت راست دکمه Register را فشار دهید تا پنجره ی انتخاب حساب کاربری باز شود اکنون نام account خود را مشاهده می کنید، تیک پذیرفتن قوانین را نیز بزنید و تایید کنید تا وارد صفحه ای مشابه شکل زیر بشوید:
اکنون روی دکمه Create APP کلیک کنید تا پنجره ای مشابه شکل زیر باز شود:
اطلاعات مورد نیاز را وارد کنید، نامی به آن اختصاص دهید و سپس در بخش Category گزینه مورد نظر را مثلا Apps for Pages انتخاب کرده و سپس کلید Create App ID را فشار دهید که در این صورت از شما می خواهد کد کپچا را وارد کنید...
پس از انجام عملیات فوق، App Id به شما اختصاص داده خواهد شد و در ادامه به طور خودکار وارد صفحه ی Apps خواهید شد که تقریبا مشابه تصویر زیر خواهد بود:
در این صفحه (تصویر فوق) جلوی گزینه Social plugins روی Read the docs کلیک کنید تا صفحه ای مشابه شکل زیر باز شود:
حال در این صفحه در بخش سمت چپ روی share button کلیک کنید. اگر نتوانستید این صفحه را پیدا کنید از این لینک نیز می توانید آن را باز کنید.
اکنون در این صفحه بخش Share Button Configurator که مانند شکل زیر است را بیابید:
سپس روی دکمه 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 کنید:
Twitter کمی آسان تر از Facebook بود چون نیاز به App id نداشت. البته فیسبوک که ما را مجبور می کند App id دریافت کنیم به طبع امکانات بیشتری به ویسله آن App id در اختیار ما قرار می دهد که ذکر آنها خارج از حوصله این نوشتار است.
دکمه به اشتراک گذاری مطلب در گوگل پلاس (Googel plus)
مشابه مورد قبلی ابتدا وارد این صفحه شوید.
سپس کد موجود در کادر سمت راست صفحه را کپی کرده و در وب سایت خود (مکان مورد نظر مثلا زیر پست ها) قرار دهید به همین راحتی.
نتیجه گیری:
به اشتراک گذاری مطالب کمک بسیار زیادی به افزایش بازدید و رتبه وب سایت می کند با این حال از سوی اکثر وبمستران نادیده گرفته می شود و یا اگر هم به کار برده می شود به دلیل کیفیت پایین مطالب معمولا بسیار کم مورد استقبال قرار می گیرد مخصوصا در وب فارسی که اکثر شبکه های اجتماعی با اینترنت معمولی قابل باز شدن نیستند.
(توجه کنید که به کار بردن چنین دکمه هایی مقدار کمی روی سرعت بارگذاری آن صفحه تاثیر منفی خواهد گذاشت)
پیروز و سربلند باشید.
زاهد پردازه
تگ های meta property="og:url رو من متوجه نشدم چطوری و کجا قرار بدم توی MVC
مدیر وب سایت
عبارت متاتگ های og را در گوگل جستجو کنید.
م-ایمان
بسیار عالی. ممنون از زحماتتون
محمد عباسپور
با عرض سلام
آموزش اشتراک گذاری با استفاده از تلگرام و واتس اپ چطوری میتونم گیر بیارم ؟ برای asp.net هیچ آموزش درستی وجود نداره که بشه به صورت داینامیک این کار انجام داد.چند روزه دنبالش میگردم و پیدا نمکینم.ممنون میشم اگر کمکم کنید.