Sur la façon dont les réseaux sociaux peuvent contribuer à promouvoir un site Web et à y attirer de nouveaux visiteurs. Mais cette fois, j'aimerais passer de la théorie à la pratique et parler plus en détail de la façon de placer des boutons « J'aime » sur votre site Web à partir des réseaux sociaux populaires, tels que : VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP et Yandex.

Que sont les « j’aime » et à quoi servent-ils ?

Cependant, dans l’argot Internet, les « j’aime » signifient quelque chose de complètement différent et ressemblent à ceci :

Si le trafic vers votre site est d'au moins 20 visites par jour, alors vous devriez penser à placer de tels boutons sur votre site, car :

• les « likes » attirent de nouveaux visiteurs issus des réseaux sociaux : en « likant » tel ou tel article de votre blog, l'utilisateur peut en parler sur sa page du réseau social ;
• vous pourrez comprendre les visiteurs de votre site : en analysant les articles ou les pages du site dont le nombre de « j'aime » dépasse largement les autres pages de votre site, vous comprendrez ce que vos visiteurs aiment le plus ;
• cela permettra de promouvoir le site dans les moteurs de recherche : les moteurs de recherche ont depuis longtemps appris à interagir avec les réseaux sociaux, c'est pourquoi les « likes » laissent leur empreinte en SEO.

Je pense que les compliments sur les « j’aime » suffisent pour comprendre à quel point c’est utile et important pour le site. Par conséquent, vous pouvez passer en toute sécurité aux instructions d’installation.

Accès rapide aux instructions

"J'aime" de VKontakte

1. Allez à page de connexion du widget à votre site.

3. Personnalisez l'apparence du widget à votre goût et obtenez le code prêt à l'emploi :

4. Le code du widget doit être inséré dans les modèles de pages du site.

"J'aime" de Facebook

1. Accédez à la page des paramètres du bouton « J'aime ».

2. Configurez le widget et cliquez sur le bouton « Obtenir le code » :

3. Dans la fenêtre qui s'ouvre, copiez le code reçu et collez-le dans les modèles du site.

"Tweet" de Twitter

1. Accédez à .

2. Sélectionnez le type de bouton :

3. Personnalisez l'apparence du bouton :

4. Copiez et collez le code obtenu dans les modèles :

"Classe!" d'Odnoklassniki

Et c’est encore plus simple d’obtenir le bouton « Class ! » avec le bouton « J’aime » des réseaux sociaux. Réseau "MyMir". C’est exactement ce dont nous parlerons ensuite.

2 en 1 : « J'aime » de MoyMir + « Classe » d'Odnoklassniki

1. Rendez-vous sur la page de configuration des widgets « J'aime » et « Cool ! ». .

2. Personnalisez le widget à votre goût :

3. Copiez et collez le code obtenu dans les modèles de site :

"+1" de Google+

1. Allez à Page de paramètres du bouton "+1".

2. Personnalisez l'apparence du bouton :

3. Copiez le code reçu et collez-le dans les modèles :

Tout en un : pour les paresseux !

Si vous êtes trop paresseux pour configurer tous les réseaux sociaux séparément, vous pouvez utiliser des solutions et des scripts prêts à l'emploi qui offrent la possibilité de placer un bouton universel avec partage (la fonction « dire à vos amis ») sur tous les réseaux sociaux populaires. Veuillez noter qu'il n'y a pas de connexion forte avec le site ici et que ces boutons sont créés plus pour plus de commodité que pour un effet SEO.

Obtenez les codes des boutons et collez-les sur votre site Web.

Où insérer les codes reçus ?

Afin de placer des boutons « J’aime » sur votre site Web, vous devez d’abord décider quelles pages de votre site Web sont les plus rentables et sur lesquelles les placer le mieux. Il existe les options suivantes pour placer des boutons sur le site :

• page d'accueil;
• toutes les pages du site ;
• page de publication/matériel.

Il n'est pas nécessaire de réinventer la roue et de placer des boutons dans les messages du forum, sur les pages d'informations de contact, etc. : de tels boutons ne seront pas appréciés. Une fois que vous avez décidé où vous allez insérer les boutons, connectez-vous au panneau de configuration de votre site sur your-site.ucoz.ru/admin et accédez à :

• éditeur de pages → gérer les pages du site → modifier la page principale du site(si vous souhaitez placer les codes des boutons uniquement sur la page principale du site) ;
• gestion de la conception → module (facultatif) → page de matériel et commentaires sur celui-ci(si vous souhaitez placer des boutons « j’aime » pour chaque matériau) ;
• gestion du design → bloc global "Haut du site"(si vous souhaitez placer le code sur toutes les pages du site).

Collez les codes de boutons reçus dans l'un de ces modèles et enregistrez vos modifications. Examinons ce point à l'aide d'un exemple spécifique : en plaçant le bouton "C'est intéressant !". à côté de l'entrée sur notre blog officiel uCoz.

Bonjour à tous les lecteurs du site

Dans cet article, je vais vous expliquer comment ajouter des boutons « J'aime », « Classe », « Parler à vos amis », etc. à votre site Web.

Je vais également vous donner un indice sur la façon d'installer des commentaires sur n'importe quelle page de votre site.

Il existe plusieurs façons d'installer les boutons ci-dessus sur votre site Web. Regardons chacun d'eux :

Accédez au site Web de la ressource à partir de laquelle vous souhaitez obtenir un bouton. Ensuite, recherchez la section destinée aux développeurs et, en suivant les instructions, générez du code HTML à insérer dans le site.

Utilisez le merveilleux service de Yandex et générez un panneau similaire spécial.

Examinons chaque service.

En contact avec

Attention, pour installer le bouton vous devez être enregistré ! Le lien vers la rubrique se trouve tout en bas du réseau social. réseaux.

Vous avez désormais une totale liberté pour vos envolées fantaisistes. Vous pouvez installer n'importe quel service de votre choix. J'ai sélectionné le bouton "J'aime".

Après avoir cliqué sur la section que vous avez sélectionnée, vous verrez un assistant de configuration.

Parlons maintenant un peu de l'assistant de configuration. Chaque développeur a son propre apiId. Assurez-vous de vérifier sa présence dans la fenêtre avec le code généré.
N'oubliez pas non plus d'indiquer l'adresse de votre site Web en haut du formulaire.

Tous! Il ne reste plus qu'à mettre la moitié du script dans l'en-tête de notre page, et l'autre moitié dans le corps, là où vous souhaitez que votre bouton soit placé.

Ici, vous pouvez vérifier comment cela fonctionne sur mon site Web. Haut de la page.

Odnoklassniki et mon monde

Et ici, nous personnalisons l'apparence du bouton. Et puis nous copions le code. Ce code n'est pas divisé en deux parties, il doit être immédiatement inséré à l'endroit où vous souhaitez placer le bouton.

Essayez-le en action.

Visitons Yandex :)

Tout ici est encore plus simple que dans les méthodes que nous avons examinées précédemment.
Nous sélectionnons simplement les services nécessaires, leur affichage et collons le code obtenu dans le site.

C'est tout? Si simple?

Écrivez dans les commentaires si quelque chose n'est pas clair.

Cela pourrait vous intéresser :

	Bonjour cher lecteur, dans cet article nous examinerons : qu'est-ce que le CSS comment connecter des styles à votre page comment utiliser les CSS "propriétés" CSS de base	Chaque jour (ou peut-être pas tous les jours), vous allumez votre ordinateur, ouvrez votre navigateur et utilisez activement Internet. Vous êtes-vous déjà demandé comment fonctionne ce réseau ? Non? Ensuite, laissez l’auteur du site vous expliquer comment les choses se passent.

Salutations, chers lecteurs du blog. En raison de nombreuses demandes de lecteurs, nous allons aujourd'hui créer un système sympa de « Partager avec des amis » sur VKontakte pour télécharger un fichier en utilisant JQuery et CSS.

Mes amis, je tiens à dire que ce système augmentera plusieurs fois le nombre de liens vers votre ressource, en fonction, bien sûr, de ce que vous proposez de télécharger et du type de trafic dont vous disposez.

Je voudrais également dire que ce système est très similaire au système cool « », qui à son tour augmente le nombre de liens sur Twitter. Dans ce cas, presque tout est pareil, juste un peu modifié par moi. Et finalement tout s'est très bien passé :-)

Eh bien, passons maintenant au système lui-même.

Le système « Tell Friends » sur VKontakte pour télécharger le fichier Comment ça marche ?

Vous voyez, ce n'est pas si difficile. :-)

Comment faire?

Pour commencer, j'ai dessiné un modèle simple de page avec un bouton. Vous pouvez le voir dans l'exemple, et également l'utiliser sur votre site internet, il est disponible en code source. L'utilisateur sera redirigé vers cette page afin qu'il puisse effectuer les opérations chéries de téléchargement du fichier.

Ensuite, j'ai créé ce modèle et voici ce que j'ai obtenu :

Comme vous pouvez le constater, la page n’est ni grande ni complexe.

L'essentiel est de se placer au début entre les balises et d'ajouter les scripts suivants :

jquery.min.js est la bibliothèque JQuery, si vous l'avez déjà vous n'avez pas besoin de la réinstaller

jquery.vkAction.js - ce script ouvre une fenêtre VKontakte.

script.js - mais ce script active le bouton « Télécharger ».

Ajoutons maintenant quelques styles CSS pour décorer légèrement notre page.

CSS

Amis, toutes les images indiquées dans les styles se trouvent dans le code source dans le dossier img.

* ( marge : 0 ; remplissage : 0 ; ) corps ( marge-haut :-50px ; largeur : 100 % ; hauteur : 100 % ; couleur : #555 ; arrière-plan : url (img/body.jpg) répéter 100 % 0 ; famille de polices : "Ubuntu", sans empattement ; taille de police : 0,85em ; hauteur de ligne : 135 % ; ) ul ( style de liste : aucun ; ) a ( couleur : #538e28 ; décoration de texte : aucun ; ) a:hover ( couleur : #69b432 ) #wrapper ( position : relative ; bordure : 0px solide #d6d6d6 ; largeur : 1004px ; hauteur : 787px ; arrière-plan : url(img/bodycont.jpg) 50px 0px sans répétition ; marge : 0 auto; ) #copy( position:absolute; left:330px; bottom:0px; border:0px solid #d6d6d6; font-size:11px; color:#bbb; ) #text ( position:absolute; left:0px; top: 150px; bordure:0px solide #d6d6d6; largeur: 1004px; hauteur: 157px; arrière-plan: url(img/text.png) sans répétition; marge: 0 auto; ) #vk ( position:absolue; gauche:370px; haut : 300px ; bordure : 0px solide #d6d6d6 ; largeur : 262 px ; hauteur : 262px ; opacité : 0,5 ; -moz-transition : toutes les 0,2s 0,01s faciles à entrer ; -o-transition : toutes les 0,2s 0,01s faciles à entrer ; - transition webkit : tous les 0,2 s 0,01 s sont faciles à utiliser ; ) #vk:hover ( opacité : 1.0 ; ) #str1 ( arrière-plan : url(img/str1.png) sans répétition ; position : absolue ; gauche : 140 px ; haut : 290 px ; bordure : 0px solide #d6d6d6 ; largeur : 262 px ; hauteur : 262 px ; ) #str2 ( arrière-plan : url(img/str2.png) sans répétition ; position : absolue ; droite : 100 px ; haut : 450 px ; bordure : 0px solide #d6d6d6 ; largeur : 262 px ; hauteur : 262 px ; ) .downloadButton( position:absolute; left:373px; top:580px; width:253px; height:98px; overflow:hidden; background:url("img/dbuthov.png") sans répétition; curseur:default; ) . downloadButton.active( background:url("img/dbut.png") no-repeat; width:253px; height:98px; curseur:pointeur; -moz-transition : tous les 0,2s 0,01s facilitent l'entrée ; -o-transition : tous les 0,2 s 0,01 s faciles à entrer ; -webkit-transition : tous les 0,2 s 0,01 s faciles à entrer ; ) .downloadButton.active:hover ( opacité : 0,9 ; )

J'espère que tout ici est clair pour vous. Pour commencer, j'ai réalisé un bloc mesurant 1004 par 787 pixels, dans lequel j'ai ensuite placé tous les objets que vous voyez avec un positionnement absolu. Ce sont les boutons VKontakte et de téléchargement, ainsi que les flèches et les inscriptions elles-mêmes.

Si vous ne comprenez pas quelque chose, demandez dans les commentaires.

Passons maintenant directement aux scripts.

JS

(function($)( var win = null; $.fn.tweetAction = function(options,callback)( // Paramètres standard pour la fenêtre pop-up : options = $.extend(( url:window.location.href ) , options) ; return this.click(function(e)( if(win)( e.preventDefault(); return; ) var width = 550, height = 350, top = (window.screen.height - height)/2 , left = (window.screen.width - width)/2 ; var config = [ "scrollbars=yes", "resizing=yes", "toolbar=no", "location=yes", "width="+width, "height= "+height,"left="+left, "top="+top ].join(","); // Fenêtre pop-up de l'API VKontakte : win = window.open("http:/ /vkontakte.ru/share .php?"+$.param(options), "TweetWindow",config); (function checkWindow())( try( // besoin de mettre ce code dans un try/catch : if(! win || win.closed) ( throw "Fermé!"; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ) ))(); e.preventDefault() ; )); ); ) )(jQuery);

Comme vous pouvez le constater, j'ai uniquement modifié ce lien http://twitter.com/intent/tweet? à celui-ci http://vkontakte.ru/share.php?. En d'autres termes, j'ai remplacé le lien de Twitter par un lien VK. Ça y est, il n'y a plus eu de changements.

Voyons maintenant quel sera mon prochain script.

script.js

$(document).ready(function())( // Utilisation de notre plugin tweetAction. Pour une liste complète des // paramètres pris en charge, reportez-vous à http://dev.twitter.com/pages/intents#tweet-intent $( " #tweetLink").tweetAction(( title: "Comment créer un système "Tell Friends" sur VKontakte pour télécharger en utilisant JQuery et CSS", url: "http://site/", description: "Ici, vous pouvez télécharger le cool "Dites" aux amis du système "" sur VKontakte de télécharger, et découvrez également comment cela fonctionne" ),function())( // Lorsque la fenêtre se ferme : $(".downloadButton") .addClass("active") . attr("href","Lien direct vers le fichier"); )); ));

Important

Vous devez modifier ce script pour votre site.

Dans le champ titre : vous devez saisir le titre du message, qui doit être affiché dans le contact.

Dans le champ description : vous devez préciser une description du poste.

C'est tout, mes amis. Je tiens à remercier le site tutorielzine.com pour l'idée et pour les scripts. Eh bien, maintenant, à bientôt. :-)

Temps de lecture : 5 minutes

Les campagnes de marketing intégrées par e-mail et sur les réseaux sociaux touchent davantage de publics et augmentent le retour sur investissement (retour sur investissement). Découvrez comment utiliser la plateforme marketing intégrée de Mailigen pour atteindre les clients par e-mail et sur les réseaux sociaux.

Pourquoi ajouter des boutons de réseaux sociaux « En parler à vos amis » à votre e-mail ?

Selon une étude de 2014 sur les stratégies marketing réalisée par la société de gestion d'actifs numériques WebDAM, il y a trois bonnes raisons à cela :

• En 2013, 43 % des commerciaux ont trouvé des acheteurs via LinkedIn

Comment ajouter des boutons de réseaux sociaux « Informer vos amis » à un message électronique Étape 1

Lorsque vous en êtes à la quatrième étape de création d'une newsletter email, faites glisser le bloc de partage sur les réseaux sociaux jusqu'à l'endroit où vous souhaitez installer ces boutons.

Étape 2

Après cela, une nouvelle fenêtre s'ouvrira dans laquelle vous pourrez effectuer tous les réglages nécessaires.

• Si vous sélectionnez « Archive email », le destinataire du mailing pourra partager le contenu de l’intégralité de la lettre sur les réseaux sociaux. Le titre de la newsletter sera utilisé comme texte d'introduction.

• Si vous sélectionnez « Autre lien », vous pouvez saisir un lien vers n'importe quel contenu que vous souhaitez partager. Par exemple, il peut s'agir d'un nouvel article sur votre blog.

• Saisissez ensuite le texte qui sera situé à côté des boutons, sélectionnez la taille des boutons et la distance qui les sépare.

Facebook Résumons-le

Récemment, un client sur deux (sinon le premier) dans le cadre des exigences de développement d'un site Web demande de s'assurer de le connecter aux réseaux sociaux. Les boutons « sociaux » d'un site Internet sont l'outil numéro 1 pour attirer le public cible, diffuser du contenu et des relations publiques en général. Et c'est totalement gratuit !

Les réseaux sociaux fournissent des codes pour leurs boutons et widgets à placer sur le site et fournissent des instructions pour les installer dans le système de gestion du site. N’importe quel CMS (système d’exploitation) permet de les installer ; l’essentiel est de les intégrer harmonieusement dans le design de votre site internet.

Quelles sont les caractéristiques et fonctions ?

Si votre site s'adresse aux personnes qui communiquent sur les réseaux sociaux populaires. réseaux, par exemple Vkontakte, Twitter, Instagram, Facebook, Google+, Pinterest, etc., et que vous souhaitez tous les couvrir, alors afin de ne pas installer de boutons pour chacun d'eux séparément, étant donné qu'ils peuvent différer en taille et en design , nous vous recommandons d'utiliser les services d'agrégation. Ce sont des outils simples et pratiques qui permettront aux visiteurs du site de partager rapidement des informations avec leurs amis, quel que soit le réseau social qu'ils utilisent. Ci-dessous, nous examinerons les services les plus populaires.

Boutons de réseaux sociaux Partager Pluso