اضافه کردن به اشتراک گذاری 4 دکمه اشتراک گذاری اجتماعی - ما آن را خودمان می نویسیم

در اینجا عبارت "چه کسی می خواهد نرم افزار با 8٪ تخفیف در تبلیغات بخرد؟" نوشته شده توسط خود کاربر، و در زیر نحوه نمایش لینک سایت در شبکه اجتماعی را مشاهده می کنید. خیلی زیبا نیست، درسته؟


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

در اینجا "امروز تولد allsoft.ru است - 8 سال :)" متن نوشته شده توسط کاربر است ، بقیه اطلاعات از متا تگ ها است. شما می توانید اطلاعات بیشتری در مورد این متا تگ ها در صفحه Facebook developers.facebook.com/docs/share بخوانید، سایر شبکه های اجتماعی نیز به خوبی آنها را درک می کنند.

این مکانیسم به طور کلی چگونه کار می کند:
1. هنگامی که کاربر روی دکمه کلیک می کند، ویجت پیوندی را به صفحه به سرور شبکه اجتماعی ارسال می کند.
2. سرور اجتماعی خود شبکه به این پیوند دسترسی پیدا می کند و اطلاعات مربوط به صفحه - عنوان، توضیحات، تصویر را می خواند.
3. سرور اجتماعی شبکه اطلاعات صفحه را در کنار خود ذخیره می کند و در صفحات شبکه اجتماعی نمایش می دهد

نحوه ارسال توضیحات مختلف برای یک صفحه
به عنوان مثال، هنگام ایجاد یک صفحه تبلیغاتی در allsoft.ru با یک تست کمیک، لازم بود توضیحات مختلفی برای تعداد متفاوت امتیازات توسط کاربر در آزمون ارسال شود. از آنجایی که شبکه اجتماعی با کلیک بر روی یک لینک، توضیحات یک صفحه را دریافت می کند، برای توضیحات مختلف به لینک های مختلفی نیاز است. علاوه بر این، توییتر تنها اجازه 140 کاراکتر را می دهد، بنابراین نیاز به توضیح جداگانه و کوتاه تری دارد.

New Ya.share(( عنصر: "ya_share_normal"، elementStyle: ( "نوع": "هیچ"، "سرویس‌های سریع": ["facebook"،"twitter"،"odnoklassniki"،"vkontakte"،"moimir"] ) لینک: "http://allsoft.ru/promo/allsoft8let/?share=normal"، serviceSpecific: ( twitter: ( عنوان: "نتیجه آزمون: اژدها تقریبا نقطه قوت شماست! شما هنوز نمی توانید اژدها شناسی تدریس کنید، اما در راه درست!")))))
1. در اینجا ya_share_normal شناسه عنصر در صفحه () است که در آن بلوک با دکمه های اجتماعی ظاهر می شود، پیوند پیوند است، به علاوه در serviceSpecific برای توییتر عنوان را نشان می دهیم که با آنچه در og است متفاوت است: متا تگ عنوان

بنابراین، برای کار "3 نتیجه آزمایش مختلف به اضافه یک پیوند مشترک به یک صفحه خارج از آزمون" 4 تگ خواهیم داشت:

و 4 بلوک کد جاوا اسکریپت مانند بالا.

نحوه تغییر عنوان و توضیحات ذخیره شده توسط شبکه اجتماعی.
1. بهترین راه برای فیس بوک وجود دارد: به دیباگر آنها بروید

با سلام خدمت خوانندگان محترم سایت وبلاگ. همانطور که احتمالاً قبلاً از عنوان حدس زده اید، ما در مورد دکمه های به اصطلاح اجتماعی صحبت خواهیم کرد که می توانند به طور جدی به مقالات موجود در سایت شما کمک کنند تا در شرایط موفق و کیفیت بالای خود مقاله تعداد زیادی از مقالات را جذب کنند. بازدیدکنندگان از شبکه های اجتماعی و خدمات.

هنگام رتبه بندی سایت شما، سیگنال های اجتماعی نیز توسط موتورهای جستجو در نظر گرفته می شود. تعداد زیادی اشتراک‌گذاری در حساب‌های با کیفیت بالا در توییتر، گوگل پلاس، فیس‌بوک (ممکن است VKontakte و شبکه‌های دیگر نیز در نظر گرفته شوند) می‌تواند به شما اجازه دهد تعداد معینی پله‌ها را بالاتر ببرید و شاید وارد صفحه برتر شوید و اگر عوامل رفتاری شما را ناامید نکرد همانجا بمانید.

به طور کلی، خدمات زیادی وجود دارد که اسکریپت (دکمه) برای به اشتراک گذاری محتوا در شبکه های اجتماعی در اینترنت ارائه می دهد، اما نباید به همه آنها اعتماد کرد (آنها به راحتی می توانند از شما یا به روش دیگری به دلایل بد استفاده کنند). و اگر کد آنها خیلی خوب قرار نگرفته باشد و قابلیت های محاسباتی سرورهایشان خیلی قدرتمند نباشد، می توانند به سادگی "یک سایت را آویزان کنند". اگرچه گزینه های مناسبی وجود دارد که از این کاستی ها فارغ است و من آنها را در انتهای این نشریه فهرست کرده ام.

همچنین امکان نمایش تعداد اشتراک‌گذاری‌های یک شبکه اجتماعی خاص روی دکمه‌ها وجود دارد. علاوه بر این، همه پست‌ها در نظر گرفته می‌شوند، و نه فقط پست‌هایی که با استفاده از این بلوک (داده‌ها از طریق API بارگیری می‌شوند). درست است، همه شبکه های اجتماعی پشتیبانی نمی شوند (فقط فیس بوک، Google+، Moi Mir، Odnoklassniki.ru، VKontakte)، اما بیشتر شبکه های اصلی. مایه تاسف است که توییتر اخیراً از این لیست حذف شده است زیرا ... ارائه این داده ها از طریق API متوقف شد.

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

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

من فکر می کنم که Yandex بعید است که مشکلی در دسترسی داشته باشد، زیرا این یک سازمان تجاری پردرآمد است که نسبت به تصویر خود کاملاً حساس است. علاوه بر این، اگر دارید، می توانید آمار کلیک روی این دکمه ها را پیگیری کنید که می تواند مفید باشد.

علاوه بر یک بلوک با نمادهای با اندازه معمولی، می توانید یک بلوک با شمارنده ایجاد کنید، و Yandex همچنین پیشنهاد می کند یک منوی کشویی با شبکه های اجتماعی اضافی اضافه کنید، که پس از نمایش تعداد دکمه های مورد نیاز در زیر یک اسپویلر پنهان می شود. شبکه های اجتماعی اصلی (مانند VKontakte، MoiMir، ):

اگر می‌خواهید شمارنده‌هایی را به دکمه‌های این بلوک اضافه کنید (با یک منوی کشویی)، کافی است یک ویژگی دیگر را در کد آن در سایت (بین تگ‌های Div) وارد کنید: data-counter="“ و تمام. همانطور که گفتم، نمی‌توان ساده‌تر از این باشد.

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

همچنین می‌توانید همه نمادها را با ریز عکس‌های دکمه‌های کوچک‌ترشان جایگزین کنید، که من شخصاً هنگام درج بلوک در بالای همه مقاله‌های این وبلاگ مفید یافتم:

در قسمت اول، تگ های باز و بسته شدن SCRIPT حاوی مسیر اسکریپت است که از سرور Yandex بارگذاری می شود و قسمت دوم حاوی خود کد درج است که باید در مکانی در قالب شما قرار داده شود. این بلوک نمایش داده خواهد شد.

نحوه درج دکمه های اجتماعی از Yandex در وب سایت

بنابراین، کد فراخوانی اسکریپت را به همراه بلوک Div در محلی که باید دکمه‌های رسانه‌های اجتماعی نمایش داده شود، وارد می‌کنم. خوب، برای اینکه بارگذاری آن بر سرعت بارگیری صفحه اصلی تأثیر نگذارد، من، با پیروی از توصیه های ارائه شده در اسناد Yandex، ویژگی async="async" را به آن اضافه کردم و از این طریق بارگیری ناهمزمان اسکریپت را آغاز کردم:

مشکل ممکن است در یافتن فایلی که مسئول تولید قسمت پایین کد Html با تگ بسته شدن /BODY یا آنی است که Head را تشکیل می دهد، در میان بسیاری از فایل های موتور سایت شما ایجاد شود. و همچنین مکانی را در فایل های تم پیدا کنید که در آن باید یک قطعه کد را در تگ های Div درج کنید (برای قرار دادن خود دکمه ها).

در اصل هم در وردپرس و هم در جوملا این کار در یکی از فایل های تم مورد استفاده انجام می شود. زیرا این وبلاگ بر روی وردپرس اجرا می شود، بنابراین من برای آن صحبت خواهم کرد.

اگر با وردپرس کار می‌کنید، برای درج کد فراخوانی اسکریپت باید فایل footer.php را برای ویرایش باز کنید (تگ بسته شدن Body یا header.php (تگ‌های Head را در آنجا پیدا خواهید کرد) را از پوشه پیدا خواهید کرد:

/wp-content/themes/نام پوشه_with_theme_used/footer.php

اکنون تنها چیزی که باقی می ماند این است که قسمت دوم کد دکمه های اجتماعی Yandex را که مسئول مکان بلوک با دکمه های موجود در صفحات سایت است، در محل مناسب در قالب وب سایت خود یا مستقیماً در مقاله وارد کنید:

به هر حال، من یک بار دیگر رزرو می کنم: اگر می خواهید هر دکمه ای را از این بلوک حذف کنید، لازم نیست دوباره به سازنده در وب سایت Yandex بروید. شما به سادگی می توانید ورودی آن را از این لیست حذف کنید (به همراه کاما که بعد از آن قرار می گیرد، به عنوان مثال، "vkontakte"). خوب فهمیدی...

خوب، شما همچنین می توانید موقعیت دکمه ها را در داخل بلوک با استفاده از CSS تغییر دهید.

Li.ya-share2__item (پس‌زمینه: هیچ‌کدام! مهم؛ بالشتک: 0 7 پیکسل 0 7 پیکسل! مهم؛)

زیرا من از طرح‌بندی استفاده می‌کنم که برای دستگاه‌های تلفن همراه تطبیق‌پذیر است، بنابراین برای دستگاه‌هایی با وضوح صفحه‌نمایش پایین، خط مشابهی را اضافه کردم، جایی که تورفتگی‌های کوچک‌تری را تنظیم کردم، اما اینها جزئیات هستند:

Li.ya-share2__item (padding:0 3px 0 3px!مهم؛)

به طور کلی، چیزی شبیه به این در مورد وبلاگ وردپرس من وجود دارد. در جوملا، برای درج این بلوک، احتمالاً ساده‌ترین کار استفاده از ماژول کد سفارشی Html است، و آن را در موقعیت قالب در جایی درست زیر متن مقاله قرار می‌دهد.

دکمه های رسمی رسانه های اجتماعی

بسیاری از شبکه های اجتماعی خود فرصت دانلود کد دکمه را برای همه فراهم می کنند و اغلب حتی می توانید ظاهر و عملکرد آن را سفارشی کنید. برای مثال، می‌توانید کد اسکریپت را برای اشتراک‌گذاری یک پست در پیکربندی و دریافت کنید.

همانطور که می بینید، تنظیمات بسیار زیادی وجود دارد و علاوه بر ظاهر دکمه VKontakte، می توانید نمایش شمارنده ای را که تعداد اشتراک گذاری ها را نشان می دهد نیز سفارشی کنید.

شما می توانید یک دکمه فیس بوک را دریافت کنید. بسیار انعطاف پذیر است و مطابق با نیازهای شما سفارشی شده است و با کتیبه های انگلیسی روی آن اشتباه نگیرید، زیرا وقتی کد آن را در وب سایت خود قرار می دهید، کتیبه ها به طور خودکار به روسی ترجمه می شوند.

بهتر است چیزی در قسمت URL وارد نکنید، سپس صفحه ای که این کد در آن قرار دارد به اشتراک گذاشته می شود.

چیزی شبیه به این خواهد بود:

چیزی شبیه به این خواهد بود:

و، البته، نمی توانم از دکمه رسمی توییتر که نسبتاً اخیراً ظاهر شده است، خودداری کنم. سازنده آن واقع شده است. طبیعتاً امکان شمارش تعداد ریتوییت ها را فراهم می کند و شما این فرصت را خواهید داشت که ظاهر آن را تنظیم کنید:

سپس کد به دست آمده را مطابق با اصل توضیح داده شده در بالا کمی مدرن کردم تا عناوین طولانی من قطع شوند و هنگام اشتراک گذاری مشکلات اضافی برای کاربران ایجاد نکنند.

گزینه های دیگر برای دریافت دکمه های رسانه های اجتماعی برای وب سایت شما

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

سخت است بگوییم از این تنوع چه چیزی را انتخاب کنیم. من چند کلمه در مورد آنچه که فرصت امتحان کردن خودم را داشتم و قبلاً در مورد آنچه قبلاً در مورد آن نوشته بودم، خواهم گفت.

به طور کلی، خودتان نگاه کنید، مقایسه کنید و انتخاب کنید.

موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

ممکن است علاقه مند باشید

ما دکمه‌هایی را برای افزودن به شبکه‌های اجتماعی و نشانک‌ها برای وبلاگ وردپرس ایجاد می‌کنیم (بدون افزونه و اسکریپت) به احتمال زیاد - دکمه‌های اجتماعی مستقل برای سایت
دکمه‌هایی برای سایت‌های موبایل از Uptolike + امکان اشتراک‌گذاری پیوندها در پیام‌رسان‌ها UpToLike - یک دکمه‌ساز اجتماعی برای سایت شما با قابلیت‌های گسترده
Uptolike Share Buttons - افزونه رایگان برای افزودن دکمه های رسانه های اجتماعی به وردپرس
uSocial - بررسی سرویس دکمه های اجتماعی جدید برای وب سایت شما
جذب ترافیک از بازدیدکنندگان به وب‌سایت خود با استفاده از روش‌های SMO (فروم‌ها، شبکه‌های اجتماعی، گروه‌های مشترک) چگونه به وب‌سایت خود بلوکی با دکمه‌های منتهی به صفحات یا گروه‌های خود در شبکه‌های اجتماعی و همچنین به فید RSS اضافه کنید.
Google+1 و من از Vkontakte و Facebook دوست داریم - چگونه دکمه های لایک را به وب سایت خود اضافه کنیم

پیوندها در استوری ها خیلی وقت پیش ظاهر شدند، اما فقط حساب های رسمی می توانستند از آنها استفاده کنند. در ماه می، امکان افزودن پیوندها در تبلیغات با قرار دادن در History وجود داشت، اما اینها همه مکانیزم های پولی بودند. امروز، مردم شروع به ارسال اسکرین شات برای من کردند که چگونه اینستاگرام به تدریج شروع به اجازه دادن به کاربران عادی برای اضافه کردن لینک های فعال به وب سایت ها در استوری خود کرده است.

چگونه به استوری اینستاگرام خود لینک اضافه کنیم؟

این قابلیت برای همه اکانت های اینستاگرام در دسترس نیست! پیوندهای امروزی در Stories فقط در دسترس هستند:

  • برای اکانت های تایید شده اینستاگرام
  • برای پروفایل هایی با بیش از 10000 مشترک.

    • علاوه بر این، پیوند ممکن است بلافاصله پس از دریافت 10000 مشترک ظاهر نشود. تقویت ربات ها تا 10 هزار مشترک همیشه کار نمی کند. بعلاوه، فریب دادن ربات‌ها به گونه‌ای که امروز لغو اشتراک نکنند دشوار است، و اگر تعداد مشترکان حساب به 9999 یا کمتر کاهش یابد، امکان پیوست کردن یک پیوند از بین می‌رود.

    برای دنبال کردن یک پیوند فعال از تاریخچه، کاربر باید انگشت خود را به سمت بالا بکشد. از آنجایی که مردم هنوز به چنین فرصت‌هایی عادت نکرده‌اند، توصیه می‌کنم علاوه بر این، توجه خود را روی پیوندهایی با پیوندها و فراخوان‌های مختلف متمرکز کنید. خب، شما بچه‌ها بزرگ شده‌اید، متوجه می‌شوید که در مورد چه چیزی صحبت می‌کنم، به هر حال من اینجا به چه کسی آموزش می‌دهم.

    من قبلاً در مورد ظاهر لینک های فعال در دایرکت نوشتم اما اطلاعات را در وبلاگ قرار ندادم. مانند هر به روز رسانی دیگری، این به روز رسانی تنها برای بخش انتخابی و تصادفی از کاربران در دسترس است.

    آخرین به‌روزرسانی‌ها اینستاگرام را برای تجارت الکترونیک و مشاغل کوچک جالب‌تر می‌کند، نبرد برای مشترکان حتی داغ‌تر خواهد شد. فقط امیدوارم اینستاگرام به طور فعال با اسپم لینک در دایرکت مبارزه کند.

    قبل از پرداختن به کدنویسی، بیایید نگاهی به اطراف بیندازیم و به منابعی که وب جهانی در حال حاضر در اختیار ما قرار داده است توجه کنیم. به هر حال، تعداد زیادی از آنها وجود دارد، اما ما به دو مورد از محبوب ترین آنها خواهیم پرداخت.

    یکی دیگر از خدمات قابل توجه ما همین سازنده ساده است، فقط تعداد زیادی دکمه با سرویس ها و شبکه ها وجود دارد که باید اعتراف کنم که برخی از آنها را برای اولین بار دیدم. تفاوت اصلی با Yandex.Technologies این است که ما یک اسکریپت کاملاً تولید شده دریافت می کنیم که نه در ابر، بلکه مستقیماً در سرور ما پردازش می شود.


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

    اولا: طراحی دکمه ها عملا آهنی است. بله، قابل تشخیص است و توسط خود شبکه های اجتماعی ارائه می شود، اما نیازهای ما را برآورده نمی کند. خوب دکمه لبه های گرد دارد و طراحی سایت ما مستلزم مربعی بودن دکمه است، چه کار کنیم؟ - اسپرایت را بردارید و دوباره آن را ترسیم کنید! هرکسی که آن را امتحان کرده باشد، می‌داند که این یک کار بی‌شکر است: جایگزین کردن یک دکمه مملو از پنج یا شش تلاش برای قرار دادن «درست» آن در اسپرایت است. و این فقط جایگزینی یک/چند دکمه است، اما اگر سایت به سبک گوتیک باشد و همه دکمه ها باید تیره باشند، چه؟

    ثانیا: در قابلیت اطمینان Yandex شکی وجود ندارد، اما دکمه ها، بر خلاف شمارنده متریک، به دلایلی به سختی بارگیری می شوند و اغلب یک تاخیر قابل مشاهده از محتوای اصلی صفحه وجود دارد. این امر به ویژه با اتصال با سرعت بالا قابل توجه است، زمانی که صفحه تقریباً فوراً خراب می شود و چندین بلوک با دکمه دارید.

    ثالثا: برای آزمایش، یک اسکریپت در share24 ایجاد کنید - بزرگ است. آیا همه خطوط کد ارائه شده واقعاً برای ما ضروری هستند؟ - فکر نکن

    حالا بیایید به نوشتن خود اسکریپت بپردازیم: HTML، CSS و در واقع خود کد، که در جاوا اسکریپت نوشته شده است. علاوه بر این، من از کتابخانه jQuery برای راحتی استفاده خواهم کرد.

    ما تمام فایل های لازم را اضافه می کنیم:

    اکنون اسکریپت را به فایل share.js اضافه می کنیم، به شکل زیر در می آید:

    سهم Var = ( twitter: function($this)( var data = share.data($this); if(data)( var url = "http://twitter.com/share?"; url += "text= " + encodeURIcomponent(data.text); url += "&url=" + encodeURIcomponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIcomponent(data.url); share.popup(url)، vk: function($this)(var data = share.data($this)); if(data)(var url = "http://vkontakte.ru/ share. php?"; url += "url=" + encodeURIcomponent(data.url); url += "&title=" + encodeURIcomponent(data.title); url +="&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

    اضافه کردن نشانه گذاری به صفحه:

    ساختار کاملاً ساده است، یعنی یک wrapper با کلاس share، به دنبال آن یک div با ویژگی data-share-data، که در بالا ذکر شد. خط از چهار پارامتر با مقادیر خاص خود تشکیل شده است.

    • url – آدرسی که ما به اشتراک می گذاریم.
    • img – تصویر، در صورت عدم نیاز، یک خط خالی را مشخص کنید.
    • عنوان – عنوان صفحه؛
    • متن – توضیحاتی که نیاز داریم.

    در داخل div خود دکمه ها با یک رویداد onclick متصل به آنها قرار دارند. پس از کلیک کردن، یکی از روش های توضیح داده شده در بالا فراخوانی می شود.

    تنها چیزی که باقی می ماند این است که به دکمه ها ظاهری انسانی بدهید و CSS را اضافه کنید:

    اشتراک‌گذاری( رنگ پس‌زمینه: #ececec؛ نمایشگر: بلوک درون خطی؛ بالشتک: 7 پیکسل 5 پیکسل؛ ) .share div:after( محتوا: ""؛ نمایش: بلوک؛ شفاف: هر دو؛ ارتفاع: 0؛ ) .share div:first -child( margin-left: 0; ) .share .twitter, .share .vk, .share .facebook( background-image: url(share.png); margin-left: 7px; border-radius: 3px; height: 24px عرض: float: .share . موقعیت: 0 -32px; .share .vk:hover(background-color: #3a5b7e;) .share -color: #30487a;

    در نتیجه، پس از افزودن دکمه CSS، نتیجه به شکل زیر خواهد بود:

    این کار نوشتن فیلمنامه را کامل می کند، در مثالی که من فقط از سه شبکه اجتماعی استفاده کردم، اگر نیاز به اتصال دیگران داشته باشید، کار دشواری نخواهد بود. برای انجام این کار، باید یک متد جدید به شی اشتراک اضافه کنید و فراموش نکنید که HTML و CSS اضافی را نیز اضافه کنید. لینک های ارسال مجدد در شبکه های اجتماعی را می توان از دو طریق به دست آورد:

    • از API شبکه اجتماعی استفاده کنید، که همیشه کمک نمی کند.
    • آن را از یک سرویس مشابه با استفاده از firebug یا ابزار توسعه وب دیگری انتخاب کنید.

    من به اهمیت SMO (بهینه سازی رسانه های اجتماعی) در ارتقاء وب سایت اشاره کردم. حالا بیایید مستقیماً در مورد نحوه انجام بهینه سازی اجتماعی در وب سایت خود یا به طور دقیق تر، نحوه اضافه کردن دکمه های اجتماعی شبکه های محبوب به وب سایت خود صحبت کنیم.

    ابتدا به شما نشان خواهم داد که در واقع چگونه باید در سایت به نظر برسد. در بسیاری از وبلاگ ها و سایت های خبری، در پایین هر مقاله می توانید چیزی شبیه به این را ببینید:

    اینها دکمه های اجتماعی هستند که به لطف آنها SMO و سپس فعالیت اجتماعی به دست می آید. این مقاله به این سوال اختصاص دارد که کد این شبکه های اجتماعی را از کجا می توان دریافت کرد. دکمه ها و نحوه صحیح نصب آنها در وب سایت خود. بیایید ابتدا نصب +Google را در نظر بگیریم.

    1. یک دکمه +Google به سایت اضافه کنید

    2. یک دکمه "پسندیدن" از VKontakte و Facebook به سایت 2.1 اضافه کنید. من آن را از فیس بوک دوست دارم

    بیایید با دریافت کد دکمه فیس بوک شروع کنیم. برای انجام این کار، از این صفحه دیدن کنید: https://developers.facebook.com/docs/plugins/like-button. شما باید تصویر زیر را ببینید:

    در بالا سمت راست می توانید ببینید که این دکمه در وب سایت شما چگونه خواهد بود. بیایید به پارامترهای قابل تنظیم نگاه کنیم:

    1. URL برای لایک کردن
    این یک پارامتر اختیاری است. اگر فیلد را خالی بگذارید، هر صفحه شمارنده لایک مخصوص به خود را خواهد داشت. اگر URL خاصی را در آنجا وارد کنید، شمارنده تک خواهد بود (لایک ها از تمام صفحات این سایت خلاصه می شوند).

    2. دکمه ارسال
    دکمه ای برای ارسال پیام اضافه یا حذف کنید. توصیه می کنم این دکمه را بردارید، زیرا ... هدف ما صرفاً قرار دادن دکمه "پسندیدن" است، اگرچه شاید شما اهداف کاملاً متفاوتی داشته باشید.

    3. سبک چیدمان
    سبک نمایش دکمه. من شخصاً بهترین استاندارد را دوست دارم.

    4. عرض
    عرض دکمه بر حسب پیکسل من معمولا بیش از 100 پیکسل تنظیم نمی کنم.

    5.فعل نمایش دادن
    آنچه روی دکمه نمایش داده می شود: "من دوست دارم" یا "من توصیه می کنم". من معمولاً اولین گزینه (پیش‌فرض) را انتخاب می‌کنم زیرا این روش مؤثرتری برای ایجاد انگیزه در کاربر برای لایک کردن است.

    6. طرح رنگ
    محدوده رنگ: سفید یا سیاه.

    7. فونت
    فقط فونت را برای کتیبه "I like" تنظیم کنید.

    پس از انجام تنظیمات بر روی دکمه دریافت کد کلیک کرده و آن را در سایت قرار دهید. کد دکمه رایج برای فیس بوک:

    (function(d, s, id) ( var js, fjs = d.getElementsByTagName(s)؛ if (d.getElementById(id)) بازگشت؛ js = d.createElement(s)؛ js.id = id؛ js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1" fjs.parentNode.insertBefore(js, fjs ) (سند، "اسکریپت"، "facebook-jssdk"); 2.2. من از VKontakte دوست دارم

    اکنون بیایید نحوه دریافت کد دکمه "like" را از VKontakte ببینیم. برای این کار به صفحه زیر بروید: https://vk.com/dev. شما باید صفحه زیر را ببینید:

    ابتدا باید یک سایت جدید اضافه کنید. برای انجام این کار، گزینه اتصال یک سایت جدید را از منوی کشویی «سایت/برنامه» انتخاب کنید:

    پس از افزودن یک سایت جدید، آن را ذخیره کنید. حال از منوی کشویی سایت مورد نظر را انتخاب کنید. به دنبال آن تعداد کمی از پارامترها وجود دارد: "گزینه دکمه"، "ارتفاع"، "نام دکمه" - این همه به سلیقه شما قابل تنظیم است. در پایان کدی برای دکمه وجود دارد:

    VK.init ((apiId: 2872188، onlyWidgets: true )); VK.Widgets.Like ("vk_like"، (نوع: "دکمه") ); 3. یک دکمه توییت به سایت اضافه کنید

    مانند موارد قبلی، ابتدا به محلی که دکمه را دریافت و پیکربندی کرده اید بروید.



     

    شاید خواندن آن مفید باشد: