Récemment, j'ai eu beaucoup de demandes pour partager un tutoriel sur la création du widget de la barre latérale sur mon blog personnel. Ça a l'air sympa et le plus important, ça marche! Avec quelques PHP et CSS simples, je suis sûr que tout le monde peut facilement l’implémenter sur leurs blogs. Aujourd'hui, je vais vous montrer comment créer le mien… dans l'espoir que vous pourrez créer votre propre version personnalisée pour vos propres projets.!
Étape 1 Soyez social!
Premièrement, cela nécessite que vous ayez une page Facebook, pas seulement un profil régulier… donc si vous n'en avez pas, vous devrez d'abord en créer une. Nous allons procéder en supposant que vous en ayez déjà un!
Ok, préparons votre page Facebook et vos codes d'abonnement par courriel. Ne copiez pas les codes de l'étape 1! Tout lire ici en premier. Copiez uniquement le code complété à l'étape 2… nous allons d'abord passer aux principes de base:
Ce dont vous aurez besoin de votre page Facebook
Passons directement au code que nous utiliserons pour le widget de la barre latérale afin que je puisse vous indiquer quelques informations dont vous aurez besoin. Cet extrait sera utilisé pour la partie Facebook de notre widget:
Voici la partie la plus délicate: chaque fois que vous modifiez votre CSS, assurez-vous de changer le numéro '?1' (sur la ligne 4 de l'exemple ci-dessus) à un autre qui correspond à la version de cache de votre CSS. Si vous ne le changez pas, cela pourrait ne pas fonctionner. (c'est certes une situation étrange - j'ai eu des succès et des erreurs pour que cela fonctionne).
?1
Pour votre ID de page (c'est un long numéro qui représente votre identifiant de page facebook): Connectez-vous à votre Page Facebook> Modifier la page et vous verrez votre propre identifiant de page dans la barre d'adresse du navigateur. Utilisez ceci pour l'ID de profil à la ligne 4, sauf si vous souhaitez publier ma page Facebook sur votre site;).
Dans la barre de votre navigateur sur le Modifier la page, vous verrez quelque chose comme ceci:
Vous pouvez également modifier les connexions, la largeur et la hauteur afin qu’elles s’intègrent parfaitement dans votre barre latérale. La largeur minimale doit être 250 (px), moins que cela et vous ne pourrez pas insérer le bouton et le texte dans les cases.
Détails de l'abonnement par courriel
Nous devons maintenant récupérer les détails de votre abonnement auprès de Feedburner. Encore une fois, je suppose que vous avez déjà cette configuration en place, vous devez donc simplement vous connecter et saisir les détails suivants..
Gravez votre flux en utilisant Feedburner et remplacez le Identifiant de Feedburner dans le code ci-dessous avec le vôtre. L'identifiant Feedburner est celui de l'URL de votre graveur de flux. Par exemple feeds.feedburner.com/ariff. Oui, j'ai eu une certaine confusion à la recherche de cela avant cela.
Voici le code que nous allons utiliser pour la partie abonnement du widget:
Étape 2 Assembler les éléments: le code complet
Vous pouvez le transformer en un plugin complet (ou un shortcode) si vous le souhaitez, mais aujourd'hui, nous allons prendre un raccourci pour obtenir les bons éléments et travailler directement sur un widget texte. Non, ce n'est pas recommandé pour la production réelle… mais ça nous fera bouger tout de suite.
Copiez ce code dans un widget de texte sur votre sidebar. N'oubliez pas de modifier tous les attributs mentionnés ci-dessus et d'inclure vos propres informations d'identification Twitter et Google+. Si vous avez déjà un bouton Google+ sur votre site, vous pouvez supprimer le code javascript de Google+ ci-dessous, car une seule instance du script suffit déjà pour plusieurs boutons..
Recommander sur Google
Te suivre
Étape 3 du code CSS
Copiez les codes CSS dans la feuille de style de votre thème. Notez que si la boîte Facebook ne fonctionne pas, les codes de la boîte doivent être placés dans votre feuille de style principale (style.css) et non à un autre endroit pour les codes personnalisés..
Et nous avons fini! Vous pouvez vérifier le code CSS où je mets des balises de ce qui peut être changé. Tout le meilleur avec ça. Maintenant, vous avez quelque chose de mashable-ish sur votre site, avec une personnalisation ainsi.
Source du code de la page Facebook: Daddy Design
N'oubliez pas qu'il ne s'agit que d'un point de départ! Certains de vos développeurs de plug-in avancés pourraient même avoir de meilleures façons de faire certaines choses présentées dans ce tutoriel, alors n'hésitez pas à partager vos propres commentaires et idées dans la section commentaires ci-dessous! Nous nous assurerons de mettre à jour le didacticiel si quelqu'un a de bonnes idées.
Share
Accentsconagua
