Si vous avez un site Web ou un blog, pourquoi ne pas utiliser ces réseaux sociaux pour construire, rendre le projet de plus en plus populaire.

Cela nous aidera avec le "J'aime" de Vkontakte, Facebook, ainsi que les boutons Tweet et Google +1, qui seront situés à la fin de l'article.

Ils travaillent très simples! Lorsque le visiteur de votre site lisait l'article et j'ai aimé cela, alors il veut probablement exprimer son opinion à son sujet.

Mais beaucoup rendent difficile de laisser un commentaire, il est nécessaire d'introduire un "nom", "Mail", "Site" et "Antikatch", et voici ici le bouton "J'aime" cliquer dessus et le cas est terminé. , le lien vers votre message sera affiché dans le ruban social du visiteur et elle sera en mesure de voir tous ses abonnés et amis.

Et ce sont déjà de nouveaux visiteurs gratuits, ainsi que des moteurs de recherche tels que des signaux sociaux et peuvent facilement commencer à commencer au classement dans l'émission supérieure.

Dans le passé, j'ai dit à la leçon, sous la forme d'icônes situées verticalement ou horizontalement n'importe où sur le site - lisez l'article nécessairement.

Bouton "j'aime" de vkontakte

Pour ajouter le bouton "J'aime" sur le site, la première chose à voir sur le bouton Enregistrement du bouton vkontakte. et remplissez les champs avec le nom de votre site.

Maintenant, vous devez copier "1 partie du code" et ajoutez-le au fichier header.php. Avant la balise de fermeture .

1 2 3 4

< script type= "text/javascript" src= "http://userapi.com/js/api/openapi.js?49"> < script type= "text/javascript" > Vk. Init ((APIID: 2970045, uniquement Wididgets: True));

Depuis que j'ai conclu une conclusion après le texte de l'article, le code inséré dans le fichier single.php..

1 2 3 4

< div id= "vk_like" > < script type= "text/javascript" > Vk. Widgets. Comme ("vk_like", (type: "bouton", hauteur: 18));

Redémarrez la page et regardez le résultat.

Bouton de Google +1

Afin d'ajouter le bouton «Google +1» sur le site ou le blog, passez à travers cela. relier Et frappe la page de concepteur simple.

Choisissez la taille du bouton (petit, moyen, grand). N'oubliez pas de choisir le russe.

Puis insérer "1 partie du code" À cet endroit où vous envisagez d'installer le bouton "Google +1". Je l'ai conclu après le texte de l'article, donc le code inséré dans le fichier single.php..

< g: plusone size = "medium">

1 2 3 4 5 6 7 8 9

< script type= "text/javascript" > La fenêtre. ___gcfg \u003d (Lang: "ru"); (Fonction () (var po \u003d document. CreateEeeElement ("script"); PO. Type \u003d "Texte / JavaScript"; ASYNC \u003d true; src \u003d "https://apis.google.com/js/plusone.js"; Var s \u003d document. Getelementsbytagname ("script") [0]; s. Parentnode. Insert avant (po, s); )) ();

Redémarrez la page et regardez le résultat. Si le bouton n'aime pas que vous pouvez le changer dans le concepteur.

Tweet Button

Si vous souhaitez définir le bouton "Tweet" du réseau SOC de micro-blogging Twitter passer par cette relier Et arriver à la page du concepteur.

Choisissez parmi les boutons proposés le plus approprié pour vous. J'ai aimé l'option "Envoyer un lien".

Vous sélectionnez la langue russe dans les paramètres et copiez le code à l'endroit où vous envisagez de créer le bouton "Tweet". Dans ma version, c'est un fichier. Single.php..

Redémarrez la page et profitez du résultat.

Bouton "j'aime" de Facebook

Pour ajouter un bouton, j'aime de Facebook, vous devez passer par cette relier Et faire les paramètres dont vous avez besoin.

URL À AIMER. - Ce champ n'est pas rempli.

Bouton d'envoi (xfbml uniquement) - J'ai supprimé la coche de bouton d'envoi afin qu'il n'y ait pas de bouton supplémentaire "Envoyer".

Style de présentation. - Format de bouton. J'ai aimé Botton_Count, mais le goût et la couleur que vous savez, comme cela se produit avec des amis.

Montrer des visages. - Nous avons mis une tique pour voir les avatars de ceux qui ont aimé l'article.

Largeur. - Spécifie la largeur. J'ai laissé tout inchangé.

Verbe à afficher - Choisissez ce que l'inscription sera située sur le bouton Facebook. Voici seulement deux options: "Comme" - J'aime ça ou "Recommander" - Je recommande.

Schéma de couleur. - Choisissez un jeu de couleurs pour la conception. Pour sombre ( sombre.) ou la lumière ( lumière) placer.

Police de caractère - Vous pouvez spécifier une police spécifique des noms de bouton ( arial, verdana. autre).

J'ai défini la première partie du code devant la balise de fermeture

dans le fichier pied de page..

1 2 3 4 5 6 7 8

< div id= "fb-root" > < script> (Fonction (D, S, ID) (Var JS, FJS \u003d D. GetElementsByTagname (s) [0]; Si (D. GetElementByID (ID)) Retour; JS \u003d D. CreateEeElement (s); JS. ID \u003d ID ; JS. SRC \u003d "//connect.facebook.net/ru_ru/all.js#xfbml\u003d1"; Fjs. Parentnode. Insérer avant (JS, FJS); ) (Document, "script", "Facebook-JSSDK"));

La deuxième partie du bouton "J'aime" Facebook ajoutez-le à l'endroit où le bouton sera affiché. J'ai sous le texte, puis le fichier single.php..

< div data- send= "false" data- layout= "button_count" data- width= "450" data- show- faces= "true" >

Redémarrez et voyez le résultat.

Après un certain réglage de l'emplacement des boutons "J'aime" Vkontakte, Facebook, ainsi que "Tweet" et "Google+", j'ai reçu ce résultat.

C'est tout! J'espère que mon article vous aidera à mettre en place et à installer les boutons des réseaux sociaux. Ne sautez pas les messages suivants, s'abonner Mises à jour des blogs.

Si quelque chose ne fonctionne pas ou que vous avez des questions sur le sujet, écrivez pour soutenir le service ou laissez un commentaire, je vous aiderai!

J'ai noté l'importance de SMO (optimisation des médias sociaux) dans la promotion du site Web. Parlons maintenant directement sur la façon de faire de l'optimisation sociale sur votre site, ou plutôt comment ajouter les boutons sociaux des réseaux populaires sur le site.

Pour commencer, je vais montrer comment cela devrait ressembler à cela. Sur de nombreux blogs et sites de presse en bas après tout article, vous pouvez voir quelque chose de similaire:

Ce sont des boutons sociaux, grâce à laquelle le SMO est atteint, puis une activité sociale. Cet article est consacré à la question de savoir où prendre le code de ces sociaux. Boutons et comment les corriger à vous-même sur le site. Considérez pour lancer l'installation de Google+.

1. Ajoutez le bouton Google+ au site

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

2.1. J'aime Facebook

Commençons par utiliser le bouton pour Facebook. Pour ce faire, allez à cette page: https://developers.facebook.com/docs/plugins/like-button. Vous devez voir la photo suivante:

À droite ci-dessus, il est affiché comment le bouton ressemblera sur votre site. Nous traiterons des paramètres que vous pouvez définir:

1. URL à aimer
C'est un paramètre optionnel. Si vous laissez le champ vide, chaque page aura votre propre viether de goûts. Si vous entrez une adresse URLA spécifique, le compteur sera uni (les goûts sont résumés dans toutes les pages de ce site).

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

3. Style de mise en page
Style d'affichage des boutons. Personnellement, j'aime la plupart des standards.

4. Largeur.
La largeur du bouton en pixels. Je ne mettez généralement pas plus de 100 pixels.

5. Verbe à afficher
Ce qui sera affiché sur le bouton: "J'aime" ou "je recommande". Habituellement, je choisis la première option (en vaut la valeur par défaut), car il s'agit d'un moyen plus efficace de faire fondre l'utilisateur de mettre comme.

6. Schéma de couleurs.
Gamme de couleurs: blanche ou noire.

7. Police.
Tâchez simplement la police de l'inscription «J'aime».

Après avoir spécifié les paramètres, ils le font sur le bouton "Get Code" et placez-le sur le site. Code de bouton normal pour Facebook:

<-- cette partie du code est placée à la fin de la page.-->

<-- cette partie du code doit être placée à l'écran:-->

2.2. J'aime de vkontakte

Considérons maintenant comment obtenir le bouton "J'aime" de Vkontakte. Pour ce faire, allez à la page suivante: https://vk.com/dev . Vous devez ouvrir la page suivante:

D'abord, vous devez ajouter un nouveau site. Pour ce faire, sélectionnez Connecter un nouveau site Web dans le menu déroulant:

Après avoir ajouté un nouveau site, enregistrez-le. Sélectionnez maintenant le site souhaité dans le menu déroulant. Ensuite, suivez un petit nombre de paramètres: "Option de bouton", "Hauteur", "Nom du bouton" - Tout est configuré à votre goût. À la fin, il y aura un bouton pour le bouton:

3. Ajoutez le bouton Tweet au site

Comme dans les cas précédents, pour commencer, accédez au lieu de réception et de configuration du bouton.

Il y a plusieurs années, les services de bookmarking étaient très populaires. Maintenant, ils sont presque complètement remplacés. " rauque"Réseaux sociaux. Je n'ai pas voulu installer ces boutons pendant une longue période, mais à la fin, j'ai abandonné et l'avons dit - maintenant ces boutons presque le seul moyen d'obtenir un trafic" social ", car les services de bookmarking ont Pleine n'a été intéressé à personne. Plugins pour l'installation de ces boutons en vrac, mais je ne suis pas allé sur les yeux du plugin, dans lequel tous ces 4 services seraient. Pour une raison raisonnable - Vkontakte, peu de gens sont connus en dehors de la Russie et leur soutien est ignoré. Cependant, c'est pour le meilleur - pourquoi le navire Wordpress. Les plugins inutiles lors de l'installation de ces boutons peuvent être facilement effectués manuellement?

1 bouton de jeu En contact avec

Widget " j'apprécie"De Vkontakte peut être obtenu.

Fais attention! Bouton Vkontakte Le seul bouton du code est spécifié par l'ID du site Plug-in. À la capture d'écran donnée, le code ne fonctionnera pas avant de cliquer sur le bouton "Enregistrer" - seulement dans le code. Api_id. Il sera remplacé par l'ID de votre site et le code deviendra un travailleur.

Vous devez installer le bouton en 2 étages, d'abord ouvrir le fichier header.php. votre modèle et insérez l'appel de script dans diriger. Section. Comme ça:

<tête profil \u003d "http://gmpg.org/xfn/11"\u003e ... <type de script \u003d "Texte / JavaScript" SRC \u003d "http://userapi.com/js/api/openapi.js?49"> <type de script \u003d "Texte / JavaScript"\u003e</ script\u003e ... </ Tête\u003e

... ...

Chose compréhensible qui à la place Api_id. Vous devrez spécifier l'ID de votre site.

Le bouton lui-même doit être installé par code:

<div ID \u003d "vk_like"\u003e <type de script \u003d "Texte / JavaScript"\u003e </ script\u003e

Ne soyez pas surpris si vous verrez l'inscription sur le serveur local au lieu du bouton "Veuillez spécifier le nom de domaine de base correct dans l'application":

C'est juste un problème qui ne sera pas lorsque vous transférez le site à l'en-tête. Cependant, pour voir ce bouton sur le serveur local, ouvrez simplement le site dans le navigateur de l'opéra. Curieusement, c'est dans l'opéra que le bouton sera affiché même sur le serveur local.

2 bouton de jeu Facebook.

Widget " j'apprécie"De facebook peut être obtenu.
Vous verrez cette page:

Contrairement au bouton Vkontakte, le code supérieur doit être inséré pas dans la section. diriger.et immédiatement après avoir ouvert la balise . En règle générale, cela ouvre tout dans le même dossier. header.php. Votre modèle.

3 bouton de réglage Twitter.

Bouton " Tweet«Vous pouvez obtenir de Twitter.
Vous verrez cette page:

En général, tout est simple - choisissez les options et copiez le code spécifié dans lequel vous souhaitez afficher un bouton.

4 Installation du bouton G +.

Bouton " G +."De Google peut être obtenu.
Vous verrez cette page:

Ici aussi, tout est simple - choisissez les options et copiez le code dans lequel le bouton doit être affiché.

L'installation de ces boutons est assez simple et presque toute personne va le comprendre avec elle. En fin de compte, qu'est-ce qui peut être difficile à copier le code des boutons? Cependant, les problèmes commencent lorsque le blogueur copie les codes des boutons et obtient quelque chose comme:

Comment, en fait, les construire dans une rangée? Ce n'est pas aussi difficile que cela puisse paraître. Besoin d'envelopper tous les boutons de n'importe quel div et de le déterminer styles.css. Votre modèle. Ici, par exemple, le code de mes boutons:

<div mas \u003d "post-méta-social"\u003e <div ID \u003d "vk_like"\u003e Tweet C'est-à-dire que l'appel m'a transformera le barrage post-méta-socialqui est défini dans styles.css. de cette façon: .post-méta-social (rembourrage: 0px; marge: 0px; Marge-haut: 10px; Marge-Bottom: 10px; Affichage: Inline;) .Post-méta-social #vk_like (flotteur: gauche; largeur: 170px! ;) .Post-méta-social .fb-ressemblant à: 150px! IMPORTANT;) .Post-méta-social #Tweet_ike (flotteur: gauche; largeur: 120px! Important;). Post-méta-social .g-PlusOne (flotteur : La gauche;) Post-méta-social (rembourrage: 0px; marge: 0px; marge-haut: 10px; marge-bas: 10px; affichage: en ligne;) .pospos-méta-social #vk_like (flotteur: gauche; largeur: 170px! ) Post-méta-social .fb-like (flotteur: gauche; largeur: 150px! IMPORTANT;) .Post-méta-social #Tweet_ike (flotteur: gauche; largeur: 120px! Post-méta-social. G -Plusone (flotteur: gauche;) Hey! Aujourd'hui, je vais vous dire comment créer rapidement une application et insérer un bouton " j'apprécie"Du réseau social sans plugins inutiles. Peut-être que vous avez remarqué, j'ai finalement vissé ce bouton après des postes. "Enfin," Je n'ai pas écrit pour rien, car il y avait des problèmes de connexion de ce bouton à l'API de Vkontakte, à la suite de laquelle j'ai reçu une inscription " Ouvrir une violation de la sécurité de l'API"Et une barre de progression infiniment courante. Comme il s'est avéré, il s'agissait de la rédaction banale de l'adresse du site dans les paramètres" Ouvert API."Dans Vkontakte elle-même (je vais écrire à ce sujet juste en dessous). Alors ouvre le bouton " j'apprécie". Pour un début, passons à travers votre profil en VC (nécessairement par vous-même, car nous devrons créer une application). Ensuite, allez à la page de créer un widget et voir une forme similaire: Premier champ " Site Web / App"- Nous serons immédiatement en mesure de créer une application sans gestes inutiles, mais vous savez, j'ai faibli et il est créé d'une manière ou d'une autre à travers * je suis tordue. Création et configuration d'une application Il est donc préférable de faire une télévision supplémentaire et d'aller à la page de création d'applications, entrez n'importe quel nom dans le champ approprié, puis choisissez le type: " Site Internet", et remplissez le champ avec une description, mais ce n'est pas nécessaire. Cliquez sur" Allez télécharger l'application"Et nous entrons dans le CAPTCHA. Tout! L'application est créée et avant que nous nousignes avec son paramètre: Premier onglet " Informations", Il est actuellement actif, vous pouvez télécharger une icône pour l'application, entrer les données, sélectionner un groupe. Onglet suivant " Paramètres", c'est le plus important! S'il vous plaît noter à la très graisse allouée Identifiant Votre numéro de demande (il connectera votre bouton), puis va " Clé protégée", ne le touche pas. Adresse du site Web: http://yoursite.com/ (adresse à laquelle vous connectez Ouvrez API. Si vous utilisez cette application sur un autre site ou sur LockOchoste, elle ne fonctionnera pas. L'application est entièrement liée à l'adresse du site, qui est répertoriée ici. .) L'excès de slash dans les paramètres d'adresse et votre bouton ne légette pas, affichera une erreur " Ouvrir une violation de la sécurité de l'API". Toutes, enregistrez les modifications, vous ne pouvez pas configurer les onglets restants. Réglage et insertion des boutons Nous retournons au formulaire de création d'un bouton et ici déjà dans le champ " Site Web / App«Dans la liste déroulante, votre application apparaîtra, choisissez-la. Prochain point " Options du bouton"- Nous avons choisi que vous obtenez mieux sous la conception, en bas sous le formulaire donne immédiatement un exemple visuel du bouton. Pour le moment il y a 4 types de bouton: Bouton de compteur de texte Bouton Miniature Meter Bouton miniature Bouton miniature, compteur d'en haut Le type de bouton a choisi, maintenant article " Bouton de nom", Jusqu'à présent, il y a 2 options (choisissez quelqu'un que vous aimez): j'apprécie C'est intéressant Eh bien, enfin, nous sommes venus sur le terrain " Code pour insertion«Lorsque vous avez choisi votre application dans le premier champ, son identifiant est automatiquement inséré dans le code. Ce code doit être inséré dans deux endroits de votre site, les développeurs ont spécifiquement commenté sur celui-ci, mais au cas où cela expliquera également. Premier code de code: vous devez insérer à l'intérieur de la balise: Et la deuxième pièce: vous devez insérer à la place du site où le bouton doit être affiché. Je n'insère pas mon code, je l'ai apporté comme exemple, surtout que je n'ai pas les paramètres de boutons et que l'ID n'est pas spécifié. Et donc tout, votre bouton est prêt! Boutons d'inondation À votre avis, le bouton est placé dans diviser Avec idišinik " vk_ike"Où le style de son affichage est prescrit. Et dans ce style, les développeurs ont manqué la règle: Clarifier les deux; Comme nous le savons, cette règle annule le flux autour de l'élément à partir des bords droit et gauche, c'est-à-dire si vous voulez que votre bouton soit dans une rangée avec le reste des boutons sociaux. Les réseaux, vous pouvez et ne pas rêver, il restera fièrement sur une nouvelle ligne. Pour éviter cela et retournez toujours le bouton d'affilée, remplacez: Nous annulons donc l'annulation (: -D) du flux de l'élément et " ! Important.«Améliore la priorité de votre style, c'est-à-dire que votre règne dans les yeux du navigateur sera la principale. Eh bien, il semble être tout ce que je voulais))) J'espère que vous avez tous compris et que vous avez réussi à insérer un bouton! Et si vous avez longtemps avant d'insérer le bouton pendant une longue période, depuis votre site, jusqu'à présent, non, alors peut-être que la création de sites Cheboksary vous aidera. Vendredi, messieurs! Demain, les gens ordinaires commencent les week-ends bien mérités. Et moi, comme toujours, je serai occupé: cette fois, vous devez appuyer dans votre propre journée de naissance. Hier, j'ai montré une raison de se souvenir du bouton. Il est maintenant presque aussi populaire que Tweet de Twitter, vous pouvez donc le répondre à presque tous les sites ou blogs. Y compris mon, immédiatement après l'article, appuyez sur - je serai très gentil. Quant aux raisons qui m'avaient poussé à en parler - le bouton "J'aime" obtenu un renouvellement, un petit mais agréable. Dans le même temps, je vous rappelle comment la configurer et l'installer. Dans les nouvelles provenant de Vkontakte, il est indiqué que la conception du bouton "J'aime" était légèrement modifiée, le mètre de page est devenu client, c'est-à-dire une partie du bouton et, surtout, il a la possibilité de Définissez le bouton "J'aime" le bouton Hauteur. Installation du bouton "J'aime" Donc, de tous les boutons répertoriés, l'option de Vkontakte s'est distinguée par la plus grande hauteur, à cause de laquelle une rangée avec d'autres ne correspondait pas. Maintenant, la hauteur peut être spécifiée sur la page Paramètres du bouton, où nous obtenons son code pour votre blog. Pour ce faire, faites en entrée et aller à la page widget "j'aime". Cela peut être fait en cliquant sur l'élément "Développeurs" au bas de la page, puis "widgets et sites tiers" et, enfin, le "widget" que j'aime ". Vous pouvez immédiatement aller sur ce lien - je l'aime. Le plus intéressant ici est le code d'insertion. Une partie du code avant besoin d'insérer entre les balises et Votre site. Si vous avez un blog sur WordPress CMS, ces balises sont dans le fichier Header.php. Et insérez la deuxième partie du code sur l'endroit où vous souhaitez voir le bouton "J'aime". Configuration du bouton "J'aime" En plus de l'explicite spécifiée dans les paramètres, le bouton contient quelques paramètres plus intéressants. il largeur - Largeur de boutons, nom de page de page pour l'affichage sur le mur Vkontakte, les pagedescription - Pour afficher dans la paroi sur le mur, pageImage - adresse de la vignette à afficher sur le mur et enfin, le nouveau paramètre texte - définit le texte qui semble pas lorsque vous planifiez des sourires sur la liaison, comme avec les paramètres précédents et directement dans l'entrée murale. En conséquence, il ne peut y avoir plus de 140 caractères, la page par défaut est affichée. Comment ces paramètres définissent Ils sont signés dans la ligne Vk.widgets.itant ("vk_lique", (type: "plein")); Après la virgule, après l'attribut de type: "Full" ou à l'endroit où il se trouve dans mon exemple (en fonction des paramètres du bouton, il peut y avoir des boutons vides). C'est ainsi que le résultat peut regarder: Vk.widgets.ike ("vk_like", (type: "complet", largeur: 100, hauteur: 20, pagetitle: "J'aime vkontakte", pagedescription: "Sur l'installation et la configuration d'un bouton sur votre blog", texte : "Matériel très utile!")); Eh bien, c'est tout aujourd'hui. Maintenant, je vais apparaître ici seulement dans quelques jours. N'oubliez pas de nouvelles réunions! Articles similaires Retour Plan du site Sur le site