Où en VK pour dire à des amis. Boutons de médias sociaux. Comment ça fonctionne

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

Les réseaux sociaux fournissent des codes pour leurs boutons et widgets à placer sur le site et joignent des instructions pour les installer dans le système de gestion de contenu. Tout CMS (systèmes d'exploitation) vous permet de les installer, l'essentiel est de les intégrer harmonieusement dans la conception de votre site.

Quelles sont les caractéristiques et fonctions ?

Si votre site est destiné aux personnes qui communiquent avec les réseaux sociaux populaires. réseaux, par exemple, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, etc., et vous voulez tous les couvrir, alors afin de ne pas définir les boutons pour chacun d'eux séparément, étant donné qu'ils peuvent différer en taille et 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 analyserons les services les plus populaires.

Partager les boutons de médias sociaux Pluso

Temps de lecture : 5 minutes

Les campagnes de marketing intégrées par e-mail et sur les réseaux sociaux atteignent plus d'audiences et augmentent le retour sur investissement (ROI). Apprenez à utiliser la plateforme marketing intégrée de Mailigen pour interagir avec les clients par e-mail et sur les réseaux sociaux.

Pourquoi ajouter des boutons de médias sociaux « Parlez-en à vos amis » aux e-mails ?

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

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

Comment ajouter des boutons de médias sociaux « Parlez-en à vos amis » à un message électronique Étape 1

Lorsque vous en êtes à la quatrième étape de la création d'une campagne par e-mail, faites glisser la zone de partage de médias sociaux à l'endroit où vous souhaitez placer 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 de la liste de diffusion", le destinataire de la liste de diffusion pourra partager le contenu de la lettre entière sur les réseaux sociaux. Le titre du mailing sera utilisé comme texte d'introduction.

• Si vous sélectionnez Autre lien, vous pouvez entrer un lien vers tout contenu que vous souhaitez partager. Par exemple, il peut s'agir d'un nouvel article sur votre blog.

• Tapez ensuite le texte qui sera situé à côté des boutons, sélectionnez la taille des boutons et la distance entre eux.

Résumé Facebook

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

Amis, je tiens à dire que ce système augmentera plusieurs fois le nombre de liens vers votre ressource, en fonction de ce que vous proposez de télécharger et du type de trafic que vous avez.

Je tiens é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, seulement un peu édité par moi. Et finalement tout s'est bien passé :-)

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

Système "Parlez-en à vos amis" dans VKontakte pour télécharger un fichier Comment ça marche ?

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

Comment faire?

Pour commencer, j'ai dessiné un modèle de page simple avec un bouton. Vous pouvez le voir dans l'exemple, et aussi l'utiliser sur votre site, il est disponible dans le code source. L'utilisateur sera transféré sur cette page afin qu'il puisse y 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 voir, ce n'est pas du tout une page volumineuse ou compliquée.

L'essentiel au début entre les balises et ajoutez les scripts suivants :

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

jquery.vkAction.js - ce script appelle la fenêtre VKontakte.

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

Ajoutons maintenant un peu de style CSS pour embellir un peu notre page.

CSS

Amis, vous pouvez trouver toutes les images indiquées dans les styles du code source dans le dossier img.

* (marge : 0 ; rembourrage : 0 ; ) corps (marge-haut : -50 pixels ; largeur : 100 % ; hauteur : 100 % ; couleur : #555 ; arrière-plan : url(img/body.jpg) répéter 100 % 0 ; font-family: "Ubuntu", sans-serif; font-size:0.85em; line-height:135%; ) ul ( list-style:none; ) a ( color: #538e28; text-decoration:none; ) a:hover ( color: #69b432 ) #wrapper ( position:relative; border:0px solid #d6d6d6; width: 1004px; height: 787px; background: url(img/bodycont.jpg) 50px 0px no-repeat; margin: 0 auto; ) #copy( position:absolute; left:330px; bottom:0px; border:0px solid #d6d6d6; font-size:11px; color:#bbb; ) #text ( position:absolute; left:0px; top: 150 px ; bordure : 0px solide #d6d6d6 ; largeur : 1 004 px ; hauteur : 157 px ; arrière-plan : url(img/text.png) non répété ; marge : 0 automatique ; ) #vk ( position : absolue ; gauche : 370 px ; haut : 300 px ; bordure : 0 px solide #d6d6d6 ; largeur : 262 px ; hauteur : 262 px ; opacité : 0,5 ; -moz-transition : tous les 0,2 s 0,01 s d'insertion ; -o-transition : tous les 0,2 s 0,01 s d'insertion facile ; - transition webkit : toutes les 0,2 s 0,01 s facilité d'entrée ; ) #vk:hover ( opacity: 1.0; ) #str1 ( background: url(img/str1.png) no-repeat; position:absolute; left:140px; top:290px; border:0px solid #d6d6d6; width: 262px ; hauteur : 262 px ; ) #str2 ( arrière-plan : url(img/str2.png) sans répétition ; position : absolue ; droite : 100 pixels ; haut : 450 pixels ; bordure : 0 pixel solide #d6d6d6 ; largeur : 262 pixels ; hauteur : 262 pixels ; ) .downloadButton( position : absolue ; gauche : 373 px ; haut : 580 px ; largeur : 253 px ; hauteur : 98 px ; débordement : caché ; arrière-plan : url ("img/dbuthov.png") sans répétition ; curseur : par défaut ; ) . downloadButton.active( background:url("img/dbut.png") no-repeat; width:253px; height:98px; curseur:pointeur; -moz-transition : all 0.2s 0.01s easy-in ; -o-transition : all 0.2s 0.01s easy-in; -webkit-transition: all 0.2s 0.01s easy-in; ) .downloadButton.active:hover( opacity: 0.9; )

J'espère que tout est clair pour vous ici. Pour commencer, j'ai fait un bloc d'une taille de 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)( // Options popup standard : 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 - largeur)/2;var config = [ "scrollbars=yes","resizable=yes","toolbar=no","location=yes", "width="+width,"height= "+ height,"left="+left, "top="+top ].join(","); // Fenêtre contextuelle de l'API VKontakte : win = window.open("http://vkontakte.ru/share .php?"+$.param(options), "TweetWindow",config); (function checkWindow())( try( // faut mettre ce code dans un try/catch: if(!win || win.closed) ( throw "Closed!"; ) else ( setTimeout(checkWindow,100); ) ) catch(e)( win = null; callback(); ) ))(); e.preventDefault(); )); ); ) )(jQuery);

Comme vous pouvez le voir, ici j'ai seulement changé ce lien http://twitter.com/intent/tweet? à celui-ci http://vkontakte.ru/share.php?. En d'autres termes, le lien de Twitter a été remplacé par un lien VK. Eh bien, il n'y a pas eu d'autres changements.

Voyons maintenant ce que j'ai obtenu le script suivant.

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 "Parlez-en à vos amis" dans VKontakte à télécharger à l'aide de JQuery et CSS", url : "http://website/", description : " Ici, vous pouvez télécharger un système "Dites à vos amis"" sur VKontakte à télécharger, et apprenez é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 entrer le titre du message, qui doit être affiché dans le contact.

Dans le champ description :, vous devez spécifier une description de la publication.

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

Bonjour à tous les lecteurs du site site

Dans cet article, je vais vous expliquer comment ajouter des boutons Like, Like, Share, Tell Friends, etc. à votre site.

Je vais également vous montrer comment définir des commentaires sur n'importe quelle page de votre site.

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

Allez sur le site de la ressource à partir de laquelle vous souhaitez avoir un bouton. Ensuite, trouvez la section pour les développeurs, et déjà là, en suivant les instructions, générez un code html à insérer dans le site.

Profitez du merveilleux service de Yandex et générez un panneau similaire spécial.

Jetons un coup d'œil à chaque service.

En contact avec

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

Maintenant, vous avez toute latitude pour un vol de fantaisie. Vous pouvez installer n'importe quel service que vous voulez. J'ai choisi le bouton "J'aime".

Après avoir cliqué sur la section de votre choix, vous aurez un assistant de configuration.

Maintenant, parlons 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'inclure l'adresse de votre site Web en haut du formulaire.

Tous! Il reste maintenant à mettre la moitié du script dans le head de notre page, et l'autre moitié dans le body , là où vous voulez que votre bouton soit.

Vous pouvez vérifier comment cela fonctionne sur mon site ici. Haut de la page.

Odnoklassniki et mon monde

Et ici, nous personnalisons l'apparence du bouton. Et puis copiez le code. Ce code n'est pas divisé en deux parties, vous devez l'insérer immédiatement à l'endroit où vous souhaitez placer le bouton.

Essayez-le en action.

Allons visiter Yandex :)

Ici, c'est encore plus facile que nous dans les voies que nous avons envisagées précédemment.
Sélectionnez simplement les services nécessaires, affichez-les et collez le code résultant sur le site.

Et tout? Si simple?

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

Vous pourriez être intéressé :

	Bonjour cher lecteur, dans cet article nous allons analyser : c'est quoi css comment ajouter des styles à votre page comment utiliser css css "propriétés" de base	Chaque jour (ou peut-être pas chaque jour), 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 expliquer comment les choses sont.

Sur la façon dont les réseaux sociaux peuvent aider à promouvoir le site et à y amener de nouveaux visiteurs. Mais cette fois, je voudrais passer de la théorie à la pratique et vous en dire plus sur la façon de placer sur votre site des boutons comme "J'aime" 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 ils ressemblent à ceci :

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

• les « likes » attirent de nouveaux visiteurs depuis les réseaux sociaux : en « likant » tel ou tel post de votre blog, l'utilisateur peut en parler sur sa page sur le réseau social ;
• vous pourrez comprendre les visiteurs de votre site : en analysant des articles ou des 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 favorisera la promotion du 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 également leur empreinte sur le référencement.

Je pense que les compliments aux "j'aime" suffisent pour comprendre à quel point c'est utile et important pour le site. Par conséquent, vous pouvez procéder 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 la vue du widget à votre goût et obtenez le code final :

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

"J'aime" par 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.

« Tweeter » par Twitter

1. Allez à .

2. Sélectionnez le type de bouton :

3. Personnalisez l'apparence du bouton :

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

"Classe!" d'Odnoklassniki

Et encore plus facile - obtenez le bouton "Classe!" avec le bouton "J'aime" du réseau social. réseau "MyMir". Juste plus à ce sujet et sera discuté.

2 en 1 : "Like" de MoiMir + "Class" d'Odnoklassniki

1. Accédez à la page des paramètres du widget "J'aime" et "Génial !". .

2. Personnalisez le widget à votre goût :

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

"+1" de Google+

1. Allez à Page de configuration 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 à des amis") dans tous les réseaux sociaux populaires. Veuillez noter qu'il n'y a pas de lien fort vers le site ici, et ces boutons sont créés plus pour plus de commodité que pour un effet SEO.

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

Où coller les codes reçus ?

Afin de placer des boutons "J'aime" sur le site, vous devez d'abord décider sur quelles pages de votre site ils sont les plus rentables et les mieux placés. Il existe les options suivantes pour placer des boutons sur le site :

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

Inutile de réinventer la roue et de placer des boutons dans les messages du forum, sur les pages de coordonnées, etc. : de tels boutons ne seront pas aimés. Après avoir décidé où vous allez insérer les boutons, entrez dans le panneau de contrôle de votre site sur votre site.ucoz.ru/admin et allez à :

• éditeur de page → gestion des 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(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 bouton résultants dans l'un de ces modèles et enregistrez vos modifications. Regardons ce point sur un exemple précis - le placement du bouton "C'est intéressant!" à côté de la publication sur notre blog officiel uCoz.