Salutations, chers lecteurs de blog. À la demande générale de nos lecteurs, nous allons aujourd'hui créer un système "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, eh bien, en fonction de ce que vous proposez de télécharger et de votre trafic.
Je veux aussi dire que ce système 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 édité par moi. Et à la fin, tout s'est bien passé :-)
Passons maintenant au système lui-même.
Système "Dites à vos amis" dans Kontakte de télécharger le fichier
Comment ça fonctionne?
Vous voyez, ce n'est pas si difficile. :-)
Comment faire?
Tout d'abord, j'ai dessiné un modèle de page simple avec un bouton. Vous pouvez le voir dans un exemple, ainsi que l'utiliser sur votre site, il est disponible dans la source. Sur cette page transférera l'utilisateur afin qu'il puisse y effectuer les opérations de téléchargement de fichiers chères.
Puis j'ai disposé modèle donné et voici ce que j'ai:
Comme vous pouvez le voir, ce n'est pas du tout une page volumineuse et pas compliquée.
L'essentiel au début entre les balises
et ajoutez les scripts suivants:
jquery.min.js - ceci 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 CSS afin de décorer un peu notre page.
CSS
Amis, toutes les images indiquées dans les styles se trouvent dans les sources du dossier img.
* (margin: 0; padding: 0;) body (margin-top: -50px; width: 100%; height: 100%; color: # 555; background: url (img / body.jpg) repeat 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; marge: 0 auto;) #copy (position: absolue; gauche: 330px; bas: 0px; bordure: 0px solide # d6d6d6; taille de police: 11px; couleur: #bbb;) #text (position: absolue; gauche: 0px; haut: 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: 262px; hauteur: 262px; opacité: 0,5; -moz-transition: all 0.2s 0.01s easy-in; -o-transition: all 0.2s 0.01s easy-in; - transition webkit: tout 0,2 s 0,01 s facilité d'entrée; ) #vk: hover (opacity: 1.0;) # str1 (background: url (img / str1.png) no-repeat; position: absolue; gauche: 140px; haut: 290px; bordure: 0px solide # d6d6d6; largeur: 262px ; hauteur: 262px;) # str2 (arrière-plan: url (img / str2.png) pas de répétition; position: absolue; droite: 100px; haut: 450px; bordure: 0px solide # d6d6d6; largeur: 262px; hauteur: 262px; ) .downloadButton (position: absolue; gauche: 373px; haut: 580px; largeur: 253px; hauteur: 98px; débordement: masqué; arrière-plan: url ("img / dbuthov.png") pas de répétition; curseur: par défaut;). downloadButton.active (background: url ("img / dbut.png") no-repeat; largeur: 253px; hauteur: 98px; curseur: pointeur; -moz-transition: all 0.2s 0.01s easy-in; -o-transition : toutes les entrées de 0,2 s 0,01 s; -webkit-transition: toutes les entrées de 0,2 s 0,01 s;) .downloadButton.active: hover (opacité: 0,9;)
J'espère que vous comprenez tout 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 des boutons vKontakte et de téléchargement, ainsi que des 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 \u003d null; $ .fn.tweetAction \u003d function (options, callback) (// Options par défaut pour popup: options \u003d $ .extend ((url: window.location.href), options) ; return this.click (function (e) (if (win) (e.preventDefault (); return;) var width \u003d 550, height \u003d 350, top \u003d (window.screen.height - height) / 2, left \u003d (window.screen.width - width) / 2; var config \u003d ["scrollbars \u003d yes", "resizable \u003d yes", "toolbar \u003d no", "location \u003d yes", "width \u003d" + width, "height \u003d "+ height," left \u003d "+ left," top \u003d "+ top] .join (", "); // Fenêtre pop-up de l'API vKontakte: win \u003d 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) (lancer "Closed!";) else (setTimeout (checkWindow, 100);)) catch (e) (win \u003d null; callback ();))) (); e.preventDefault ();)););) ) (jQuery);
Comme vous pouvez le voir, ici je n'ai changé que 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. Tout, il n'y avait plus de changements.
Voyons maintenant comment 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 le système "Dites à vos amis" dans VKontakte pour le télécharger depuis en utilisant jQuery et CSS ", url:" http: // site / ", description:" Ici, vous pouvez télécharger le système cool "Dites à vos amis" "sur VKontakte à télécharger, et aussi apprendre comment cela fonctionne"), function () (// Quand la fenêtre se fermera: $ (". downloadButton") .addClass ("active") .attr ("href", "Lien direct vers le fichier");)); ));
Important
Vous devez modifier ce script pour votre site.
Sur le terrain titre: vous devez entrer le nom du message, qui doit être affiché dans le contact.
Sur le terrain la description: vous devez fournir une description du message.
Ce sont tous des amis. Je voudrais remercier le site tutorialzine.com pour l'idée et pour les scripts. Eh bien, à bientôt. :-)
Bonjour à tous les lecteurs du site site Internet
Dans cet article, je vais vous expliquer comment ajouter des boutons tels que "J'aime", "Classe", "Dites à vos amis", etc. sur votre site.
Je vais également vous donner un indice sur la façon de définir des commentaires sur n'importe quelle page de votre site.
Il existe plusieurs façons d'installer les boutons susmentionnés sur votre site. Jetons un coup d'œil à chacun d'eux:
- Accédez au 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 code HTML à insérer dans le site.
- Utilisez le merveilleux service de Yandex et générez un panneau similaire.
Jetons un coup d'œil à chaque service.
En contact avec
Attention, vous devez être inscrit pour installer le bouton! Le lien vers la section est situé tout en bas du social. réseaux.
Vous avez maintenant toute la place pour un vol de fantaisie. Vous pouvez installer tout service que vous souhaitez pour vous-même. J'ai choisi le bouton "J'aime".
Après avoir cliqué sur la section de votre choix, vous aurez un assistant de configuration.
Maintenant, un peu sur 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.
Tout! Il reste maintenant à pousser la moitié du script dans la tête de notre page, et l'autre moitié dans le corps, où vous voulez que votre bouton soit.
Vous pouvez vérifier comment cela fonctionne sur mon site. En haut de la page.
Camarades de classe et mon monde
Et ici nous nous installons apparence boutons. 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 voulez que le bouton se trouve.
Essayez action.
Nous allons visiter Yandex :)
C'est encore plus facile ici que nous ne le sommes de la manière dont nous avons discuté plus tôt.
Nous sélectionnons simplement les services nécessaires, les affichons et collons le code résultant dans le site.
Est-ce tout? Si simple?
Écrivez dans les commentaires si quelque chose n'est pas clair.
|
Bonjour cher lecteur, dans cet article nous analyserons:
|
Chaque jour (ou peut-être pas tous), vous allumez votre ordinateur, ouvrez un 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 se passent. |
Comment les réseaux sociaux peuvent aider à promouvoir votre site 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 comme "J'aime" populaire réseaux sociaux, tels que: VKontakte, Facebook, Twitter, Odnoklassniki, MoiMir, Google+, QIP et Yandex.
Que sont les "likes" et à quoi servent-ils?
Cependant, dans l'argot Internet, «aime» signifie quelque chose de complètement différent et ils ressemblent à ceci:
Si le trafic vers votre site est d'au moins 20 visites par jour, vous devriez déjà penser à placer de tels boutons sur votre site, car:
- "Aime" attirer de nouveaux visiteurs depuis les réseaux sociaux: en «j'aime» une entrée particulière de votre blog, l'utilisateur peut en parler sur sa page dans le réseau social;
- vous pouvez comprendre les visiteurs 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 préfèrent;
- c'est fera la promotion du site dans les moteurs de recherche: moteurs de recherche ont longtemps appris à interagir avec les réseaux sociaux, c'est pourquoi les «likes» laissent leur empreinte dans le référencement.
Je pense qu'il y a suffisamment de compliments à «J'aime» pour comprendre à quel point c'est utile et important pour le site. Par conséquent, vous pouvez suivre les instructions d'installation en toute sécurité.
Saut rapide aux instructions
"J'aime" de VKontakte
1. Aller à la page de connexion du widget à votre site.
3. Personnalisez le widget à votre guise et obtenez le code fini:
4. Le code du widget doit être inséré dans les modèles de page de site.
"J'aime" de Facebook
1. Accédez à la page de configuration du bouton "J'aime".
2. Personnalisez 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 de site.
"Tweet" de Twitter
1. Aller à.
2. Sélectionnez le type de bouton:
3. Personnalisez l'apparence du bouton:
4. Copiez et collez le code résultant dans des modèles:
"Classe!" depuis Odnoklassniki
Il est encore plus facile d'obtenir la "Classe!" avec le bouton "J'aime" du social. réseau "MoiMir". C'est exactement ce qui sera discuté plus tard.
2 en 1: "J'aime" de MoiMir + "Class" d'Odnoklassniki
1. Rendez-vous sur la page de configuration des options "J'aime" et "Classe!" ...
2. Personnalisez le widget à votre guise:
3. Copiez et collez le code résultant dans des modèles de site:
"+1" de Google+
1. Aller à page de configuration du bouton "+1".
2. Personnalisez l'apparence du bouton:
3. Copiez le code résultant et collez-le dans des 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 solutions toutes faites et des scripts qui offrent la possibilité de placer un bouton universel avec partage (fonction «dire aux amis») sur tous les réseaux sociaux populaires. Veuillez noter qu'il n'y a pas de lien fort vers le site et que ces boutons sont conçus davantage pour plus de commodité que pour un effet SEO.
Obtenez des codes de bouton et collez-les sur le site.
Où insérer 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 il est le plus rentable et le mieux placé. Il existe les options suivantes pour placer des boutons sur le site:
- page d'accueil;
- toutes les pages du site;
- page avec enregistrement / matériel.
Inutile de réinventer la roue et de placer des boutons dans les messages du forum, les pages de contact, etc.: ils n'aimeront pas les boutons. Après avoir décidé où vous allez insérer les boutons, entrez dans le panneau de contrôle de votre site à votre-site.ucoz.ru / admin et allez à:
- éditeur de page -\u003e gestion des pages du site -\u003e éditer la page d'accueil du site (si vous souhaitez placer des codes de bouton uniquement sur page d'accueil site);
- gestion de la conception → module (facultatif) → page de matériel et commentaires (si vous voulez placer des boutons "comme" pour chaque matériau);
- gestion de la conception → bloc global " Partie supérieure site " (si vous souhaitez placer le code sur toutes les pages du site).
Collez les codes de bouton reçus dans l'un de ces modèles et enregistrez vos modifications. Passons en revue ce moment à exemple spécifique - placement du bouton "C'est intéressant!" à côté de l'entrée sur notre blog officiel uCoz.
Récemment, un client sur deux (sinon le premier) dans les exigences pour le développement du site demande à être sûr de le lier aux réseaux sociaux. Les boutons «sociaux» du site sont l'outil numéro 1 pour attirer le public cible, la distribution de contenu et les 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 joignent des instructions pour les installer dans le système de gestion de contenu. Tout CMS ( oS), l'essentiel est de les intégrer harmonieusement dans le design de votre site.
Quelles sont les caractéristiques et fonctions?
Si votre site est destiné aux personnes qui communiquent avec des réseaux sociaux populaires. réseaux, par exemple, Vkontakte, Twitter, Instagramm, Facebook, Google+, Pinterest, etc., et vous souhaitez les couvrir tous, 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 en design, nous vous recommandons d'utiliser 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.
Boutons de médias sociaux Partager Pluso
Temps de lecture: 5 minutes
Les campagnes de marketing intégrées par e-mail et sur les réseaux sociaux touchent plus d'audience et augmentent le retour sur investissement (retour sur investissement). Apprenez à utiliser la plate-forme marketing intégrée de Mailigen pour atteindre vos clients par e-mail et sur les réseaux sociaux.
Pourquoi ajouter des boutons de réseaux sociaux Partager aux amis dans les e-mails?
Selon l'é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:
- En 2013, 43% des vendeurs ont trouvé des acheteurs via LinkedIn
Comment ajouter des boutons de réseaux sociaux «Informer des amis» à un e-mail
Étape 1
Lorsque vous êtes dans la quatrième étape de la création newsletters par e-mail, faites glisser le bloc de partage sur les réseaux sociaux vers 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 choisissez "Archive de la liste de diffusion", le destinataire du mailing pourra partager le contenu de l'intégralité de la lettre sur les réseaux sociaux. L'en-tête de la newsletter sera utilisé comme texte d'introduction.
- Si vous choisissez "Autre lien", vous pouvez entrer un lien vers tout matériel 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 qui les sépare.
