Πώς να ενσωματώσετε το Facebook Open Graph με το WordPress

Το πρωτόκολλο Facebook Open Graph σας επιτρέπει να μοιραστείτε το περιεχόμενο του ιστολογίου όχι μόνο με τους αναγνώστες σας, αλλά και με τους φίλους του Facebook. Το καλύτερο μέρος είναι - κάθε φορά που κάποιος μου άρεσε το περιεχόμενό σας, θα δημοσιευτεί στο προφίλ του στο Facebook. Αλλά αυτό δεν είναι όλα, το Open Graph σάς επιτρέπει να εξερευνήσετε πιο ενδιαφέροντες τρόπους αλληλεπίδρασης και δέσμευσης με τους αναγνώστες σας. Τελικά - εάν αυτό γίνει σωστά - δημιουργεί την επωνυμία σας και αυξάνει την επισκεψιμότητα του ιστότοπού σας.

Στη σημερινή θέση, θα εξετάσουμε πώς να ενσωματώσετε το Facebook Open Graph με ένα αυτοματοποιημένο WordPress σε έναν λεπτομερή οδηγό βήμα προς βήμα. Θα χρειαστεί να επεξεργαστείτε τα υπάρχοντα θέματα WordPress και να δημιουργήσετε μια εφαρμογή Facebook (αν δεν έχετε).

Ετοιμος? Ας πυροδοτήσουμε το πρόγραμμα περιήγησης και τον αγαπημένο σας επεξεργαστή κώδικα. Πλήρης οδηγός μετά από άλμα.

Βήμα 1. Δημιουργήστε μια εφαρμογή Facebook

Θα χρειαστούμε ένα Αναγνωριστικό εφαρμογής και για να το πάρετε αυτό, θα πρέπει να δημιουργήσετε μια εφαρμογή Facebook. Αν έχετε ήδη ένα, προχωρήστε στο βήμα 2.

Η δημιουργία μιας εφαρμογής είναι εύκολη, εδώ είναι αυτό που κάνετε:

1. Συνδεθείτε στο Facebook, μεταβείτε στη σελίδα του Προγραμματιστή.
2. Κάντε κλικ "Ρυθμίστε μια νέα εφαρμογή"στην επάνω δεξιά γωνία.
3. Δώστε ένα όνομα στη νέα σας εφαρμογή, συμφωνώ σε όρους Facebook, χτυπήστε Δημιουργία εφαρμογής.
4. Παω σε Ιστοσελίδα καρτέλα, γεμίστε Διεύθυνση URL ιστότοπου και Τομέας ιστότοπου.
5. Σημειώστε την τιμή του Αναγνωριστικό εφαρμογής κάπου και πατήστε "Αποθήκευσε τις αλλαγές"κουμπί.

Αυτό είναι όλο! Μπορείτε πάντα να επιστρέψετε αργότερα για να γεμίσετε τις υπόλοιπες πληροφορίες.

Βήμα 2. Αντικατάσταση Ετικέτα

Ανοίξτε το αρχείο κεφαλίδας του θέματος (header.php) στον αγαπημένο σας συντάκτη. Πάντα να κρατάτε ένα αντίγραφο ασφαλείας μόνο σε περίπτωση που κάτι πάει στραβά.

Αναζητήστε αυτήν την ακόλουθη γραμμή κώδικα ή αυτή που αρχίζει με >

Αντικαταστήστε το με:

Κρατήστε το header.php ανοιχτό, θα το χρειαστούμε για το 3ο βήμα.

Βήμα 3. Εισαγάγετε OG ετικέτες

Επικολλήστε τον ακόλουθο κώδικα αμέσως μετά ετικέτα ή πριν ετικέτα.

       "/>          

Ακολουθούν μερικές από τις αξίες που θα χρειαστεί να αλλάξετε:

• Γραμμή 3: Αντικατάσταση your_fb_app_id με το Αναγνωριστικό εφαρμογής από το Βήμα 1.
• Γραμμή 4: Μπορείτε να πάρετε your_fb_admin_id στη σελίδα Facebook Insights, (Περισσότερες πληροφορίες). Κάνε κλικ στο "Insight για τον ιστότοπό σας"πράσινο κουμπί, αρπάξτε ολόκληρη τη σειρά κώδικα και αντικαταστήστε τη Γραμμή 4.
• Γραμμή 12: Αυτή η γραμμή καθορίζει την εικόνα που αντιπροσωπεύει την ανάρτησή σας. Αν το θέμα σας υποστηρίζει το WordPress Post Thumbnails, θα πρέπει να λειτουργεί καλά. Αλλά αν δεν το κάνει, θα αποτύχει με χαρά χωρίς μια εικόνα. Ελέγξτε το βήμα 3a για εναλλακτικό τρόπο αντιμετώπισης.
• Γραμμή 19: Αντικατάσταση logo.jpg με μια διεύθυνση URL στο λογότυπο του ιστολογίου σας. Θα εμφανίζεται όταν μια μη σελίδα προβολής στο ιστολόγιό σας μοιράζεται στο Facebook.

Βήμα 3α - Όταν το "wp_get_attachment_thumb_url" αποτύχει

Πότε wp_get_attachment_thumb_url () απέτυχε να δουλέψει, πιθανότατα θα πάτε σε μια ιδιότητα περιεχομένου χωρίς αξία, όπως αυτό που φαίνεται παρακάτω:

Μια απλή λύση θα είναι να αντικαταστήσετε τη Γραμμή 12 με τον ακόλουθο κώδικα:

Στη συνέχεια ανοίξτε functions.php και εισαγάγετε τον ακόλουθο κώδικα:

λειτουργία catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ αντιστοιχιών). $ first_img = $ ταιριάζει [1] [0]; αν (κενό ($ first_img)) // Ορίζει μια προεπιλεγμένη εικόνα $ first_img = "/images/default.jpg";  επιστροφή $ first_img; 

Αυτός ο κωδικός αντικατάστασης επιχειρεί να χρησιμοποιήσει μια κλήση λειτουργίας catch_that_image () να αρπάξει και να εξάγει τη διεύθυνση URL της πρώτης εικόνας που έρχεται να συναντήσει. Αν αντικαθιστάτε τη γραμμή 10 με τη διεύθυνση URL σε μια προεπιλεγμένη εικόνα, εάν η λειτουργία δεν βρει την πρώτη της εικόνα.

Βήμα 4. Εισαγάγετε το Javascript SDK του Facebook

Το παρακάτω Javascript σάς δίνει πρόσβαση σε όλες τις λειτουργίες του API και των διαλόγων Graph. Σας επιτρέπει επίσης να ενσωματώσετε τα κοινωνικά plugins του Facebook όπως το κουμπί Like, Facepile, Recommendations, κ.λπ. με ευκολία.

Τοποθετήστε το header.php, αμέσως μετά

Αντικαθιστώ your_fb_app_id στη γραμμή 4 με Αναγνωριστικό εφαρμογής από το βήμα 1 νωρίτερα.

Βήμα 5. Ας δοκιμάσουμε!

Έχουμε ολοκληρώσει την ενσωμάτωση του Facebook Open Graph στο blog του WordPress. Ας δώσουμε μια δοκιμή για να βεβαιωθείτε ότι έχουμε κάνει τα πράγματα σωστά.

Δοκιμή # 1 - Προβολή πηγαίου κώδικα

Ρίξτε μια ματιά στους πηγαίους κώδικες μιας από τις δημοσιεύσεις blog, θα πρέπει να έχετε κάτι σαν αυτό:

Ελέγξτε τις ιδιότητες και τις τιμές τους, βεβαιωθείτε ότι είναι σωστές.

Δοκιμή # 2 - Εγκαταστήστε ένα Like Box

Αν δεν έχετε εγκαταστήσει ένα κουμπί όπως το κουμπί Facebook, τότε ίσως είναι καιρός να το πάρετε. Τοποθετήστε τον παρακάτω κώδικα οπουδήποτε (κατά προτίμηση πριν από το περιεχόμενο ή μετά το περιεχόμενο) μέσα single.php:

Στη συνέχεια, πάρτε ένα φίλο Σαν το. Θα πρέπει να δείτε κάτι παρόμοιο που εμφανίζεται στο προφίλ του στο Facebook:

Επιπλέον: WordPress Plugin

Αν κατά κάποιο τρόπο δεν εγκαταστήσατε τους κώδικες ή χρειάζεται να γίνει αυτό γρήγορα και εύκολα - υπάρχει ένα WordPress plugin για αυτό.

Το Facebook Open Graph Meta στο WordPress είναι ένα WordPress plugin που προσθέτει τα δεδομένα meta του Facebook για να αποφύγει κανένα πρόβλημα με μικρογραφίες, λάθος θέμα τίτλου, λάθος θέμα περιγραφής, κ.λπ..