Si votre site Web comporte une page Facebook, il est judicieux de le promouvoir auprès de vos lecteurs en affichant un cadre semblable à Facebook dans la barre latérale du blog..
Dans ce tutoriel, nous allons créer un widget WordPress qui affiche votre Facebook comme boîte. Avec ce widget WordPress, vous aurez la possibilité d’afficher l’en-tête de la boîte, de montrer vos derniers fans et de diffuser votre dernier flux Facebook..
Les pages Facebook existent depuis un moment maintenant et elles ont récemment été converties pour utiliser la nouvelle fonctionnalité de chronologie afin de donner encore plus de visibilité à vos publications précédentes sur votre profil..
Une page Facebook est identique à une page personnelle, mais vous ne pouvez pas contacter d’autres personnes, c’est parce que les pages Facebook permettent aux entreprises de se connecter avec leurs clients..
Les pages Facebook vous donnent une relation plus dynamique avec les personnalités publiques et les organisations qui vous intéressent.
Si vous avez votre propre entreprise, vous pouvez aussi créer votre propre page Facebook..
Une Facebook like box est un plugin social qui permet aux propriétaires de pages Facebook d'afficher un bouton J'aime et un flux de statut sur leur propre site Web..
La case similaire signifie que les visiteurs de votre site peuvent:
Voici un exemple de Facebook comme Wptuts +.
Pour créer une Facebook Like Box pour votre page Facebook, vous devez enregistrer une application Facebook pour pouvoir utiliser l'API Open Graph de Facebook..
Maintenant, vous voyez ce que la Facebook like box est, nous pouvons comprendre comment transformer cela en un widget WordPress.
Avant de commencer à coder le widget, nous devons comprendre ce qu'est un widget WordPress et comment utiliser l'API du widget WordPress pour créer facilement des widgets WordPress..
Un widget WordPress est un morceau de code PHP qui s'exécutera dans une barre latérale de WordPress..
Une barre latérale de WordPress est une zone enregistrée dans votre thème où vous pouvez ajouter des widgets WordPress..
Des widgets WordPress peuvent facilement être ajoutés aux barres latérales en allant sur la page Widget du tableau de bord et en allant à Apparence -> Widgets. Depuis cette page Widgets, vous pouvez faire glisser des widgets dans la barre latérale de votre choix. Le widget doit avoir une sorte de formulaire Admin afin que vous puissiez modifier les données affichées par le widget..
WP_Widget
Pour créer un widget WordPress, il vous suffit d'hériter de la norme WP_Widget
classe et utiliser certaines de ses fonctions.
Trois fonctions principales doivent être utilisées pour que le widget fonctionne. Ces fonctions sont: forme()
, widget ()
et mettre à jour()
.
le WP_Widget
la classe est située dans wp-includes / widgets.php.
Vous trouverez ci-dessous le modèle d'un widget WordPress. Lorsque vous créez un nouveau widget, il vous suffit de copier et coller le code ci-dessous comme point de départ de votre widget..
/ ** * Ajoute le widget Foo_Widget. * / class Foo_Widget étend WP_Widget / ** * Enregistrez un widget avec WordPress. * / fonction publique __construct () parent :: __ construct ('foo_widget', // ID de base 'Foo_Widget', // tableau de noms ('description' => __ ('Un widget Foo', 'text_domain'),) / Args); / ** * Affichage frontal du widget. * * @see WP_Widget :: widget () * * @param array $ args Arguments du widget. * @param array $ instance Valeurs enregistrées de la base de données. * / widget de fonction publique ($ args, $ instance) extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); echo $ before_widget; if (! empty ($ title)) echo $ before_title. $ titre. $ after_title; ?> Bonjour le monde!
Créer un widget Facebook Like Box
Nous allons créer un widget WordPress pour vous permettre d'ajouter et de modifier facilement une boîte de type Facebook sur votre blog WordPress..
L'utilisation d'un widget présente l'avantage de la flexibilité qu'il vous apportera. Le choix que vous avez sur votre boîte de type Facebook vous permet de modifier complètement la fonctionnalité en plaçant différents attributs sur la même boîte..
La Facebook like box prend les attributs suivants:
data-href
- L'URL de votre page Facebook.largeur de données
- La largeur de la boîte comme.données-show-faces
- Une valeur vraie ou fausse qui décide si vous allez montrer aux gens qui aiment votre page.flux de données
- Une valeur true ou false qui décide si vous souhaitez afficher vos dernières mises à jour de statut..en-tête de données
- Une valeur vraie ou fausse qui décide si vous allez ou non nous montrer la barre de recherche sur Facebook.Ce sont les options dont nous avons besoin pour nous assurer que l'utilisateur peut changer dans l'écran d'administration du widget, afin de pouvoir changer l'apparence de la même boîte directement dans le tableau de bord WordPress.
Maintenant, nous savons à quoi s'attendre de la boîte Facebook, nous pouvons commencer à coder.
Nous allons d’abord enregistrer le widget sur le widget_init
action.
/ * * Nom du plug-in: Paulund Facebook Like Box * URI du plug-in: http://www.paulund.co.uk * Description: Un widget qui sert de boîte à Facebook pour votre site Web * Version: 1.0 * Auteur: Paul Underwood * URI de l'auteur : http://www.paulund.co.uk * Licence: GPL2 Copyright 2012 Paul Underwood Ce programme est un logiciel libre; vous pouvez le redistribuer et / ou le modifier selon les termes de la licence publique générale GNU, version 2, telle que publiée par la Free Software Foundation. Ce programme est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE GARANTIE; sans même la garantie implicite de QUALITÉ MARCHANDE ou d'ADÉQUATION À UN USAGE PARTICULIER. Voir la licence publique générale GNU pour plus de détails. * / / ** * Enregistrez le widget * / add_action ('widgets_init', create_function (", 'register_widget (" pu_facebook_widget ");'));
le register_widget
la fonction appellera le pu_facebook_widget
classe. Dans le constructeur, nous pouvons créer le widget en passant des arguments à la WP_Widget
constructeur.
/ ** * Créez la classe de widgets et étendez-la à partir du WP_Widget * / class. Pu_facebook_widget étend WP_Widget / ** * Enregistrez le widget auprès de WordPress. * / public function __construct () parent :: __ construct ('pu_facebook_widget', // ID de base 'Facebook Like Box', // tableau de noms ('classname' => 'pu_facebook_widget', 'description' => __ ('A widget qui affiche un facebook comme boîte de votre page facebook. ',' framework '))); // constructeur de fin
La fonction de widget est appelée pour générer le widget dans la barre latérale. C’est là que nous devons collecter les données saisies par l’utilisateur sur le tableau de bord et afficher le widget sur le site Web..
Utilisez la fonction suivante pour afficher votre Facebook like.
/ ** * Affichage frontal du widget. * * @see WP_Widget :: widget () * * @param array $ args Arguments du widget. * @param array $ instance Valeurs enregistrées de la base de données. * / widget de fonction publique ($ args, $ instance) extract ($ args); / * Nos variables à partir des paramètres du widget. * / $ this-> widget_title = apply_filters ('widget_title', $ instance ['title']); $ this-> facebook_id = $ instance ['app_id']; $ this-> facebook_username = $ instance ['page_name']; $ this-> facebook_width = $ instance ['width']; $ this-> facebook_show_faces = ($ instance ['show_faces'] == "1"? "true": "false"); $ this-> facebook_stream = ($ instance ['show_stream'] == "1"? "true": "false"); $ this-> facebook_header = ($ instance ['show_header'] == "1"? "true": "false"); add_action ('wp_footer', tableau (& $ this, 'add_js')); / * Affiche le titre du widget s'il y en a un qui a été saisi (avant et après défini par les thèmes). * / if ($ this-> widget_title) echo $ this-> widget_title; / * Comme Box * /?>Vous avez peut-être remarqué que nous ajoutons une action à la
wp_footer
exécuter la fonctionadd_js
. C’est là que vous devrez ajouter le code JavaScript de Facebook pour que la boîte de dialogue fonctionne correctement./ ** * Ajouter des javascripts Facebook * / fonction publique add_js () echo ' ';Fonction de mise à jour
La fonction de mise à jour est utilisée pour mettre à jour la base de données WordPress lorsque le formulaire d'administration du widget est soumis..
C'est là que vous devrez placer toute validation nécessaire sur les valeurs du formulaire. Cela prend 2 paramètres, un tableau de valeurs envoyées à sauvegarder et un tableau de valeurs actuellement stockées. Le retour de cette fonction sera les nouvelles valeurs stockées dans la base de données.
/ ** * Désinfecte les valeurs de formulaire du widget lors de leur enregistrement. * * @see WP_Widget :: update () * * @param array $ new_instance Valeurs qui viennent d'être envoyées pour être sauvegardées. * @param array $ old_instance Valeurs précédemment enregistrées de la base de données. * * @return array Valeurs de sécurité mises à jour à enregistrer. * / function update ($ new_instance, $ old_instance) $ instance = $ old_instance; / * Efface les balises pour le titre et le nom afin de supprimer HTML (important pour les saisies de texte). * / $ instance ['title'] = strip_tags ($ new_instance ['title']); $ instance ['app_id'] = strip_tags ($ new_instance ['app_id']); $ instance ['nom_page'] = strip_tags ($ new_instance ['nom_page']); $ instance ['width'] = strip_tags ($ new_instance ['width']); $ instance ['show_faces'] = (bool) $ new_instance ['show_faces']; $ instance ['show_stream'] = (bool) $ new_instance ['show_stream']; $ instance ['show_header'] = (bool) $ new_instance ['show_header']; return $ instance;Fonction de forme
La fonction de formulaire est utilisée pour créer le formulaire sur le tableau de bord du widget. Cela devra être pré-rempli avec les valeurs actuelles dans la base de données et permettre à l'utilisateur de changer facilement les valeurs pour changer le comportement du widget.
/ ** * Crée le formulaire pour le widget admin * * @ @ WP_Widget :: form () * * @param array $ instance Valeurs précédemment enregistrées de la base de données. * / function form ($ instance) / * Configure certains paramètres de widget par défaut. * / $ defaults = array ('title' => $ this-> widget_title, 'app_id' => $ this-> facebook_id, 'page_name' => $ this-> facebook_username, 'width' => $ this-> facebook_width , 'show_faces' => $ this-> facebook_show_faces, 'show_stream' => $ this-> facebook_stream, 'show_header' => $ this-> facebook_header); $ instance = wp_parse_args ((tableau) $ instance, $ par défaut); ?>
/>
/>
/>
Vous n'avez pas besoin d'ajouter de bouton d'envoi, car WordPress l'ajoutera automatiquement à votre place..
Télécharger
C'est tout ce dont vous avez besoin pour créer un plugin WordPress qui crée un widget pour afficher votre page Facebook similaire. Il ne reste plus qu'à installer le plugin, l'activer, ajouter le widget à une barre latérale et remplir le formulaire avec les détails de votre page..
Vous pouvez télécharger ce plugin à partir de WordPress.org: Télécharger le plugin Facebook Like Box