پیوندها در داستانها برای مدت طولانی ظاهر می شوند ، اما فقط حساب های رسمی می توانند از آنها استفاده کنند. در ماه مه ، امکان افزودن پیوندها در تبلیغات جایگذاری در تاریخ ممکن شد ، اما همه اینها مکانیسم های پرداخت شده بودند. امروز آنها شروع به ارسال عکس به من از نحوه شروع به تدریج اینستاگرام به کاربران عادی می کنند که پیوندهای فعال را به سایت های Stories خود اضافه کنند.
چگونه می توان پیوندی به داستان اینستاگرام خود اضافه کرد؟
این ویژگی در تمام حساب های اینستاگرام موجود نیست! امروز ، پیوندها در Stories فقط در دسترس هستند:
- برای حساب های تأیید شده اینستاگرام
- برای پروفایل هایی با بیش از 10،000 مشترک.
علاوه بر این ، ممکن است پیوند بلافاصله پس از دریافت 10،000 مشترک ، ظاهر نشود. پیچاندن ربات ها به مشترکان 10k همیشه کار نمی کند. بعلاوه ، خاموش کردن رباتها به سختی دشوار است تا آنها امروز مشترک نشوند ، و اگر تعداد مشترکین حساب به 9.999 یا کمتر کاهش یابد ، امکان پیوستن به یک لینک از بین می رود.
برای دنبال کردن پیوند فعال از History ، کاربر باید "Swipe Up" را انجام دهد. از آنجایی که مردم هنوز به چنین فرصتهایی عادت ندارند ، توصیه می کنم علاوه بر این ، روی پیوندها و پیوندها و فراخوانهای مختلف نیز متمرکز شوید. خوب ، شما بزرگسالان هستید ، خودتان می فهمید که درمورد این موضوع چیست ، که من اصلاً در اینجا می آموزم.
من قبلاً در مورد ظاهر پیوندهای فعال در Yandex.Direct نوشتم ، اما نمی توانم از وبلاگ اطلاعاتی بدست آورم. مانند هر بروزرسانی دیگر ، در حالی که قسمت انتخابی و تصادفی کاربران در دسترس است.
به روزرسانی های اخیر اینستاگرام را برای تجارت الکترونیکی و مشاغل کوچک جالب تر می کند ، نبرد مشترکان حتی داغ تر خواهد شد. من فقط امیدوارم که اینستاگرام به طور فعال با پیوندهای اسپم در Yandex.Direct برخورد کند.
من به اهمیت SMO (بهینه سازی رسانه های اجتماعی) در ارتقاء وب سایت اشاره کردم. اکنون ما به طور مستقیم در مورد نحوه انجام بهینه سازی اجتماعی در سایت شما یا به اصطلاح نحوه افزودن دکمه های اجتماعی شبکه های محبوب به سایت صحبت خواهیم کرد.
اول ، من به شما نشان خواهم داد که چگونه باید به سایت نگاه کنید. در بسیاری از وبلاگ ها و سایت های خبری زیر ، بعد از هر مقاله ، می توانید چیزی مشابه را مشاهده کنید:
اینها دکمه های اجتماعی هستند که به لطف آنها SMO حاصل می شود و سپس فعالیت های اجتماعی نیز به دست می آید. این مقاله به این سؤال اختصاص دارد كه كد كد این خدمات اجتماعی را كجا دریافت كنید. دکمه ها و نحوه نصب صحیح آنها در سایت خود. Google+ را برای مبتدیان خود نصب کنید.
1. یک دکمه Google+ به سایت اضافه کنید
2. دکمه Like از Vkontakte و Facebook را به سایت اضافه کنید
2.1. من آن را از FaceBook دوست دارم
بیایید با گرفتن کد دکمه برای فیس بوک شروع کنیم. برای انجام این کار ، به این صفحه بروید: https://developers.facebook.com/docs/plugins/like-button. تصویر زیر را باید مشاهده کنید:
بالا سمت راست نشان می دهد که دکمه سایت شما چگونه به نظر می رسد. ما با پارامترهای قابل تنظیم مقابله خواهیم کرد:
1. URL به Like
این یک پارامتر اختیاری است. اگر قسمت را خالی بگذارید ، پس از آن هر صفحه شخصی خود را مانند پیشخوان خواهد داشت. اگر URL خاصی را در آنجا وارد کنید ، پیشخوان همان خواهد بود (لایک از کلیه صفحات این سایت خلاصه می شود).
2. دکمه ارسال کنید
برای ارسال پیام ، دکمه ای را اضافه یا حذف کنید. من توصیه می کنم این دکمه را حذف کنید زیرا هدف ما این است که فقط دکمه "مانند" را قرار دهیم ، اگرچه شاید شما اهداف کاملاً متفاوتی داشته باشید.
3. سبک چیدمان
سبک نمایش دکمه من شخصاً استاندارد را بیشتر دوست دارم.
4- عرض
عرض دکمه در پیکسل ها. من معمولاً بیش از 100 پیکسل تنظیم نمی کنم.
5. فعل برای نمایش
چه بر روی دکمه نمایش داده می شود: "من دوست دارم" یا "توصیه می کنم". معمولاً گزینه اول (به طور پیش فرض) را انتخاب می کنم ، زیرا این روشی مؤثرتر برای ایجاد انگیزه در استفاده کاربر است.
6. طرح رنگ
رنگ ها: یا سفید یا سیاه.
7. قلم
فقط کافی است قلم مربوط به کتیبه "من آن را دوست دارم" تنظیم کنید.
پس از تنظیم تنظیمات ، بر روی دکمه "دریافت کد" کلیک کرده و آن را در سایت قرار دهید. کد دکمه معمولی برای facebook:
<-- این قسمت از کد را در انتهای صفحه قرار دهید--> <-- эту часть кода нужно разместить в месте отображения: -->
2.2. Мне нравится от ВКонтакте
Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: https://vk.com/dev . У Вас должна открыться следующая страница:
Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:
После добавления нового сайта сохраните его. Теперь выберите из выпадающего меню нужный сайт. Далее следуют небольшое число параметров: "вариант кнопки", "высота", "название кнопки" - это все настраивается под Ваш вкус. В конце будет код для кнопки:
3. Добавляем на сайт кнопку tweet
Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки.
От автора: приветствую вас. Сегодня социальные сети развились до такого уровня, что в них зарегистрировано в общей сложности более 3 млрд людей. Потенциально это очень мощная аудитория, поэтому сегодня я вам расскажу, как добавить кнопки социальных сетей на сайт.
Добавление на сайт на WordPress
Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.
Яндекс тоже разработал страницу, на которой вы можете настроить и поставить себе кнопки. На этой страничке вы можете выбрать нужные сервисы (а их примерно 25). Справа вы можете выбрать внешний вид блока. Это могут быть счетчики, которые будут показывать, сколько раз на кнопки нажали пользователи. Это, в свою очередь, поможет вам отслеживать, полезен ли материал читателям.
JavaScript. Быстрый старт
Естественно, не нужно использовать все три варианта, лучше какой-то один. Хотя я видел сайты, где блок был и в начале, и в конце страницы.
Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.
Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.
В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.
Комментарии это то, что на этом скриншоте выше выделяется зеленым цветом. Как видите, разработчик явно указал, что в этом месте выводиться сам текст статьи. Это отлично, просто вставьте код сразу после статьи и получите желаемый результат.
Кнопки от Pluso
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вы можете выбрать стиль кнопок, настроить их фон, положение и размер. Также можно выбрать иконки со встроенным счетчиком. А еще одним преимуществом кнопок от Pluso является их потрясающий внешний вид и возможность встроить их в практически в любой дизайн.
Когда все настроено, просто копируем код и вставляем его в том месте, где хотим увидеть соответствующий блок.
Еще один вариант – Share42
Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.
Описывать процесс подробно не буду, потому что на сайте уже все оформлено в виде пошаговой инструкции. Дизайн этих иконок вы поменять не можете, а только размер. Впрочем, смотрятся они недурно.
Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».
Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.
Также если вы планируете добавить иконку rss, то обязательно нужно указать адрес вашего фида, а если хотите показывать количество нажатий по кнопкам, должны быть отмечены две последние галочки.
Ниже есть 2 кнопки. Первая позволяет взглянуть, как будут выглядеть социальные кнопки, которые вы настроили. С помощью второй скачивается скрипт. Его нужно загрузить через ftp к себе на сайт в корневую папку.
Следующим шагом укажите на странице сервиса путь к этой папке. Зачастую достаточно заменить site.com на ваше доменное имя. Все, остается вставить код, выбрав перед этим cms, на которой работает ресурс. Куда вставлять код вы уже должны понимать, я надеюсь.
Я не сомневаюсь, что существует еще парочку нормальных сервисов, где можно сделать социальные кнопки, а также есть просто масса скриптов и плагинов, которые их добавляют. Сегодня я перечислил вам наиболее лучшие, на мой взгляд, варианты.
Что ж, сегодня мы с вами научились добавлять кнопки социальных сетей и сервисов в свой интернет-проект. Теперь ваши полезные материалы могут быть автоматически распространены по социальным сетям вашими благодарными читателями. А у меня на этом все.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Здравствуйте, уважаемые читатели блога сайт. Как вы уже, наверное, догадались из заголовка, речь пойдет про, так называемые, социальные кнопки, которые очень серьезно могут помочь статьям на вашем сайте привлечь, при удачном стечении обстоятельств и высоком качестве самой статьи, большое количество посетителей с социальных сетей и сервисов.
Социальные сигналы так же учитываются и поисковыми системами при ранжировании вашего сайта. Большое количество расшариваний в качественные аккаунты в Твиттере, Google+, Фейсбуке (возможно, что Вконтакте и другие сети тоже учитываются) может позволить вам подняться на определенное число шажков повыше и, возможно, войти в Топ и удержаться там, если поведенческие факторы не подкачают.
Вообще, сервисов предоставляющих скрипты (кнопки) расшаривания контента в социальные сети в интернете очень много, но не всем из них стоит доверять (запросто или еще как-то вас использовать по нехорошему). Да и просто «подвесить сайт» они способны при не очень грамотном размещении их кода и не очень мощных вычислительных возможностях их серверов. Хотя есть и приличные варианты, свободные от данных недостатков, и их я перечислил в конце этой публикации.
Также имеется возможность отображения на кнопках числа расшариваний в отдельно взятую социальную сеть. Причем учитываются все посты, а не только те, что были сделаны с помощью этого блока (подгружаются данные по API). Поддерживаются правда не все социальные сети (только facebook, Google+, Мой Мир, Одноклассники.ru, ВКонтакте), но большинство основных. Печально, что недавно из этого списка был исключен Твиттер, т.к. он перестал предоставлять эти данные по API.
Например, тут можно укоротить тайтлы для отдачи в Твиттер, ибо там имеется ограничение на их длину (как это сделать читайте ниже), настроить отображение или не отображение счетчиков расшариваний, задать направления раскрывания меню с дополнительными кнопками соцсетей и многое другое. В общем, покопайтесь и посмотрите.
Вообще, в сравнении с родными кнопками расшаривания, которые предлагают установить на сайте сами социальные сети (об этот читайте чуть ниже), блок Яндекса выигрывает в скорости загрузки, компактности и простоте установки и настройки. Например, у меня раньше официальная кнопка Twitter зачастую не подгружалась из-за проблем с их сервером, поэтому по долгу не подгружалось сделанное на Джава скрипт левое меню моего блога. Возможно, что сейчас эта проблема решена, но много скриптов завсегда будет хуже, чем один в плане оптимизации скорости загрузки сайта.
Проблемы с доступностью у Яндекса, думаю, вряд ли возникнут, ибо это хорошо зарабатывающая коммерческая организация, довольно трепетно относящаяся к своему имиджу. К тому же, если у вас , то вы сможете отслеживать статистику кликов по этим кнопочкам, что может быть полезным.
Кроме блока с иконками обычного размера можно сделать блок со счетчиками, а также Яндекс предлагает добавить выпадающее меню с дополнительными социалками, которое будет прятаться под спойлером, расположенном после отображения нужного числа кнопок основных соцсетей (типа Вконтакте, МойМир, ):
Если захотите добавить счетчики к кнопкам в этом блоке (с выпадающим меню), то просто на сайте вставьте к его код (между тегами Div) еще один атрибут: data-counter="« и все. Как я говорил, проще некуда. Счетчики можно будет добавить и к маленьким кнопкам, которые рассмотрены чуть ниже:
Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"
Также можете заменить все иконки на их уменьшенные миниатюры кнопок , что лично мне пригодилось при вставке блока в верхнюю часть всех статей этого блога:
در قسمت اول ، برچسب های باز و بسته شدن SCRIPT مسیر اسکریپت را که از سرور Yandex بارگیری می شود نشان می دهد ، و قسمت دوم شامل خود کد درج است که باید در محل قالب خود در جایی که این بلوک نمایش داده می شود قرار دهید.
نحوه قرار دادن دکمه های اجتماعی از Yandex در سایت
بنابراین ، من کد تماس اسکریپت را به همراه بلوک های Div در مکانی که باید دکمه های شبکه های اجتماعی را نمایش دهید ، وارد می کنم. خوب ، به طوری که بارگذاری آن تاثیری در سرعت بارگذاری صفحه اصلی نداشته باشد ، من به توصیه ای که در مستندات Yandex ارائه شده است ، ویژگی async \u003d "async" را به آن اضافه کردم و بدین ترتیب آن را آغاز کردم. بارگذاری اسکریپت ناهمزمان:
ممکن است یک مشکل ایجاد شود تا در بین بسیاری از فایلهای موتور سایت شما یک موردی پیدا شود که وظیفه تولید همان قسمت پایین کد Html را با برچسب بسته شدن / BODY یا پرونده ای که سر را تشکیل می دهد پیدا کنید. و همچنین مکانی را در پرونده های تم پیدا کنید که در آن باید یک قطعه کد را در برچسب های Div وارد کنید (برای قرار دادن خود دکمه ها).
در اصل ، در وردپرس ، که در جملا ، این کار در یکی از پرونده هایی که از طراحی تم استفاده می شود ، انجام می شود. چون این وبلاگ روی Vorpress کار می کند ، من برای او می گویم.
اگر با آن کار کنید وردپرسسپس برای وارد کردن کد فراخوانی اسکریپت باید فایل footer.php را برای ویرایش باز کنید (در آنجا تگ Body یا header.php را پیدا خواهید کرد (در آنجا برچسبهای Head را پیدا خواهید کرد):
/wp-content/themes/folder_name_of_used_theme_of_of_of_of/footer.php
اکنون فقط برای وارد کردن قسمت دوم کد دکمه های اجتماعی Yandex ، که مسئولیت مکان بلوک با دکمه های موجود در صفحات سایت را دارد ، در جای مناسب در قالب سایت خود یا مستقیماً در مقاله قرار دهید:
به هر حال ، اگر می خواهید دوباره رزرو می کنم هر دکمه ای را حذف کنید از این بلوک ، لازم نیست دوباره به وب سایت طراح در وب سایت Yandex بروید. شما به سادگی می توانید ورودی او را از این لیست حذف کنید (به همراه کاما در زیر آن ، به عنوان مثال ، "vkontakte"). خوب ، شما این نکته را می گیرید ...
خوب ، و همچنین می توانید موقعیت دکمه ها را در داخل بلوک تغییر دهید با استفاده از CSS
Li.ya-share2__item (پیش زمینه: هیچکدام! مهم؛ بالشتک: 0 p 7x 0 7px! مهم؛)
چون من از یک طرح تطبیقی \u200b\u200bبرای دستگاه های تلفن همراه استفاده می کنم ، سپس برای دستگاه هایی با وضوح صفحه پایین ، خط مشابهی را اضافه کردم ، جایی که داخل آن سوئیچ ها کوچکتر قرار می گیرم ، اما این موارد در حال حاضر جزئیات هستند:
Li.ya-share2__item (padding: 0 3px 0 3px! مهم؛)
در بالای مقاله ، من به سادگی قسمت دوم کد را با دکمه های کوچک ، بدون نیاز به تماس مجدد با اسکریپت ، وارد کردم (یکبار در هر صفحه کافی خواهد بود):
احتمالاً در کد بالا ساخت زیر را متوجه شده اید:
عنوان داده: توییتر \u003d ""
این چیست واقعیت این است که عناوین بلند من همیشه صدا می کردند مشکلات ارسال در توییتربنابراین ، من قبلاً مجبور شدم دکمه اصلی را در این شبکه اجتماعی قرار دهم و آن را مانند شکل زیر اصلاح کنید. اکنون توسعه دهندگان Yandex پیرامون پیام اتوماتیک ارسال شده به توییتر نیمه اتوماتیک را انجام داده اند (قبلاً اتوماتیک بوده است). من عنوان داده را اضافه می کنم: ویژگی twitter به کد ، جایی که من طراحی را در آن قرار می دهم ، که وظیفه پیرایش عنوان (عنوان مقاله) را به طول لازم برای توییتر می گذارد.
این کار با استفاده از تابعی از پوشه با موضوع شما انجام می شود ؛ این عملکرد به صورت مرجع انجام می شود و چیزی شبیه به این است:
تابع trim_title_chars ($ count، $ after) ($ title \u003d get_the_title ()؛ if (mb_strlen ($ title)\u003e count count) $ title \u003d mb_substr (عنوان $ ، 0 ، $ count) ؛ دیگری $ $ \u003d \u003d ""؛ echo عنوان $. $ after؛)
در کل ، چیزی شبیه به این در مورد وبلاگ وردپرس من است. در جوملا ، برای درج این بلوک ، استفاده از ماژول کد دلخواه Html ساده تر خواهد بود ، آن را بلافاصله در زیر متن مقاله قرار دهید.
دکمه های رسمی رسانه های اجتماعی
بسیاری از شبکه های اجتماعی خودشان این امکان را به شما می دهند که کد دکمه را بارگیری کنند ، و اغلب حتی می توانید ظاهر و عملکرد آن را شخصی سازی کنید. به عنوان مثال ، می توانید کد اسکریپت را برای به اشتراک گذاشتن پست وارد کنید و تنظیم کنید.
تنظیمات زیادی وجود دارد ، همانطور که می بینید و علاوه بر ظاهر دکمه VKontakte ، می توانید صفحه پیشخوان را نیز نشان دهید که تعداد سهام را نشان می دهد.
دکمه کوچک فیس بوک می توان بدست آورد. سفارشی کردن با نیازهای شما بسیار انعطاف پذیر است و از کتیبه های انگلیسی بر روی آن سردرگم نشوید ، زیرا وقتی کد آن را در وب سایت خود قرار می دهید ، کتیبه ها به صورت خودکار به روسی ترجمه می شوند.
بهتر است چیزی را در قسمت url وارد نکنید ، سپس صفحه ای که این کد در آن قرار دارد به اشتراک گذاشته می شود.
چیزی شبیه به این خواهد بود:
چیزی شبیه به این خواهد بود:
خوب ، البته ، من نمی توانم کمکی به ذکر کنم دکمه توییتر رسمی، که به تازگی ظاهر شده است. سازنده او واقع شده است. به طور طبیعی ، این امکان را برای شمارش تعداد بازتوییت ها فراهم می کند و شما می توانید ظاهر آن را تنظیم کنید:
سپس من کد نتیجه را کمی مطابق با اصل شرح داده شده در بالا مدرن کردم ، به طوری که عناوین طولانی من کوتاه شده و در هنگام اشتراک گذاری مشکلات اضافی برای کاربران ایجاد نمی کنند.
گزینه های دیگر برای دریافت دکمه های رسانه های اجتماعی برای یک سایت
همانطور که قبلاً نیز گفتم انواع سرویس های آنلاین وجود دارد که می توانید اسکریپت دکمه های شبکه های اجتماعی را به صورت رایگان تهیه کرده و چیزهای زیادی را در سایت خود قرار دهید. همه آنها اهداف مختلفی دارند: "از روی قلب" (مانند مورد سرویس Dimox) ، جمع آوری داده های لازم برای سایر سرویس ها برای کار (مانند مورد ApTuLike) یا برای سود (ویروس ها و دیگر کلاهبرداری های غیرقانونی با ترافیک موجود در سایت شما) . برای مثال ، به عنوان افزونه ذکر شده در زیر ، راه حلهای صرفاً پرداخت شده وجود دارد.
دشوار است که بگوییم از این تنوع چه چیزی را انتخاب کنید. من چند کلمه راجع به آنچه شانس خودم را امتحان کردم ، بیان خواهم کرد و در مورد آنها قبلاً هم قبلاً نوشتم.
به طور کلی ، خودتان را ببینید ، مقایسه کنید و انتخاب کنید.
موفق باشید! شما را به زودی در سایت صفحات وبلاگ می بینیم
ممکن است علاقه مند باشید
ما دکمه هایی برای اضافه کردن به شبکه های اجتماعی و بوکمارک ها برای یک وبلاگ در وردپرس ایجاد می کنیم (بدون افزونه و اسکریپت) Likeley - دکمه های اجتماعی مستقل برای سایت 
دکمه های سایت های تلفن همراه از Uptolike + امکان اشتراک گذاری پیوندها در پیام رسان های فوری UpToLike - سازنده دکمه های اجتماعی برای سایت شما با قابلیت های پیشرفته 
دکمه های اشتراک Uptolike - افزونه رایگان برای اضافه کردن دکمه های رسانه های اجتماعی به وردپرس 
uSocial - مروری بر سرویس جدید دکمه های اجتماعی سایت شما 
جذب ترافیک بازدید کنندگان به وب سایت شما با استفاده از روش های SMO (فروم ، شبکه های اجتماعی ، گروه های مشترک) چگونه با استفاده از دکمه های منتهی به صفحات یا گروه های شما در شبکه های اجتماعی و همچنین به فید RSS ، بلوک را به سایت خود اضافه کنید 
Google + 1 و من آن را از Vkontakte و Facebook دوست دارم - نحوه اضافه کردن دکمه هایی مانند وب سایت شما
قبل از بررسی کد نویسی ، بیایید نگاهی بیندازیم و به منابعی که وب جهانی در حال حاضر برای ما فراهم می کند توجه کنیم. به هر حال ، تعداد زیادی از آنها وجود دارد ، ما این دو محبوب ترین را در نظر خواهیم گرفت.
سرویس دیگری که مورد توجه ماست این است که یک سازنده به همان اندازه ساده است ، اما دکمه های بسیار بیشتری با سرویس ها و شبکه ها وجود دارد که برخی از آنها ، اعتراف می کنم ، برای اولین بار دیدم. تفاوت اصلی Yandex.Technologies این است که ما یک اسکریپت کاملاً تولید شده را دریافت می کنیم که پردازش می شود نه ابری بلکه مستقیماً روی سرور ما.
به نظر می رسد با چنین راه حل های شگفت انگیز ، هرگز برای کسی پیش نمی آید که دوباره چرخ را "دوباره اختراع کنند"؟ اما نه ، فیلمنامه مکتوب کسی فقط به اندازه خوبی است که ما خیلی تنبل هستیم تا با آن زحمت بکشیم. البته ، به درستی کار خواهد کرد و کارکردهای خود را انجام می دهد ، اما - این یک راه حل جهانی است که برای کل توده سایت ها نوشته شده است ، یعنی. این نیازها و قراردادهای کوچک شخصی ما را در نظر نمی گیرد.
اول: طراحی دکمه ها در واقع آهن است. بله ، قابل شناسایی است و توسط خود شبکه های اجتماعی ارائه می شود ، اما فقط نیازهای ما را برآورده نمی کند. خوب ، دکمه ها دارای لبه های گرد هستند و طراحی سایت ما نیاز دارد که دکمه مربع باشد ، چه کاری باید انجام دهم؟ - نگاهی به Sprite و دوباره جابجایی! چه کسی آن را امتحان کرده است می داند که این یک کار بی لطف است: با قرار دادن یک دکمه با پنج تا شش تست "به درستی" ممکن است برای قرار دادن آن روی صفحه. و این فقط جایگزینی برای یک / چند دکمه است ، اما اگر سایت به سبک گوتیک است و تمام دکمه ها به تاریکی احتیاج دارند؟
ثانیاً: در قابلیت اطمینان Yandex شکی نیست ، اما دکمه ها ، برخلاف پیشخوان متریک ، به دلایلی به شدت بار می گیرند ، و تأخیر آنها اغلب از محتوای اصلی صفحه مشاهده می شود. این امر به ویژه با اتصال سریع پر سرعت ، هنگامی که صفحه تقریباً فوراً خراب می شود ، قابل توجه است و شما چندین دکمه با دکمه دارید.
سوم: برای آزمون ، یک اسکریپت را در share24 ایجاد کنید - این بزرگ است. آیا همه خطوط کد ارائه شده برای ما واقعا ضروری هستند؟ "من اینطور فکر نمی کنم."
حال بیایید به سمت نوشتن اسکریپت برویم ، به سه قسمت HTML ، CSS و در حقیقت خود کد نوشته شده در JavaScript تقسیم می شود. علاوه بر این ، من برای راحتی ، از کتابخانه jQuery استفاده می کنم.
همه پرونده های لازم را شامل می شود:
حالا اسکریپت را به پرونده share.js اضافه می کنیم ، اینگونه به نظر می رسد:
Var share \u003d (twitter: function ($ this) (var data \u003d share.data ($ this)؛ if (data) (var url \u003d "http://twitter.com/share؟"؛ Url + \u003d "text \u003d "+ encodeURIComponent (data.text)؛ url + \u003d" & url \u003d "+ encodeURIComponent (data.url)؛ url + \u003d" & hashtags \u003d "+" "؛ url + \u003d" & counturl \u003d "+ encodeURIComponent (data.url)؛ share.popup (url)؛)؛ false false؛)، vk: function ($ $) (var data \u003d share.data ($ $)؛ if (data) (var url \u003d "http://vkontakte.ru/ share.php؟ "؛ url + \u003d" url \u003d "+ encodeURIC Component (data.url)؛ url + \u003d" & title \u003d "(! LANG: + encodeURIC کامپوننت (data.title)؛ url + \u003d"&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; } }; !}
اضافه کردن نشانه گذاری به صفحه:
ساختار بسیار ساده است ، یعنی بسته بندی با کلاس اشتراک ، سپس یک div با ویژگی داده-اشتراک-داده ، که در بالا ذکر شد. یک رشته از چهار پارامتر با مقادیر خاص خود تشکیل شده است.
- url - آدرسی که به اشتراک می گذاریم.
- img - تصویر ، در صورت عدم نیاز ، خط خالی را نشان دهید.
- عنوان - عنوان صفحه؛
- متن - توضیحی که ما به آن نیاز داریم.
درون قسمت شکاف دکمه هایی هستند که رویداد onclick روی آنها آویزان است. با کلیک کردن یکی از روشهای گفته شده در بالا فراخوانی می شود.
باقی مانده است که دکمه ها به ظاهر انسان و افزودن CSS اضافه شوند:
اشتراک گذاری (پس زمینه-رنگ: #ececec ؛ نمایشگر: inline-block؛ padding: 7px 5px؛) .shared div: after (محتوای: "" "نمایش: بلوک ؛ واضح: هر دو ؛ ارتفاع: 0 ؛). -چیز (حاشیه سمت چپ: 0؛) .share .twitter ، .share .vk ، .share .facebook (زمینه-تصویر: url (share.png)؛ حاشیه سمت چپ: 7px ؛ مرز-شعاع: 3px ؛ ارتفاع: 24px؛ عرض: 24px؛ float: چپ؛ مکان نما: اشاره گر؛) .share .twitter (پس زمینه-رنگ: # 00aced؛ پس زمینه-موقعیت: 0 -61px؛) .share .twitter: hover (background-color: # 008abe؛ ) .share .vk (پس زمینه-رنگ: # 48729e؛ پس زمینه-موقعیت: 0 -32px؛) .share .vk: hover (پس زمینه-رنگ: # 3a5b7e؛) .share .facebook (background-color: # 3c5a98؛ background) -ترکیب: 0 0؛) .shared .facebook: hover (پس زمینه-رنگ: # 30487a؛)
در نتیجه ، پس از افزودن دکمه CSS ، نتیجه بدست می آید:
فیلمنامه به این شکل تمام شده است ، در مثالی که من فقط از سه شبکه اجتماعی استفاده کردم ، اگر شما نیاز به اتصال دیگران دارید ، این کار دشوار نخواهد بود. برای انجام این کار ، شما باید یک متد جدید به شیء اشتراک اضافه کنید ، فراموش نکنید که HTML و CSS اضافی را نیز اضافه کنید. پیوندهایی که از طریق آنها بازپرداخت در شبکه اجتماعی صورت می گیرد از دو طریق قابل دستیابی است:
- از API شبکه اجتماعی استفاده کنید ، که همیشه کمک نمی کند.
- سرویس مشابه را با استفاده از فشرده ساز یا ابزار دیگری برای توسعه دهنده وب استخراج کنید.
