Insérez le bouton "J'aime" de VKontakte. Votre propre texte du bouton "J'aime" Vkontakte

Bonjour à tous, les amis ! J'ai écrit il y a quelques semaines, et. Aujourd'hui, nous continuerons à utiliser les réseaux sociaux pour promouvoir le site. Dans cet article, j'écrirai comment le bouton que j'aime VKontakte et le bouton que j'aime facebook sont installés sur le site.

Comment installer le bouton "J'aime" de Vkontakte

Pour que vous voyiez un beau bouton de VKontakte sur votre site Web, vous n'avez besoin de faire que trois étapes :

  1. Ajouter le site aux réseaux sociaux. réseau VKontakte ;
  2. Régler apparence boutons;
  3. Copiez le code et collez-le dans votre site Web.

Comme vous pouvez le constater, le bouton que j'aime s'installe très rapidement sur le site. Et maintenant à propos de tout en ordre.

1. Allez d'abord ici et connectez votre site s'il n'y est pas. Pour ce faire, remplissez quelques champs. Voici comment j'ai procédé :

2. Vous devez maintenant personnaliser l'apparence du bouton. Ci-dessous, vous pouvez toujours voir ce que vous avez fait. Par exemple, j'ai choisi un bouton avec un compteur miniature. Comme les noms de boutons. Et j'ai laissé la hauteur à 22 px.

3. Après avoir personnalisé l'apparence du bouton, vous devez copier le code et le coller dans votre site Web. Tout d'abord, copiez la première partie du code

et insérez-le dans header.php avant la balise / diriger(si le site est sur le moteur wordpress). Après cela, copiez la deuxième partie du code

Après avoir inséré la deuxième partie du code, vous devriez voir un bouton "J'aime" de VKontakte sur votre site. Si vous avez des problèmes, écrivez dans les commentaires, j'essaierai de vous aider : smile :.

Comment installer le bouton J'aime de Facebook

Pour commencer, allez aux eaux ici. Si vous n'êtes pas connecté, faites-le. Maintenant, sur cette page, nous devons d'abord remplir certains champs. Bien qu'ils soient sur langue Anglaise, mais ce n'est pas grave, voyons : souriez :.

  • URL à aimer -. Nous laissons ce champ vide, car nous voulons installer le bouton sur toutes les pages ;
  • Hauteur - hauteur. Vous ne pouvez rien laisser, la hauteur du bouton par défaut est normale ;
  • Disposition - ici, nous devons spécifier l'apparence du bouton. J'ai choisi la dernière option button_count, à mon avis, c'est la meilleure. Vous pouvez essayer une autre option et voir à quoi cela ressemble. Si vous aimez plus box_count ou standard, veuillez mettre celui que vous aimez.
  • Afficher les amis "Visages - à afficher. J'ai décoché la case car je ne veux pas afficher l'avatar.
  • Largeur - largeur. Je n'ai rien mis, si la largeur du bouton ne vous convient pas, alors vous pouvez le préciser.
  • Schéma de couleurs - schéma de couleurs. Laissez la lumière par défaut.
  • Type d'action. Si vous choisissez J'aime, le bouton sera étiqueté "J'aime". Et si je recommande, alors "Je recommande". J'ai choisi la première option comme (comme).
  • Inclure le bouton d'envoi - Activez le bouton d'envoi. Je n'en ai pas besoin, alors j'ai décoché la case.

Après avoir rempli tous les champs, j'ai obtenu de l'eau comme ceci :


Cliquez maintenant sur le bouton « Obtenir le code » pour obtenir le code.



La première partie du code que vous devez placer dans le fichier footer.php avant la balise / corps... Et la deuxième partie est l'endroit où vous voulez voir le bouton Facebook Like sur votre site. Vous pouvez placer après le code du bouton "J'aime" de Vkontakte dans le fichier single.php.
C'est tout pour moi. Comment aimez-vous l'article? ??

J'ai tué plusieurs jours jusqu'à ce que je comprenne toutes les cloches et les sifflets des boutons "J'aime" de VKontakte et Facebook. Qu'en est-il du contenu dynamique ? Comment changer le texte du message sur le mur ?
J'écrirai en détail sur Facebook dans un autre article, les principes y sont différents. Alors que je veux me concentrer sur le populaire bouton "J'aime" de Vkontakte.

Maintenant, c'est déjà très différent des premiers prototypes, qui n'étaient que des liens vers des pages de gestionnaire de contacts, et de ceux qui avaient déjà des compteurs.

Actuellement, le bouton "J'aime" fait partie de l'API Vkontakte, il se connecte simplement avec la seule marque de widgets, si je ne me trompe pas, et est un widget qui utilise l'API principale de Vkontakte.

Cela signifie que nous pouvons utiliser en toute sécurité toutes les capacités de cette API, en supprimant souvent la restriction « uniquement les widgets » lors de la connexion. Fait intéressant, jusqu'à récemment, il n'y avait aucune information sur les capacités de la fonction VK.Widgets.J'aime (), alors j'ai dû souffrir moi-même. Mais maintenant, tout nous est expliqué sur la page de documentation spéciale du widget bouton "J'aime".

Ainsi, pour connecter le bouton que j'aime, vous devez vous rendre sur le site Web de VK pour les "développeurs" -> "Widgets et sites tiers" -> "" J'aime "". Si nécessaire, connectez le site et sélectionnez les paramètres du bouton.

Nous avons connecté les scripts d'API et l'initialisation de l'application pour qu'ils fonctionnent avec l'API VKontakte elle-même et en particulier avec le cas Jeanne - le widget « J'aime ».
Au bon endroit sur la page, nous insérons le code du bouton widget :

Puis, au bon moment, par exemple par document prêt, on affiche le bouton :

VK.Widgets.Like ("profprogru_vk_like", (tapez : "bouton"));

Ça y est, nous avons maintenant un bouton avec un compteur. Mais cela ne nous suffit pas, n'est-ce pas ?

Comment faire un bouton "J'aime" Vkontakte pour un site au contenu dynamique, où l'url de la page change, ou juste quelques boutons avec des liens différents ? Il n'y a qu'un principe, on va modifier le code :

VK.Widgets.Like ("profprogru_vk_like", (tapez : "bouton", titre de la page : "Texte libre", description de la page : "Texte contextuel", URL de la page : "voici un lien vers la page"), 666);

Maintenant, je vous explique, nous mettons à jour le bouton. Entre accolades, les paramètres du widget « J'aime », tapez : bouton avec un compteur, texte de publication VKontakte, texte contextuel, lien de page, et 666 est l'identifiant unique du lien pour compter les likes. Celles. nous pouvons installer plusieurs boutons "j'aime" avec des identifiants différents et un lien, voire plusieurs boutons "j'aime" complètement différents avec différents liens et affichage.

Espérons que l'information n'a pas été inutile.




Hey! Aujourd'hui je vais vous expliquer comment créer rapidement une application et insérer un bouton " j'apprécie"à partir de réseau social sans plugins inutiles.

Peut-être que vous avez remarqué que l'autre jour, j'ai finalement vissé ce bouton après les messages. "Enfin" j'ai écrit pour une raison, car il y avait des problèmes avec la connexion de ce bouton à l'API VK, à la suite de quoi j'ai reçu l'inscription " Ouvrir une violation de sécurité de l'API"et une barre de progression qui s'exécute sans fin. Il s'est avéré que tout était dans l'orthographe banale de l'adresse du site dans les paramètres." API ouverte"dans VKontakte lui-même (j'écrirai à ce sujet ci-dessous).

Alors serrons le bouton " j'apprécie".

Tout d'abord, passons en revue notre profil VK (assurez-vous d'utiliser le nôtre, car nous devrons créer une application). Ensuite, allez sur la page de création d'un widget et voyez un formulaire similaire :

Premier champ " Site Web / Application"- ici, nous pourrons immédiatement créer une application sans gestes inutiles, mais vous savez, je l'ai fait comme ça et elle est créée en quelque sorte par * oups de manière tordue.

Création et configuration de l'application

Il vaut donc mieux faire des gestes inutiles et aller sur la page de création de l'application, saisir n'importe quel nom dans le champ approprié, puis sélectionner le type : " Site Internet", et remplissez le champ avec une description, mais ce n'est pas nécessaire. Ensuite, cliquez sur" Aller au téléchargement de l'application"et entrez le captcha.

Tout! L'application a été créée et nous avons un formulaire avec ses paramètres devant nous :

Premier onglet " Information", il est actif pour vous maintenant, vous pouvez charger une icône pour l'application, saisir des données, sélectionner un groupe.

Onglet suivant " Réglages", elle est la plus importante! Veuillez noter que tout en haut, il est surligné en gras identifiant le numéro de votre application (il va connecter votre bouton), puis va " Clé protégée", n'y touche pas.

Adresse du site Web: http://votresite.com/ (l'adresse à laquelle vous connectez l'Open API. Si vous utilisez cette application sur un autre site ou sur un hébergeur local, cela ne fonctionnera pas. L'application est complètement liée à l'adresse du site qui est spécifiée ici.)

Une barre oblique supplémentaire dans les paramètres d'adresse et votre bouton ne correspondra pas, il affichera une erreur " Ouvrir une violation de sécurité de l'API".

C'est tout, enregistrez les modifications, le reste des onglets ne peut pas être configuré.

Personnaliser et insérer un bouton

On revient au formulaire de création d'un bouton et le voici déjà dans le champ " Site Web / Application"Votre application doit apparaître dans la liste déroulante, sélectionnez-la.

Prochain point " Options des boutons"- choisissez celui qui vous convient le mieux pour le design, ci-dessous, sous le formulaire, il y a un exemple visuel d'un bouton. ce moment il existe 4 types de boutons :

  • Bouton avec compteur de texte
  • Bouton compteur miniature
  • Bouton miniature
  • Bouton miniature, compteur sur le dessus

Le type de bouton a été sélectionné, maintenant l'élément " Nom du bouton", jusqu'à présent, il y a 2 options (choisissez celle que vous aimez):

  • j'apprécie
  • C'est intéressant

Bon, enfin, nous sommes arrivés sur le terrain" Code intégré". Lorsque vous avez sélectionné votre application dans le premier champ, son ID est automatiquement inséré dans le code. Ce code doit être inséré à deux endroits sur votre site, les développeurs l'ont spécialement commenté, mais je vais aussi l'expliquer juste en Cas.

Premier morceau de code :

doivent être insérés à l'intérieur de la balise :

Et le deuxième morceau :

doivent être insérés à la place du site où le bouton doit être affiché.

N'insérez pas mon code, je l'ai donné en exemple, d'autant plus que j'ai le mauvais paramétrage des boutons et que l'ID n'est pas précisé.

Et ça y est, votre bouton est prêt !

Enrouler autour d'un bouton

Comme vous pouvez le voir, le bouton est placé dans div avec idishinik " vk_like", où le style de son affichage est enregistré. Et dans ce style, les développeurs ont introduit la règle:

Clarifier les deux;

Comme nous le savons, cette règle annule le flux autour de l'élément depuis les bords droit et gauche, c'est-à-dire si vous voulez que votre bouton soit aligné avec le reste des boutons sociaux. réseaux, vous ne pouvez même pas rêver, elle se tiendra fièrement sur nouvelle ligne... Pour éviter cela et toujours remettre le bouton sur une ligne, remplacez :

Cela annulera l'annulation (:-D) du flux autour de l'élément, et " ! important"augmente la priorité de votre style, c'est-à-dire que votre règle aux yeux du navigateur sera la principale.

Eh bien, il semblait dire tout ce qu'il voulait)))) J'espère que vous avez tout compris et que vous avez réussi à insérer le bouton !

Et si vous avez encore beaucoup de temps avant d'insérer le bouton, puisque vous n'avez pas encore votre propre site, alors peut-être que la création de sites Cheboksary vous y aidera.

Comment ajouter un bouton de contact "J'aime" à votre blog

Alors, pour installer ce bouton sur votre blog

créez, puis accédez à, connectez un nouveau site et sélectionnez l'option de bouton souhaitée :

Ce code doit être inséré à l'intérieur de la balise (dans le fichier header.php) :

N'oubliez pas au lieu de signes ###### insérez vos numéros individuels !

Collez ce code à l'endroit où vous souhaitez placer votre bouton :

Comme vous pouvez le voir, j'ai placé ce bouton après chaque article de blog (fichier unique.php).

Comment ajouter un bouton J'aime sur Facebook

Nous avons trouvé le widget pour Vkontakte.ru, nous devons maintenant installer le widget pour Facebook.

Allez à, nous voyons cette fenêtre:

URL vers Like - laissez ce champ vide

Style de mise en page - le style du comptoir (j'ai choisi le style standard).

Largeur - la largeur du bouton. Associez-le à votre design (j'ai choisi 450px).

Verbe à afficher - quel mot sera affiché sur le bouton : J'aime ou Recommander. J'ai opté pour la première option.

Jeu de polices et de couleurs ( Schéma de couleur) choisissez selon vos goûts.

Après avoir effectué les réglages nécessaires, cliquez sur le bouton Obtenir le code :

Une fenêtre comme celle-ci apparaîtra :

Nous sommes intéressés par le code du champ supérieur iframe... Copiez ce code à l'endroit où vous voulez voir le bouton "J'aime".

Maintenant très point important! Si vous avez un blog WordPress, après

http://www.facebook.com/plugins/like.php?href=

besoin d'insérer

Mon code ressemble à ceci :

Mise à jour de janvier 2012 : L'autre jour, sur certains sites, le bouton J'aime de Facebook, qui était installé selon la méthode décrite ci-dessus, a cessé de fonctionner. Voici une version alternative du bouton en utilisant html5 :

Insérez ce code juste après la balise

Et voici ce bout de code, à l'endroit où il faut afficher le bouton :

Comme vous pouvez le voir, il ne vous faudra pas plus de 5 minutes pour installer ces boutons :). Et ne me dites pas plus tard que vous n'avez pas assez de temps pour de telles bagatelles - toutes les méthodes sont bonnes pour attirer les visiteurs !

P.S. Vous êtes-vous déjà demandé combien de sites existent sur Internet ? Personnellement, je ne le fais pas. Mais je sais où trouver les sites les plus populaires au monde. À la 9e place, le Twitter préféré de tous !

Précédent Suivant

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 de la façon d'ajouter des boutons sociaux de réseaux populaires sur le site.

Tout d'abord, je vais vous montrer à quoi cela devrait ressembler sur le site. Sur de nombreux blogs et sites d'actualités ci-dessous, après chaque article, vous pouvez voir quelque chose comme ceci :

Ce sont les boutons sociaux, grâce auxquels SMO est réalisé, puis l'activité sociale. Cet article est consacré à la question de savoir où se procurer le code de ces sociaux. boutons et comment les installer correctement sur votre site Web. Commençons par installer Google+.

1. Ajoutez le bouton Google+ au site

2. Ajouter au site le bouton "J'aime" de Vkontakte et Facebook

2.1. J'aime de FaceBook

Commençons par obtenir le code du bouton pour Facebook. Pour ce faire, visitez cette page : https://developers.facebook.com/docs/plugins/like-button. Vous devriez voir l'image suivante :

En haut à droite, vous pouvez voir à quoi ressemblera le bouton sur votre site Web. Voyons les paramètres qui peuvent être définis :

1. URL pour aimer
C'est un paramètre optionnel. Si vous laissez ce champ vide, chaque page aura son propre compteur de likes. Si vous y entrez une URL spécifique, le compteur sera le même (les likes sont additionnés à partir de toutes les pages de ce site).

2. Bouton Envoyer
Ajoutez ou supprimez un bouton pour l'envoi de messages. Je recommande de supprimer ce bouton, car notre objectif est de mettre juste le bouton "J'aime", bien que vous puissiez avoir des objectifs complètement différents.

3. Style de mise en page
Le style d'affichage du bouton. Mon préféré est standard.

4. Largeur
La 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 (par défaut) car c'est un moyen plus efficace de motiver l'utilisateur à l'aimer.

6. Schéma de couleurs
Couleurs : soit blanc soit noir.

7. Police
Il suffit de définir la police pour la légende "J'aime".

Après avoir spécifié les paramètres, cliquez sur le bouton "obtenir le code" et placez-le sur le site. Code du bouton Facebook normal :

<-- placez cette partie du code à la fin de la page-->
<-- эту часть кода нужно разместить в месте отображения: -->

2.2. Мне нравится от ВКонтакте

Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: https://vk.com/dev . У Вас должна открыться следующая страница:

Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:

После добавления нового сайта сохраните его. Теперь выберите из выпадающего меню нужный сайт. Далее следуют небольшое число параметров: "вариант кнопки", "высота", "название кнопки" - это все настраивается под Ваш вкус. В конце будет код для кнопки:

3. Добавляем на сайт кнопку tweet

Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки.

Partagez ceci