Clics du bouton de partage sur les réseaux sociaux. Quel est l'avantage de vos propres boutons sociaux par rapport aux services et plugins. Connexion des styles CSS
Il existe désormais de nombreuses façons d’ajouter des boutons de réseaux sociaux à un site Web ; il y a le choix, et c’est une bonne nouvelle. Les boutons sociaux jouent un rôle important sur la page ; avec leur aide, comme beaucoup le savent déjà, vous pouvez rapidement republier n'importe quelle publication dans l'un des éléments sélectionnés. réseaux sociaux. Les boutons sociaux d’un site Web sont désormais placés n’importe où, mais parfois pas là où ils devraient être.
Boutons sociaux pour le siteBeaucoup de gens savent déjà à quel point les réseaux sociaux sont développés aujourd'hui et à quel point il est formidable que votre site Web dispose de boutons comme ceux-ci avec lesquels vous pouvez ajouter votre publication préférée ou une partie d'une publication sur votre mur. Avec cette action, non seulement vous commentez ou republiez le message, mais vous donnez également signal supplémentaire pour les moteurs de recherche.
C'est le rêve de tout propriétaire de site Web si tous ses messages sont republiés par les lecteurs sur leurs pages sur l'un des réseaux sociaux. De nos jours, la demande est la plus forte sur VKontakte, Facebook, Twitter et Odnoklassniki. J'ajouterais également LiveJournal, liveinternet et Blogger. Il est conseillé d'ajouter ces boutons au site pour un confort d'utilisation total.
Twitter, en particulier, mérite aujourd'hui de plus en plus d'attention, grâce à son aide, vos nouvelles publications apparaissent plus rapidement dans l'index des moteurs de recherche.
Si vous êtes propriétaire d'un site Web, vous devriez probablement avoir un compte sur liveinternet ou LiveJournal. Afin de ne pas ajouter à chaque fois de nouvelles entrées à ces services, la présence de leurs boutons fait gagner du temps. De plus, de nombreuses personnes utilisent ces services et souhaitent peut-être également republier votre entrée dans leur agenda.
Il existe plusieurs moyens optimaux comment ajouter rapidement boutons sociaux pour le site. Cela peut être fait en utilisant services en ligne, qui vous aidera rapidement et sans problème. Ou directement via chaque réseau social séparément. Ici, chacun a son propre choix. J'avais l'habitude d'ajouter des boutons séparément via chaque réseau social, mais maintenant je les ai installés à l'aide du service.
Il existe un service similaire, il s'appelle share42. De nombreux documents ont été écrits à ce sujet, sur sa qualité et sur la manière dont il devrait être utilisé. Bien, mais pour utilisateur régulier, qui n'y comprend rien, sera difficile à gérer.
Pour une si petite tâche, copier des dossiers sur l'hébergement, puis s'occuper des styles, cela ne règne plus. Il existe d'autres options dans lesquelles vous devez copier et coller du code prêt à l'emploi sans aucun dossiers supplémentaires. Alors oubliez ce service.
Ajoutez uniquement les boutons de réseaux sociaux les plus élémentaires que la plupart des gens utilisent ; n’ajoutez pas des dizaines de boutons inutiles et oubliés.
Ce que vous pouvez utiliser aujourd’hui pour ajouter des boutons sociaux à votre site Web :
Il n’est probablement pas nécessaire d’intervenir ailleurs ; il n’y a pas de meilleur moyen de le trouver. Chacune de ces options est bonne à sa manière. Si vous connaissez un moyen plus pratique ou attrayant, écrivez-nous dans les commentaires.
Des boutons de réseaux sociaux doivent être insérés à la fin de chaque article afin qu'après lecture, un visiteur du site puisse éventuellement republier votre message. Il ne devrait pas les chercher quelque part en fin de page. Les endroits les plus optimaux, à mon avis, où ces boutons devraient être placés sont dans la barre latérale et immédiatement à la fin de chaque article.
Jusqu'à j'aimeDANS à l'heure actuelle J'utilise moi-même ce service, je l'aime. En plus de sa commodité, le service uptolike possède plusieurs privilèges par rapport aux autres du même type.
- Large sélection de boutons de réseaux sociaux ;
- Les boutons sont adaptés à appareils mobiles;
- La possibilité de citer n'importe quelle partie du texte sur les réseaux sociaux ;
- Vous pouvez ajouter un bouton en haut ;
- Possibilité d'ajouter une fenêtre pop-up pour un abonnement à un groupe VKontakte ;
- Sélection de la taille de l'icône ;
- Choisir un style d'icône pour le site ;
- Ajoutez un effet de survol ;
- Changer l'arrière-plan du bouton, la couleur du texte, l'arrière-plan du compteur ;
- Augmentez ou diminuez le texte dans le compteur.
Les privilèges sur d’autres services similaires sont suffisants pour l’utiliser. Dans ce cas, seul un petit code est ajouté sous la forme d'un script et quelques lignes avec des styles. Il n'y a pas de lien tiers, je l'ai vérifié via le service de lien sortant. Si je me trompe, vous pouvez me corriger.
À part cela, que peut faire d’autre le service uptolike ?
Le plus paramètres importants. Nous choisissons les boutons sociaux du site que vous souhaitez voir. Si nécessaire, vous pouvez ouvrir la liste et en sélectionner quelques autres parmi la majorité. Cochez la case d'assistance. Après ça sur téléphones portables, les boutons des réseaux sociaux seront toujours affichés en bas de l'écran.
Nous choisissons la position horizontale des boutons, la taille et le style. Nous le concevons comme vous le souhaitez et ajoutons un effet de survol. Vous n'avez rien d'autre à faire. Pour générer un code compteur, vous devez préciser l'adresse du site Internet et boîte aux lettres. Immédiatement après, le code pour insérer des boutons sociaux sur le site apparaîtra.
Si vous avez un site WordPress, ouvrez le fichier single.php et insérez le code terminé immédiatement après la fin du contenu de la page. Actualisez la page et voyez ce qui se passe. Il n'y a rien de compliqué.
Yandex
Sélectionnez les icônes de service requises. Twitter n'est disponible que sous forme d'icônes, sans compteurs. Choisir apparence blocs et en dessous il y aura un code d'intégration prêt à l'emploi. Comme cela a été dit plus tôt, nous n'ajoutons rien d'autre à Yandex, tout est modeste et de bon goût.
Méthode d'ajout manuelDans cette méthode, vous devez ouvrir chaque réseau social séparément et configurer chaque bouton de republication séparément. Pour ajouter un bouton Facebook, allez ici. Pour mes camarades de classe et mon monde, vous devez ajouter des données. Pour Twitter, tout se passe sur . Pour ajouter un bouton VKontakte, accédez à cette page.
Vous disposerez d'un code tout fait uniquement issu des réseaux sociaux, sans aucun scripts inutiles. Probablement le plus meilleure façon pour ajouter des boutons de réseaux sociaux pour le site. La difficulté vient du fait que vous devez couper chaque bouton séparément, puis tout insérer au même endroit et utiliser styles CSS aligner dans une colonne. Si cela ne vous pose aucune difficulté, vous pouvez essayer.
VKontaktePour ajouter un bouton VKontakte, cliquez sur Connexion des sites et widgets, en bas il y aura liste complète tous les ajouts possibles. Là, vous pouvez également ajouter des commentaires à la page, publier sur le mur, ajouter votre propre groupe, des recommandations, des sondages, vous abonner à l'auteur et publier des liens. Dans notre cas, sélectionnez Publier les liens.
Il n'y a rien de compliqué, on sélectionne le style du bouton (avec ou sans compteur), on écrit le texte sur le bouton, une option de logo, et en dessous il y aura un code d'intégration prêt à l'emploi. Je l'ai utilisé moi-même méthode manuelle des ajouts, mais j'essaye en ce moment service tiers. Voyons ce qu'il en résulte. Si je ne suis pas satisfait, je reviens immédiatement à la méthode manuelle.
PlusUne autre façon d'ajouter des boutons pour un site consiste à utiliser le service Pluso. Le service est également bon, beaucoup ont remarqué des boutons. Le choix d'options de conception est large, en plus il y en a pour tous les goûts grandes tailles images. La possibilité d'ajouter des réseaux n'est en aucun cas inférieure à d'autres services similaires. Aucun fichier n'est requis pour l'installation, juste du code.
Choisissez n'importe quel style de conception et ajoutez services nécessaires. Il sera affiché un peu plus bas exemple tout faità quoi tout cela ressemblera sur la page. La taille de l'icône peut être sélectionnée grande, moyenne ou petite. Egalement, des icônes carrées ou rondes pour le site, sur une ou deux lignes, horizontales ou verticales. Avec ou sans compteur, sans arrière-plan, ou définissez l'arrière-plan en fonction du design de votre site Web.
Après toutes ces étapes, vous trouverez ci-dessous un code prêt à l'emploi à insérer dans la page. Si vous devez coller page d'accueil, on fouille dans le fichier index.php, si dans toutes vos entrées, ajoutez le code au fichier single.php immédiatement après la fin de l'entrée.
WordPressSi vous ne comprenez rien dans ce code, ce qui doit être copié, où et comment tout cela fonctionne, il existe une issue. Si vous disposez d’un moteur WordPress, vous pouvez installer un plugin avec lequel vous disposerez de boutons de réseaux sociaux. Aujourd'hui, il existe tout simplement un grand nombre de ces plugins. Accédez au panneau d'administration - Plugins. Vous pouvez immédiatement écrire « boutons sociaux », « social » ou « VKontakte » dans la recherche de plugins. Je suis sûr que vous trouverez quelque chose.
Parmi la majorité des plugins similaires pour WordPress, en regardant la note, voici ceux qui sont les plus notés :
En fait, il existe de nombreux plugins similaires, vous devez installer et trier celui que vous préférez, qui fonctionne correctement, ce qu'il affiche et comment vous pouvez le personnaliser vous-même. Regardons l'exemple du premier plugin de ce type, Social Share Buttons pour WordPress.
Le plugin lui-même est en russe, cela ne posera aucun problème. Après l'installation, il apparaîtra dans le menu de gauche nouveau bouton Partager les boutons. Dans les paramètres principaux, nous mettons le logo du site et écrivons du texte devant les boutons sociaux.
Assurez-vous d'activer la génération de métadonnées ; le titre et la description de la page seront inclus. Alignez les boutons horizontalement et choisissez leur emplacement. Nous sélectionnons uniquement dans les publications. Si vous le souhaitez, vous pouvez exclure les pages nécessaires. Tout en bas, vous devez indiquer votre pseudo Twitter.
Sur onglet suivant Partager les paramètres sélectionnez le style de conception du bouton. Ci-dessous, vous pouvez activer ou désactiver les réseaux sociaux inutiles et ajouter des retraits pour l'ensemble du bloc en haut ou en bas. Il n’est pas nécessaire de mettre du code supplémentaire n’importe où, le plugin fera tout pour vous.
Le choix vous appartient de la méthode que vous utiliserez. Ajoutez des icônes de réseaux sociaux via uptolike, Pluso ou Yandex. Vous ne devriez pas installer immédiatement un plugin sur WordPress ; essayez de tout faire manuellement ou en utilisant un service.
Si vous en connaissez d'autres bon service ou un moyen d'ajouter des boutons sociaux pour le site, je serais reconnaissant pour votre commentaire.
Bonjour, chers lecteurs du site blog. Comme vous l'avez probablement déjà deviné d'après le titre, nous parlerons des boutons dits sociaux, qui peuvent très sérieusement contribuer à attirer des articles sur votre site Web, avec une combinaison réussie de circonstances et haute qualité l'article lui-même, un grand nombre de visiteurs des réseaux sociaux et des services.
Les signaux sociaux sont également pris en compte moteurs de recherche lors du classement de votre site. Grande quantité les partages sur des comptes de qualité sur Twitter, Google+, Facebook (il est possible que VKontakte et d'autres réseaux soient également pris en compte) peuvent permettre de gravir un certain nombre d'échelons plus haut et, peut-être, d'entrer dans le Top et d'y rester si facteurs comportementaux ne vous laissera pas tomber.
En général, les services qui fournissent des scripts (boutons) pour partager du contenu dans réseaux sociaux il y en a beaucoup sur Internet, mais il ne faut pas leur faire confiance à tous (ils pourraient facilement vous utiliser ou d'une autre manière pour de mauvaises raisons). Et ils sont capables de simplement « suspendre un site » si leur code n'est pas très bien placé et que les capacités informatiques de leurs serveurs ne sont pas très puissantes. Bien qu'il existe des options décentes qui ne présentent pas ces défauts, je les ai énumérées à la fin de cette publication.
Il est également possible d'afficher sur les boutons le nombre de partages vers un réseau social particulier. De plus, tous les posts sont pris en compte, et pas seulement ceux réalisés à l'aide de ce bloc (les données sont chargées via API). Certes, tous les réseaux sociaux ne sont pas pris en charge (uniquement Facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), mais la plupart des principaux. Il est triste que Twitter ait été récemment supprimé de cette liste parce que... il a cessé de fournir ces données via l'API.
Par exemple, vous pouvez ici raccourcir les titres à partager sur Twitter, car leur longueur est limitée (lisez comment procéder ci-dessous), configurer l'affichage ou non des compteurs de partage, définir les directions d'ouverture des menus avec boutons supplémentaires les réseaux sociaux et bien plus encore. En général, fouillez et jetez un œil.
De manière générale, par rapport aux boutons de partage natifs, qui proposent d'installer des réseaux sociaux sur le site (lire à ce sujet ci-dessous), le bloc Yandex gagne en vitesse de chargement, en compacité et en facilité d'installation et de configuration. Par exemple, dans le passé, mon bouton Twitter officiel ne se chargeait souvent pas en raison de problèmes avec leur serveur, donc le script créé en Java ne se chargeait pas pendant longtemps menu de gauche mon blog. Il est possible que ce problème soit désormais résolu, mais de nombreux scripts seront toujours pires qu'un seul en termes d'optimisation de la vitesse de chargement du site.
Je pense qu'il est peu probable que Yandex ait des problèmes d'accessibilité, car il s'agit d'une organisation commerciale bien rémunérée et assez sensible à son image. De plus, si c'est le cas, vous pouvez alors suivre les statistiques de clics sur ces boutons, ce qui peut être utile.
En plus d'un bloc avec des icônes de taille normale, vous pouvez créer un bloc avec des compteurs, et Yandex suggère également d'ajouter un menu déroulant avec des réseaux sociaux supplémentaires, qui sera caché sous un spoiler situé après avoir affiché le nombre requis de boutons pour les principaux réseaux sociaux (tels que VKontakte, MoiMir, ) :
Si vous souhaitez ajouter des compteurs aux boutons de ce bloc (avec un menu déroulant), alors insérez simplement un attribut supplémentaire dans son code sur le site (entre les balises Div) : data-counter="" et c'est tout. Comme je l'ai dit, cela ne pourrait pas être plus simple. Vous pouvez également utiliser des compteurs qui seront ajoutés aux petits boutons, qui sont décrits ci-dessous :
Services de données = "vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"
Vous pouvez également remplacer toutes les icônes par leurs miniatures de boutons plus petites, ce que j'ai personnellement trouvé utile lors de l'insertion d'un bloc dans partie supérieure tous les articles de ce blog :
Dans la première partie, les balises SCRIPT d'ouverture et de fermeture contiennent le chemin d'accès au script, qui sera chargé depuis le serveur Yandex, et la deuxième partie contient le code d'insertion lui-même, qui devra être placé à l'endroit de votre modèle où ce bloc sera affiché.
Comment insérer des boutons sociaux de Yandex sur un site WebPar conséquent, j'insère le code d'appel du script avec le bloc Div à l'endroit où les boutons des réseaux sociaux doivent être affichés. Eh bien, pour que son chargement n'affecte pas la vitesse de chargement de la page principale, j'ai, suivant les conseils donnés dans la documentation Yandex, lui ai ajouté l'attribut async="async", l'initiant ainsi chargement asynchrone scénario:
Le problème peut se poser de trouver parmi les nombreux fichiers du moteur de votre site celui qui est responsable de la formation de la partie toute en bas Code HTML avec la balise de fermeture /BODY ou celle qui forme la Tête. Et trouvez également une place dans les fichiers de thème où vous devez insérer un morceau de code dans 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 utilisé. Parce que Ce blog fonctionne sur WordPress, je vais donc en parler.
Si vous travaillez avec WordPress, alors pour insérer le code d'appel du script, vous devrez ouvrir le fichier footer.php pour le modifier (vous y trouverez la balise de fermeture Body ou header.php (vous y trouverez Balises de tête) du dossier :
/wp-content/themes/nom du dossier_with_theme_used/footer.php
Il ne reste plus qu'à le coller dans bon endroit votre modèle de site internet ou la deuxième partie du code 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 ferai à nouveau une réservation : si vous souhaitez supprimer un bouton de ce bloc, vous n'avez pas besoin de vous adresser à nouveau au constructeur sur le site Yandex. Vous pouvez simplement supprimer son entrée de cette liste (ainsi que la virgule qui la suit, par exemple « vkontakte »). Eh bien, vous comprenez...
Eh bien, vous pouvez également modifier le positionnement des boutons à l'intérieur du bloc en utilisant CSS.
Li.ya-share2__item (arrière-plan : aucun ! important ; rembourrage : 0 7px 0 7px ! important ;)
Parce que J'utilise une mise en page adaptative pour les appareils mobiles, donc pour les appareils avec de faibles résolutions d'écran, j'ai ajouté une ligne similaire, où j'ai défini des retraits légèrement plus petits, mais ce sont des détails :
Li.ya-share2__item (padding:0 3px 0 3px!important;)
En général, c’est le cas de mon blog WordPress. Dans Joomla, pour insérer ce bloc, il sera probablement plus simple d'utiliser le module Custom Html Code, en le plaçant dans la position du modèle quelque part immédiatement en dessous du texte de l'article.
Boutons officiels des réseaux sociauxDe nombreux réseaux sociaux eux-mêmes offrent à chacun la possibilité de télécharger le code du bouton, et souvent vous pouvez même personnaliser son apparence et ses fonctionnalités. Par exemple, vous pouvez configurer et recevoir le code de script pour partager une publication dans .
Comme vous pouvez le constater, il existe de nombreux paramètres, et en plus de l'apparence du bouton VKontakte, vous pouvez également personnaliser l'affichage d'un compteur indiquant le nombre de partages.
Vous pourrez obtenir un bouton Facebook. Il est personnalisé de manière très flexible pour répondre à vos besoins, et ne vous laissez pas dérouter par les inscriptions en anglais qui y figurent, car lorsque vous placerez son code sur votre site Web, les inscriptions seront automatiquement traduites en russe.
Il vaut mieux ne rien insérer dans le champ URL, la page sur laquelle se trouve ce code sera alors partagée.
Cela ressemblera à ceci :
Cela ressemblera à ceci :
Et bien sûr, je ne peux m’empêcher de mentionner le bouton Twitter officiel, apparu relativement récemment. Son constructeur est localisé. Bien entendu, il offre la possibilité de compter le nombre de retweets et vous aurez la possibilité de paramétrer son apparence :
J'ai ensuite légèrement modernisé le code résultant 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 aux utilisateurs lors du partage.
Autres options pour obtenir des boutons de réseaux sociaux pour votre site WebComme je l'ai déjà dit, il existe de nombreux services en ligne de toutes sortes où vous pouvez prendre gratuitement un script pour les boutons de réseaux sociaux et le mettre sur votre site Web. Ils poursuivent tous des objectifs différents : « du cœur » (comme dans le cas du service Dimoxa), collecter des données nécessaires au fonctionnement d'autres services (comme dans le cas d'ApTuLike) 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 vais dire quelques mots sur ce que j’ai eu la chance d’essayer moi-même et sur ce que j’ai déjà écrit auparavant.
En général, regardez, comparez et choisissez vous-même.
Bonne chance à vous ! A bientôt sur les pages du site blog
Vous pouvez regarder plus de vidéos en allant sur ");">
Vous pourriez être intéressé
Nous créons des boutons à ajouter aux réseaux sociaux et aux signets pour un blog WordPress (sans plugins ni scripts) Probablement - boutons sociaux autonomes pour le site 
Boutons pour sites mobiles d'Uptolike + la possibilité de partager des liens dans les messageries UpToLike - un constructeur de boutons sociaux pour votre site avec des fonctionnalités étendues
Ici, la phrase « Qui veut acheter un logiciel avec une remise de 8 % sur la promotion ? » rédigé par l'utilisateur lui-même, et ci-dessous voici à quoi ressemble le lien vers le site sur le réseau social. Pas très beau, non ?
alors le lien sur le réseau social ressemblera à ceci :
Ici "Aujourd'hui, c'est l'anniversaire d'allsoft.ru - 8 ans :)" est le texte écrit par l'utilisateur, le reste est constitué d'informations provenant des balises méta. Vous pouvez en savoir plus sur ces balises méta sur la page Facebook Developers.facebook.com/docs/share, d'autres réseaux sociaux les comprennent également très bien.
Comment fonctionne généralement ce mécanisme :
1. Lorsque l'utilisateur clique sur le bouton, le widget transmet un lien vers la page au serveur du réseau social.
2. Serveur social Le réseau lui-même accède à ce lien et lit les informations sur la page - titre, description, image.
3. Serveur social le réseau met en cache les informations de la page de son côté et les affiche sur les pages des réseaux sociaux
Comment envoyer différentes descriptions pour une page.
Par exemple, lors de la création d'une page promotionnelle sur allsoft.ru avec un test humoristique, il était nécessaire de transmettre différentes descriptions aux réseaux sociaux pour le nombre différent de points marqués par l'utilisateur lors du test. Puisque le réseau social reçoit une description d'une page en cliquant sur un lien, différents liens sont nécessaires pour différentes descriptions. De plus, Twitter n'autorise que 140 caractères, il nécessite donc une description distincte et plus courte.
Nouveau Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), lien : "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific : ( twitter : ( titre : "Résultat du test : Le Dragon est presque votre point fort ! Vous ne pouvez pas encore enseigner la dragonologie, mais sur le bon chemin!" ) ) ));
1. Ici ya_share_normal est l'identifiant de l'élément sur la page (), dans lequel le bloc avec les boutons sociaux apparaîtra, link est le lien, plus dans serviceSpecific pour Twitter nous indiquons le titre, qui diffère de ce qui est dans l'og : balise méta titre.
Ainsi, pour la tâche « 3 résultats de tests différents plus un lien commun vers une page extérieure au test » nous aurons 4 balises :
et 4 blocs de code JavaScript comme ci-dessus.
Comment changer le titre et la description mis en cache par le réseau social.
1. Il existe le meilleur moyen pour Facebook : accéder à leur débogueur
Avantages :
Selon les développeurs, les nouveaux boutons sociaux sont conçus pour les moniteurs Retina. Tout le reste, à première vue, reste le même. Malheureusement, parmi les options disponibles dans le concepteur, je n'ai pas trouvé de boutons avec compteur, bien que l'édition standard de Pluso en ait.
Je ne sais pas s'ils remplaceront l'ancien par un nouveau constructeur, mais pour le moment, les deux fonctionnent simultanément en utilisant des liens différents.
Il existe des widgets payants et gratuits. Seules les options les plus simples sont disponibles dans le compte gratuit. La version payante propose de nombreux autres concepts de design, tels que : des boutons adaptatifs, des boutons avec divers compteurs et bien plus encore.
Je pense que cette option ne convient pas à notre peuple, car vous devrez payer pour les cloches et les sifflets, mais sur le marché intérieur, vous pouvez trouver toutes les mêmes choses, mais gratuitement.
Le constructeur Add This dispose d'une énorme liste de réseaux sociaux disponibles, notamment Vkontakte, Moi Mir et Odnoklassniki.
Good Share Boutons de partage légers et esthétiques pour votre site Web avec un petit code intégré, ce qui est très attrayant. Malheureusement, il n’existe qu’une seule option de conception avec plusieurs combinaisons de couleurs. Il existe tous les réseaux sociaux populaires dans RuNet
Selon les développeurs, leur idée est optimisée et les moteurs de recherche adoreront votre site. Je ne sais pas à quel point il y a de vérité ici.
Shareaholic Un service occidental de création de boutons sociaux très intéressant, que j'ai découvert assez récemment.
Shareaholic propose plusieurs nouveaux concepts de boutons de partage. Personnellement, j'ai aimé la flèche au-dessus des boutons (les flèches sont un outil marketing très puissant), mais malheureusement, l'inscription est en anglais, elle ne convient donc pas à notre peuple. Parmi les réseaux sociaux disponibles se trouve VKontakte.
Bonjour, chers amis. L'article d'aujourd'hui sera consacré à la création d'un bloc de boutons sociaux sans services ni plugins. Ce bloc comprendra également des boutons permettant aux visiteurs du site d'imprimer la page, d'envoyer le lien de l'article par e-mail et de mettre votre article en signet. De tels boutons peuvent aujourd’hui être trouvés sur presque tous les sites Web. Ce n'est que maintenant qu'ils sont implémentés à l'aide de services ou de plugins. Et je vais vous montrer comment le faire vous-même.
Services que j'ai utilisés sur les sites clients et sur mon blog - et . Ces services facilitent la mise en œuvre de la tâche.Bien entendu, un facteur incontestable est la vitesse de chargement du site. Ainsi, par exemple, le service PLUSO, que j'utilise sur le blog, ajoute dans le meilleur des cas 633 millisecondes à la charge.
Nous considérerons l'option classique, lorsque les boutons sont situés après l'article.
Cela peut être fait soit en ouvrant le fichier responsable de la sortie des articles (single.php) et en ajoutant un bloc de boutons sociaux au code source. Alternativement, cela peut être fait via le fichier de fonctions du thème (functions.php).
Je vais vous montrer les deux options et vous choisissez celle qui vous convient.
Insérer un bloc dans le code source single.phpAttention : Avant de commencer toute action, faites une copie de sauvegarde du fichier single.php !
Ouvrez le panneau d'administration WordPress – « Apparence » – « Éditeur » – « Entrée unique (single.php) ».
Dans le code source, recherchez l'endroit où se termine la sortie de l'article et où commencent les commentaires ou la navigation dans les pages. C'est à cet endroit qu'il vous faudra insérer le code html du bloc de boutons sociaux.
Regardez attentivement la capture d'écran, concentrez-vous sur les codes chargés d'afficher l'article et les commentaires. Et collez le code ci-dessous.
Bien sûr, il y aura quelques différences dans vos modèles, mais je suis sûr que vous le comprendrez, il n’y a rien de compliqué là-dedans. Et en plus, vous disposez d’une copie de sauvegarde, il n’y a rien à craindre.
Et voici le code html du bloc de boutons sociaux :
","sharer","barre d'outils=0,statut=0,largeur=700,hauteur=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","barre d'outils=0,statut=0,largeur=700,hauteur=400");" href="javascript: void(0)" class="twitter ">","sharer","barre d'outils=0,statut=0,largeur=700,hauteur=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","barre d'outils=0,statut=0,largeur=812,hauteur=585");" href="javascript: void(0)" class="digg">. Chaque lien possède sa propre classe, à travers laquelle l'image du bouton est attribuée.
Ceci termine l’insertion dans le code source. Et puis vous devez connecter les styles CSS.
Insérer un bloc dans le code source single.php via les fonctions du thèmeAttention : avant de commencer à travailler, faites une copie de sauvegarde de votre fichier function.php !
Pour utiliser cette option, vous devez ouvrir le fichier function.php et ajouter ce code à la toute fin :
/* Insertion de boutons sociaux */ add_action("comments_template","soc_button"); function soc_button() ( ?> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook">&subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal">","sharer","barre d'outils=0,statut=0,largeur=700,hauteur=400");" href="javascript: void(0)" class="twitter">","sharer","barre d'outils=0,statut=0,largeur=700,hauteur=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","barre d'outils=0,statut=0,largeur=812,hauteur=585");" href="javascript: void(0)" class="digg">. Sinon, le site cessera de fonctionner.Explications sur le code : l'endroit où seront affichés les boutons des réseaux sociaux est déterminé grâce à la clé API comments_template. Cette clé détermine la place avant les commentaires. Le code du bouton social lui-même est enfermé dans les backtags PHP d'ouverture et de fermeture. Dans le code, je les ai marqués en rouge. C'est toute l'astuce consistant à insérer du code html dans php, via les fonctions du thème.
Ceci termine la méthode ; passons au téléchargement d’images sur le site.
Télécharger des images de boutons sur le serveurA titre d'exemple, j'ai préparé plusieurs sprites avec des images de boutons sociaux. Vous pouvez les télécharger.
Le sprite que j'utilise comme exemple ne fait que 3,97 Ko et ne contient que les boutons nécessaires. Et comme il s'agit d'un sprite, il n'y a qu'une seule requête vers la base de données, et non pour chaque bouton séparément.
Téléchargez des images ou préparez les vôtres et téléchargez-les sur votre site Web. Je pense qu'il ne devrait y avoir aucun problème avec cela. Ensuite, un lien vers ce sprite sera nécessaire pour concevoir les boutons en utilisant des styles CSS.
Connexion des styles CSSCette étape peut, bien sûr, être complétée en premier, mais je préfère d'abord faire tout le travail technique complexe, et ensuite seulement commencer les belles petites choses avec les styles CSS.
Alors, ouvrez le fichier style.css, qui est responsable de la conception de votre site. Et insérez ces styles :
Partager un ( affichage : bloc en ligne ; alignement vertical : hériter ; marge : 5px 0 0 2px ; remplissage : 0px ; taille de police : 0px ; largeur : 40px ; hauteur : 40px ; arrière-plan : url("http://test ..png ") défilement sans répétition 0px 0px transparent;) .share a.vkontakte ( background: url("http://test..png ") défilement sans répétition -168px 0px transparent; ) .share a.google ( arrière-plan : url("http://test..png ") défilement sans répétition -252px 0px transparent ; ) .share a.livejournal ( arrière-plan : url("http://test..png ") sans répétition scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") défilement sans répétition -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") défilement sans répétition -294px 0px transparent; ) .share a.odnoklassniki ( background: url("http://test..png ") défilement sans répétition -126px 0px transparent; ) .share a.pinterest (arrière-plan : url("http://test..png") défilement sans répétition -210px 0px transparent ; ) .share a.liveinternet (arrière-plan : url("http://test..png ") défilement sans répétition -378px 0px transparent ; ) .share a.evernote (arrière-plan : url("http://test..png") défilement sans répétition -420px 0px transparent ; ) .share a.bookmark (arrière-plan : url("http://test.. png ") défilement sans répétition -462px 0px transparent; ) .share a.email ( background: url("http://test..png ") défilement sans répétition -504px 0px transparent; ) .share a.print ( background: url("http://test..png") défilement sans répétition -546px 0px transparent ) .share a.digg ( background: url("http://test..png ") défilement sans répétition - 588px 0px transparent; ) .share a.spring ( background: url("http://test..png ") défilement sans répétition -630px 0px transparent; )
Explications sur le code : la classe.share définit l'apparence générale du bloc, la taille de chaque bouton, indente et définit un arrière-plan unique. Et puis chaque lien a sa propre classe et chacun de ces liens se voit attribuer le type de bouton via la propriété background. Les boutons sont créés comme un sprite CSS, et chaque bouton a une largeur et une hauteur de 40 px, et une marge de 2 px entre eux, ce qui vous permet de déterminer avec précision l'image de chaque bouton. Autrement dit, le premier bouton est indiqué par 0 et le second par 42, et ainsi de suite. Dans le code, ces valeurs sont indiquées en orange. Le lien vers le sprite est également surligné en orange ; vous le remplacez par le chemin d'accès à votre sprite.
Ceci termine tout le processus de création de votre propre bloc de boutons sociaux. Vous pouvez procéder à la vérification en toute sécurité.
J'ai également un didacticiel vidéo dans lequel l'ensemble du processus est clairement montré et le fonctionnement des boutons eux-mêmes est montré. Regardez et mettez en œuvre sur vos sites Web et blogs.
C'est tout maintenant. J'ai fait face à la tâche. Je vous souhaite à tous bonne chance et à bientôt dans de nouveaux articles et tutoriels vidéo.