Les liens dans les histoires ont commencé à apparaître il y a longtemps, mais seuls les comptes officiels pouvaient les utiliser. En mai, il est devenu possible d'ajouter des liens dans les annonces avec placement dans les histoires, mais tous ces mécanismes étaient payants. J'ai reçu des captures d'écran aujourd'hui montrant qu'Instagram commence lentement à permettre aux utilisateurs réguliers d'ajouter des liens actifs vers des sites Web dans leurs histoires.
Comment ajouter un lien vers votre Story Instagram ?
Cette fonctionnalité n'est pas disponible pour tous les comptes Instagram ! Aujourd'hui, les liens dans les Stories ne sont disponibles que :
- Pour les comptes Instagram vérifiés
- Pour les profils avec plus de 10 000 abonnés.
De plus, le lien peut ne pas apparaître immédiatement après avoir reçu 10 000 abonnés. Augmenter les bots jusqu'à 10 000 abonnés ne fonctionne pas toujours. De plus, il est difficile de liquider les bots pour qu'ils ne se désabonnent pas aujourd'hui, et si le nombre d'abonnés au compte tombe à 9 999 ou moins, la possibilité de joindre un lien disparaîtra.
Pour suivre le lien actif depuis l'Historique, l'utilisateur doit faire un "Swipe up". Étant donné que les gens ne sont pas encore habitués à de telles opportunités, je recommanderais en outre de se concentrer sur le lien avec divers liens et appels à l'action. Eh bien, vous êtes des adultes, vous comprenez vous-même de quoi il s'agit, à qui j'enseigne ici.
J'ai déjà écrit sur l'apparition de liens actifs dans Direct, mais je n'ai pas publié d'informations sur le blog. Comme toute autre mise à jour, elle est toujours disponible pour une partie sélectionnée et aléatoire des utilisateurs.
Les dernières mises à jour rendent Instagram encore plus intéressant pour le commerce électronique et les petites entreprises, et la bataille pour les abonnés deviendra encore plus chaude. J'espère seulement qu'Instagram luttera activement contre les liens de spam dans Direct.
J'ai noté l'importance de SMO (Social Media Optimization) dans la promotion de sites Web. Parlons maintenant directement de la façon de faire de l'optimisation sociale sur votre site, ou plutôt, comment ajouter des boutons sociaux réseaux populaires au site Web.
Pour commencer, je vais montrer à quoi cela devrait ressembler sur le site. Sur de nombreux blogs et sites d'actualités, en bas après chaque article, vous pouvez voir quelque chose comme ceci :
Ce sont les boutons sociaux, grâce auxquels le SMO est atteint, puis l'activité sociale. Cet article est consacré à la question de savoir où se procurer le code de ces réseaux sociaux. boutons et comment les installer correctement sur votre site. Envisagez d'installer Google+ en premier.
1. Ajouter un bouton Google+ au site
2. Ajout d'un bouton "J'aime" de Vkontakte et Facebook au site
2.1. j'aime de facebook
Commençons par obtenir le code du bouton pour Facebook. Pour cela, rendez-vous sur cette page : https://developers.facebook.com/docs/plugins/like-button . Vous devriez voir l'image suivante :
Le coin supérieur droit montre à quoi ressemblera le bouton sur votre site. Regardons les paramètres qui peuvent être définis :
1. URL pour aimer
C'est un paramètre optionnel. Si vous laissez le champ vide, chaque page aura son propre compteur de likes individuel. Si vous y entrez une adresse URLa spécifique, le compteur en sera un (les likes sont additionnés à partir de toutes les pages de ce site).
2. Bouton Envoyer
Ajoutez ou supprimez un bouton pour envoyer des messages. Je recommande de supprimer ce bouton, car notre objectif est simplement de mettre un bouton "J'aime", bien que vous puissiez avoir des objectifs complètement différents.
3. Style de mise en page
Style d'affichage des boutons. Personnellement, je préfère la norme.
4. Largeur
Largeur du bouton en pixels. Je ne mets généralement pas plus de 100 pixels.
5.Verbe à afficher
Ce qui sera affiché sur le bouton : "J'aime" ou "Je recommande". Je choisis généralement la première option (c'est la valeur par défaut) car c'est plus façon efficace motiver l'utilisateur à aimer.
6. Jeu de couleurs
Couleur : au choix blanc ou noir.
7 Police
Il suffit de définir la police pour l'inscription "J'aime ça".
Après avoir défini les paramètres, nous gagnons de l'argent sur le bouton "obtenir le code" et le plaçons sur le site. Code bouton normal pour facebook :
<-- placer cette partie du code en fin de page--> <-- эту часть кода нужно разместить в месте отображения: -->
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"
Также можете заменить все иконки на их уменьшенные миниатюры кнопок , что лично мне пригодилось при вставке блока в верхнюю часть всех статей этого блога:
Dans la première partie, les balises SCRIPT d'ouverture et de fermeture contiennent le chemin d'accès au script qui sera chargé à partir du serveur Yandex, et la deuxième partie contient le code d'insertion lui-même, qui devra être placé à la place de votre modèle où cela bloc doit être affiché.
Comment insérer des boutons sociaux de Yandex sur le site
Par conséquent, j'insère le code d'appel du script avec le bloc Div à l'endroit où vous souhaitez afficher les boutons du réseau social. Eh bien, pour que son chargement n'affecte pas la vitesse de chargement de la page principale, j'ai, sur les conseils donnés dans la documentation Yandex, ajouté l'attribut async="async", l'initiant ainsi chargement de script asynchrone:
Le problème peut se poser afin de trouver parmi les nombreux fichiers du moteur de votre site celui qui est responsable de la formation de la partie la plus basse Code HTML avec la balise fermante /BODY ou celle qui forme la tête. Et trouvez également un endroit dans les fichiers de thème où vous devez insérer un fragment de code dans les balises Div (pour placer les boutons eux-mêmes).
En principe, aussi bien dans WordPress que dans Joomla, cela se fait dans l'un des fichiers du thème de conception utilisé. Car Puisque ce blog est propulsé par Vorpress, je parlerai pour lui.
Si vous travaillez avec Wordpress, puis pour insérer le code d'appel du script, vous devrez ouvrir le fichier footer.php pour l'éditer (vous y trouverez la balise de fermeture Body ou header.php (vous y trouverez les balises Head) du dossier :
/wp-content/themes/folder_name_with_the_design_the_used/footer.php
Il ne reste plus qu'à insérer la seconde partie du code au bon endroit de votre template de site ou directement dans l'article boutons sociaux Yandex, qui est responsable de l'emplacement du bloc avec des boutons sur les pages du site :
Au fait, je referai une réservation si vous le souhaitez supprimer n'importe quel boutonà partir de ce bloc, il n'est pas nécessaire de revenir au constructeur sur le site Yandex. Il sera possible de simplement supprimer son entrée de cette liste (avec une virgule qui la suit, par exemple, "vkontakte"). Bon, vous voyez l'idée...
Eh bien, vous pouvez aussi changer la position des boutons à l'intérieur du bloc avec CSS.
Li.ya-share2__item (arrière-plan : aucun ! important ; rembourrage : 0 7px 0 7px! important ;)
Car J'utilise un pod adaptatif appareils mobiles mise en page, j'ai ajouté une ligne similaire pour les appareils à faible résolution d'écran, où j'ai défini des retraits légèrement plus petits, mais ce sont déjà des détails :
Li.ya-share2__item (remplissage : 0 3px 0 3px ! important ;)
Au-dessus de l'article, j'ai juste collé la deuxième partie du code avec les petits boutons sans relancer le script (une fois par page suffit) :
Vous avez probablement remarqué la construction suivante dans le code ci-dessus :
Titre des données : twitter=""
Qu'est-ce que c'est ça? Le fait est que mes longs titres s'appelaient toujours problèmes de publication sur twitter, j'avais donc l'habitude de mettre le bouton d'origine de ce réseau social et de le modifier un peu, comme indiqué ci-dessous. Maintenant, les développeurs de Yandex ont fait un découpage semi-automatique du message envoyé à Twitter (il était automatique auparavant). Celles. J'ajoute l'attribut data-title:twitter au code, où je place une construction à l'intérieur qui est chargée de couper le titre (titre de l'article) à la longueur requise par Twitter.
Cela se fait en utilisant une fonction du dossier avec votre thème - la fonction elle-même est donnée par le lien et ressemble à ceci :
Fonction trim_title_chars($count, $after) ( $title = get_the_title(); if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count); else $after = ""; echo $titre.$après; )
En général, quelque part comme ça dans l'aspect qui concerne mon blog sur WordPress. Dans Joomla, pour insérer ce bloc, il sera probablement plus facile d'utiliser le module Custom Html Code, en le plaçant dans la position du modèle quelque part immédiatement sous le texte de l'article.
Boutons officiels de médias sociaux
De nombreux réseaux sociaux eux-mêmes offrent à chacun la possibilité de télécharger le code du bouton, et souvent avec cela, vous pouvez même personnaliser son apparence et ses fonctionnalités. par exemple, vous pouvez configurer et obtenir le code de script pour partager une publication dans .
Comme vous pouvez le voir, il y a pas mal de paramètres, et en plus de l'apparence du bouton Vkontakte, vous pouvez également configurer l'affichage d'un compteur indiquant le nombre de partages.
bouton Facebook peut être reçu. Il est très flexible pour s'adapter à vos besoins, et ne vous laissez pas confondre par les inscriptions en anglais dessus, car lorsque vous placez son code sur votre site, les inscriptions seront automatiquement traduites en russe.
Il vaut mieux ne rien insérer dans le champ url, alors la page sur laquelle se trouve ce code sera partagée.
Cela donnera quelque chose comme ça :
Cela donnera quelque chose comme ça :
Et, bien sûr, je ne peux m'empêcher de mentionner bouton Twitter officiel qui est apparu relativement récemment. Son constructeur est situé . Naturellement, il offre la possibilité de compter le nombre de retweets et vous pourrez paramétrer son apparence :
J'ai ensuite légèrement modernisé le code obtenu selon le principe décrit ci-dessus, afin que mes titres longs soient coupés et ne créent pas de problèmes supplémentaires pour les utilisateurs lors du partage.
Autres options pour obtenir des boutons de médias sociaux pour le site
Comme je l'ai déjà dit, il existe de nombreux services en ligne de toutes sortes où vous pouvez prendre gratuitement un script de boutons de réseaux sociaux et le mettre sur votre site. Tous ont des objectifs différents : « du cœur » (comme dans le cas du service Dimox), pour collecter des données nécessaires au fonctionnement d'autres services (comme dans le cas d'UpTooLike) ou à des fins lucratives (virus et autres fraudes illégales avec le trafic que vous avez sur votre site) . Il existe aussi des solutions simplement payantes, par exemple, comme le plugin mentionné ci-dessous.
Il est difficile de dire quoi choisir parmi cette variété. Je dirai quelques mots sur ce que j'ai eu la chance d'essayer moi-même et sur ce que j'ai déjà écrit plus tôt.
En général, voyez par vous-même, comparez et choisissez.
Bonne chance à toi! A bientôt sur le site des pages du blog
Vous pourriez être intéressé
Nous créons des boutons pour ajouter aux réseaux sociaux et des signets pour un blog WordPress (sans plugins ni scripts) J'aime - boutons sociaux hors ligne pour le site 
Boutons pour sites mobiles d'Uptolike + possibilité de partager des liens dans les messageries instantanées UpToLike - créateur de boutons sociaux pour votre site Web avec des fonctionnalités étendues 
Boutons de partage Uptolike - Plugin gratuit pour ajouter des boutons de médias sociaux à WordPress 
uSocial - un examen du nouveau service de boutons sociaux pour votre site Web 
Attirer du trafic de visiteurs sur votre site en utilisant des méthodes SMO (forums, réseaux sociaux, groupes d'abonnement) Comment ajouter à votre site un bloc avec des boutons menant à vos pages ou groupes dans les réseaux sociaux, ainsi qu'au flux RSS 
Google+1 et j'aime de Vkontakte et Facebook - comment ajouter des boutons similaires à votre site
Avant de plonger dans le codage, jetons un coup d'œil et prêtons attention aux ressources que le Web mondial nous fournit déjà. Soit dit en passant, il y en a beaucoup, mais nous considérerons les deux plus populaires.
Un autre service digne de notre attention est le même constructeur simple, mais il y a beaucoup plus de boutons avec des services et des réseaux, dont certains, pour être honnête, que j'ai vus pour la première fois. La principale différence avec Yandex.Technologies est que nous obtenons un script entièrement généré qui ne sera pas traité dans le cloud, mais directement sur notre serveur.
Il semblerait qu'avec des solutions aussi merveilleuses, il ne viendrait plus jamais à l'esprit de « réinventer la roue » ? Mais non, un scénario écrit par quelqu'un n'est bon que si nous sommes nous-mêmes trop paresseux pour nous en soucier. Bien sûr, cela fonctionnera correctement et remplira ses fonctions, mais c'est une solution universelle écrite pour la masse générale des sites, c'est-à-dire. il ne tient pas compte de nos petits besoins personnels et de nos conventions.
Premièrement : le design des boutons est en fait en fer. Oui, il est reconnaissable et fourni par les réseaux sociaux eux-mêmes, mais il ne répond tout simplement pas à nos besoins. Eh bien, les boutons ont des bords arrondis, et la conception de notre site exige que le bouton soit carré, que dois-je faire ? – Prenez un sprite et redessinez ! Ceux qui l'ont essayé savent que c'est une tâche ingrate : remplacer un bouton se heurte à cinq ou six tentatives pour le placer "correctement" sur le sprite. Et ce n'est qu'un remplacement pour un / plusieurs boutons, mais que se passe-t-il si le site est de style gothique et que tous les boutons doivent être sombres ?
Deuxièmement, il n'y a aucun doute sur la fiabilité de Yandex, mais les boutons, contrairement au compteur métrique, sont pour une raison quelconque fortement chargés et leur retard visible par rapport au contenu principal de la page se produit souvent. Cela est particulièrement visible avec une bonne connexion haut débit, lorsque la page se bloque presque instantanément et que vous avez plusieurs blocs avec des boutons.
Troisièmement : pour le test, générez un script sur share24 - c'est gros. Avons-nous vraiment besoin de toutes les lignes de code fournies ? - Je ne pense pas.
Passons maintenant à l'écriture du script lui-même, il sera divisé en trois parties : HTML, CSS et, en fait, le code lui-même, écrit en JavaScript. De plus, j'utiliserai la bibliothèque jQuery pour plus de commodité.
Nous connectons tous les fichiers nécessaires :
Maintenant, nous ajoutons un script au fichier share.js, il ressemblera à ceci :
Var share = ( 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); ); return false; ), 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; } }; !}
Ajouter un balisage à la page :
La structure est assez simple, à savoir un wrapper avec la classe share, suivi d'un div avec l'attribut data-share-data, qui a été mentionné ci-dessus. La chaîne est formée de quatre paramètres avec leurs propres valeurs.
- url - l'adresse que nous partageons ;
- img - image, si elle n'est pas nécessaire, spécifiez une chaîne vide ;
- titre – titre de la page ;
- le texte est la description dont nous avons besoin.
À l'intérieur de la div se trouvent les boutons eux-mêmes avec l'événement onclick accroché dessus. Au clic, l'une des méthodes décrites ci-dessus sera appelée.
Il ne reste plus qu'à donner un aspect humain aux boutons et ajouter du CSS :
Share( background-color: #ececec; display: inline-block; padding: 7px 5px; ) .share div:after( content: ""; display: block; clear: both; height: 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 ; largeur : 24px ; flottant : gauche ; curseur : pointeur ; ) .share .twitter( couleur d'arrière-plan : #00aced ; position d'arrière-plan : 0 -61px ; ) .share .twitter:hover( couleur d'arrière-plan : #008abe ; ) .share .vk (couleur d'arrière-plan : #48729e ; position d'arrière-plan : 0 - 32 px ; ) -position: 0 0; ) .share .facebook:hover( background-color: #30487a; )
En conséquence, après avoir ajouté le CSS du bouton, cela ressemble à :
Ceci termine l'écriture du script, dans l'exemple je n'ai utilisé que trois réseaux sociaux, si vous avez besoin de connecter d'autres personnes, alors ce ne sera pas difficile. Pour ce faire, vous devez ajouter une nouvelle méthode à l'objet de partage, en vous rappelant d'ajouter également du HTML et du CSS supplémentaires. Les liens qui repostent sur le réseau social peuvent être obtenus de deux manières :
- Utilisez l'API du réseau social, qui n'aide pas toujours ;
- Sélectionnez un service similaire à l'aide de Firebug ou d'un autre outil pour un développeur Web.
