هر وبسایتی برای اینکه تعداد اشتراک گذاری هایش در وب بیشتر شود نیازمند قرار دادن دکمه های به اشتراک گذاری در وبسایت است. البته در نظر داشته باشید که استفاده از دکمه های پیشفرض شبکه اجتماعی انتخاب بسیار مناسبی نیستند و امکان دارد که برای برندهای مختلف نیاز به استایل و شکل های مختلف داشته باشید.
به این دلیل است که امروز تصمیم گرفته ایم تا با شما تعدادی از قطعه کدهای مرتبط با شبکه های اجتماعی را که می توانید استفاده کنید، به اشتراک بگذاریم. اگر به دنبال استفاده از یک مجموعه دکمه به اشتراک گذاری مناسب برای وبسایت هستید، پس بدانید که اینجا نقطه شروع بسیار خوبی است.
۱. Side Sharing
اولین موردی که با هم بررسی می کنیم از موارد مورد علاقه من است که توسعه دهنده Michael Schofield طراحی نموده است. این دکمه های ثابت-کناری شبکه های اجتماعی برای وبلاگ ها و مجله های خبری بزرگ بسیار مناسب است.
این دکمه ها می توانند هم در قسمتی از وبسایت به صورت ثابت باقی بمانند و همینطور می توانند با اسکرول کاربر مکان‌شان را تغییر دهند. به شخصه مطالعه زیادی در رابطه با تفاوت این دور مورد انجام نداده ام اما فکر می کنم اگر به صورت ثابت قرار بگیرند تعداد به اشتراک گذاری ها بیشتر خواهد شد. جدای از این بدلیل طراحی بسیار خوب و لایه بندی درست، دکمه ها مزاحم به نظر نمی آیند.
این مورد به نظر بهترین گزینه برای شروع است به خصوص اگر شما دارای وبسایتی باشید و بخواهید یکسری از ویژگی ها را شخصی سازی کنید.
۲. Image Buttons
این مورد یکی از موارد مناسب برای قرار دادن دکمه اشتراک گذاری برای هر پست است. در این طرح از شبکه های اجتماعی پینترست، توییتر و فیسبوک استفاده شده که می توانید آنها را تغییر دهید.
این آیتم با استفاده از CSS درست شده و برای هرکدام از موارد یک پشت زمینه نیز در نظر گرفته شده است. هیچکدام از این موارد به شبکه اجتماعی متصل نیستند اما می شود به ساده‌گی لینک مربوطه را قرار داد و آن را برنامه نویسی کرد.
این گزینه بسیار نمای عالی را می دهد از طرفی برای خوب قرار گرفتن در کنار تصویر مربوط به مطلب و از طرفی دیگر محل قرار گیری، به این خاطر که اگر تصویر بسیار زیبا باشد کاربر میل بسیار زیادی برای به اشتراک گذاری مطلب پیدا خوهد کرد.
۳. Toggle Shares
مطمئنا همه ما آن آیکون های به اشتراک گذاری داخل وردپرس را دیده ایم که با یک آيکن همراه هستند. وقتی روی آیکون کلیک می کنید لیستی از شبکه های اجتماعی نمایان می شود. گزینه سوم این لیست نیز تقریبا چیزی شبیه به همین حالت است و می شود از آن در وبسایت وردپرسی خود به خوبی استفاده کرد.
با استفاده از این قطعه کد شما می توانید شبکه های اجتماعی خود را استایل دهی کنید و انیمیشن مورد نظرتان را در آن قرار دهید. استفاده از این گزینه برای وبسایت هایی که می خواهند آیتم های به اشتراک گذاری را بیشتر کنند بسیار مناسب است.
هرکدام از آیکون های موجود در این آیتم با سی اس اس طراحی شده و انیمیشن موجود نیز با استفاده از جی‌کوئری طراحی شده است. برای استفاده از این مورد کافی است قطعه کد مورد نظر را کپی کنید و در قسمت مورد نظر داخل وبسایت قرار دهید.
۴. Circle Animations
برای داشتن یک نمونه انیمیشنی و جالب می توانید این مورد را که توسط Stéphane Lyver توسعه داده شده مشاهده کنید. هرکدام از گزینه های داخل این قطعه کد دارای انیمیشن مخصوص به خود هستند. جدای از آن به خوبی می توانید آن ها را در لایه بندی وبسایت خود استفاده کنید. اگر خواستید می توانید برای هرکدام از موارد پشت زمینه و رنگ مورد نظر خود را اعمال نمایید.
همه چیزها با سی اس اس خالص نوشته شده و فونت های موجود با استفاده از Font Awesome طراحی شده است. در این طرح هیچکدام از آیتم ها به شبکه اجتماعی مربوطه متصل نشده اند، اما همانطور که گفته شد می شود به سادگی لینک ها را پیاده سازی کنید. برای اطلاعات بیشتر راجع به قضیه مربوط به اتصال آیکون ها به شبکه های اجتماعی می توانید این صفحه را مشاهده کنید.
۵. Simple Sharing Buttons
در خصوص این مورد باید از کلمات شیرین، کوتاه و عالی استفاده کرد. این قطعه کد از آیکون های SVG قرار داده شده در وبسایت Ionicons icon set استفاده می کند. البته باید بگویم که شما برای استفاده از این آیکن ها به هیچگونه کد جاوا اسکریپت یا چیزهایی از این قبیل احتیاجی ندارید.
بجای این لوگوها تنها با استفاده از یک خاصیت href قرار گرفته شده اند. هیچگونه پشتیبانی از جاوا اسکریپت یا SVG نیاز نیست.
اگر به مجموعه آیکن های Ionicons مراجعه کنید متوجه می شوید که می توانید از آیکن شبکه های اجتماعی دیگری هم استفاده کنید. جدای از کنترل کاملی روی CSS دارید، به عنوان مثال می توانید اندازه فونت، padding، رنگ و … را به سادگی تغییر دهید.
۶. Hidden Socials
گزینه ششم این لیست کاملا با سی‌اس‌اس طراحی شده است. بسیاری از وبسایت ها از این تکنیک برای قرار دادن شبکه های اجتماعی در یک آیکون کوچکتر استفاده می کنند. البته این یک انیمیشن منحصر به فرد است و خیلی استفاده مرسومی از آن نشده است.
کدهای این گزینه به سادگی قابلیت پیاده سازی را دارند و به آسانی می شود از طریق سی‌اس‌اس آنها را کنترل کرد. در کل گزینه‌ای بسیار زیبا است و به خوبی در تمام مرورگرهایی که از CSS3 استفاده می کنند پشتیبانی می شود.
۷. Hover Background Colors
گزینه هفتم این لیست یکی از منحصربه‌فرد ترین طراحی ها است. این گزینه با تغییر قرارگیری ماوس روی دکمه های مختلف رنگ پشت زمینه را تغییر می دهد. هرکدام از این آیکون ها با استفاده از مجموعه فونت Font Awesome قرار گرفته شده و به سادگی می‌توان آنها را تغییر داد. در این طراحی همچنین از جاوا اسکریپت برای تغییرات مربوط به hover نیز قرار گرفته که آن را دوست داشتنی تر می کند. البته در طرحی که می توانید در این لینک مشاهده کنید چنین خروجی را می توانید مشاهده نمایید با این تفاوت که در آن از جاوا اسکریپت استفاده نشده و به صورت خالص از CSS استفاده شده است.
البته به شخصه فکر نمی کنم که استفاده از این مورد در وبلاگ های بزرگ بسیار کاربردی باشد، بیشتر در وبسایت های کوچک مورد استفاده قرار می گیرد.
۸. Flyout Sharing
وقتی این مورد را مشاهده می کنید متوجه شباهت طرح با حالت متریال گوگل می شوید. در این طرح تنها از ۵ خط کد جاوا اسکریپت استفاده شده که آن هم خیلی پیچیده نیست. انیمیشن استفاده شده داخل این طرح کاملا جادویی است و با استفاده از سی‌اس‌اس می توانید انیمیشن را نیز شخصی سازی کنید.
یکی از نکات بسیار جالب مربوط به این گزینه استفاده بسیار بهینه از کدهای HTML است. در این طرح صرفا از یک نوار به اشتراک گذاری ساده که با Div ساخته شده است، استفاده شده و تمام. در حقیقت باید گفت که کلا ۵ خط HTML و ۵ خط جاوااسکریپت، بقیه موارد را سی‌اس‌اس تشکیل می دهد.
۹. 3D Sharing Buttons
آخرین گزینه این مجموعه را دکمه هایی شامل می شود که از CSS 3D transforms استفاده کرده‌اند.
Fabrizio Bianchi توسعه دهنده، برای ساختن انیمیشن و قسمت های مختلف این پروژه از سی‌اس‌اس خالص استفاده کرده است. در طراحی این مورد از Font Awesome استفاده شده و تنها برای نشاندن دکمه ها از جاوااسکریپت نیز به کمی استفاده شده است.
اما در کل باید بگویم که این پروژه صرفا با سی اس اس نوشته شده است و به نظر یکی از راه حل های جالب برای قرار دادن دکمه‌ی شبکه های اجتماعی در وبسایت است. جدای از آن توسط تمام مرورگرها مدرن نیز پشتیبانی می شود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید