יום שישי, 20 בספטמבר 2013

Blogger - הוספת תיבת התגובות של פייסבוק לבלוג


תגובה מהפייסבוק לבלוג שלכם יכולה לשמש כדרך טובה
להפוך את האתר שלכם יותר מעניין ולעודד את הקוראים
להגיב אם הם כבר מחוברים לפייסבוק. הוא משמש גם
כמקור של תנועת חברים באמצעות העמוד של המגיב.



לתשומת לבכם: עקב שינוי ממשק יצירת האפליקציה של פייסבוק, מדריך זה
נכתב מחדש - כאן.


יש לציין כי לתגובה בפייסבוק אין ערך של SEO במדד גוגל.
לתגובות שנתקבלו בתיבת התגובות הקבועה בבלוג שלכם ישנו היתרון שמילות
מפתח המופיעות בתגובות מביאה יותר תנועה במנוע חיפוש.

כמו כן, תוכלו לקבל הודעה על כל תגובה הנרשמת בבלוג שלכם.

להלן השלבים להוספת תיבת התגובות לבלוג:

1. יצירת אפליקציה חדשה
התחברו לפייסבוק בפרופיל הפרטי > לחצו על אייקון ההגדרות (גלגל שיניים) >
בחרו "צור יישום".


במידה ולא מופיעה לכם אפשרות יצירת יישום בהגדרות היכנסו ישירות לכאן.
בדף המפתחים בפייסבוק, לחצו על Apps אשר בתפריט. במידה ויופיע מסך
רישום, עשו זאת והמשיכו לשלב הבא.


במסך שייפתח, לחצו על כפתור Create New App ליצירת אפליקציה חדשה.


הזינו את שם היישום  (‏‎‎App Name), ‏App Namespace (חובה לרשום לפחות
7 תווים ללא ספרות) ובחרו קטגוריה. 
אם לא קיבלתם אישור לשם שבחרתם, כנראה שמישהו כבר משתמש בשם זה -
בחרו שם אחר.
לחצו "המשך".


הזינו את קוד האבטחה ולחצו "המשך".


בעמוד הבא, הזינו את שם הדומיין שלכם (אם אתם משתמשים בתחום מותאם אישית)
או רק blogspot.com (אם אתם משתמשים בתת תחום blogspot) במקום המיועד
לתחום אפליקציות.
אם הסיומת שלכם היא co.il, רשמו אותה במקום com.

עבור אתר האינטרנט של אפליקציה, הזינו את כתובת האתר שלכם בבלוג.
(לדוגמא: Http://www.xyz.com/ או http://xyz.blogspot.com/).
שימו לב שזה מתחיל עם http:// ומסתיים ב- / כפי שמוצג בתמונה.

לחצו "שמירת שינויים".


לאחר שסיימתם ליצור את האפליקציה, העתיקו את מספר ה- ID המופיע בראש
העמוד ושמרו במקום כלשהו לשימוש מאוחר יותר.



2. הוספת הקוד לתבנית הבלוג

היכנסו לתפריט מרכז השליטה של הבלוג ולחצו על "תבנית".


בצעו גיבוי לתבנית הקיימת, אליה תוכלו לחזור במידה ותהיה בעיה כלשהי.
לחצו על "ערוך HTML".


במערכת בלוגר הישנה הייתה אפשרות ללחוץ על "הרחב תבניות יישומון" -
פעולה אותה חייבים לבצע על מנת להטמיע את הקוד במקום הנכון.
אפשרות זו אינה קיימת במערכת בלוגר החדשה ולכן יהיה עליכם לעשות
זאת בעצמכם (לא מצאתי דרך אחרת).
בעמודה השמאלית מופיעים מספרים עוקבים. אם תגללו את הדף כלפי מטה
יופיעו במקומות מסוימים חיצים (בצבע שחור). לחצו על כל חץ (עד סוף
התבנית) על מנת לפתוח את השורות המסתתרות.


אתרו בתבנית את השורה הבאה:

<head>  
          
(לאיתור מהיר, הקישו קונטרול F כאשר הסמן בתוך התבנית, ובשורת החיפוש
שתופיע, הדביקו את התווים. לחצו אנטר והשורה תופיע מובלטת בצבע צהוב).

העתיקו את הקוד הבא והדביקו שורה אחת מתחת.

------------------------------------------------------------------------------------------------------
<meta content='YOUR_FACEBOOK_APPLICATION_ID' property='fb:app_id'/>
------------------------------------------------------------------------------------------------------

החליפו את הרשום בצבע צהוב עם מספר ה- ID של האפליקציה שיצרתם.


אתרו את השורה:

<data:post.body/>

שורה זו עלולה להופיע מספר פעמים (3 פעמים ברוב המקרים בהם נתקלתי).
בשורה אחת מתחת לכל אחד מהם הדביקו את הקוד הבא:
------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>
(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>
---------------------------------------------------------------------------------------------------

אם שורה זו אינה קיימת בתבנית, נסו את אחד מהבאים: 

<div class='post-footer-line post-footer-line-1'>

או את השורה:


<div class='post-footer-line post-footer-line-3'>

או את השורה:





<p class='post-footer-line post-footer-line-3'>



- ניתן להתאים את רוחב התיבה מ- '450' עד '600'.
- לתיבת תגובות בעברית יש לשנות en ל- he ו- US ל- IL.
חשוב: אם כבר התקנתם בבלוג פלאגין כלשהו של פייסבוק (כמו Like ואחרים)
בשפה האנגלית, יש לשנות גם אותם לשפה העברית או להישאר עם הכל
באנגלית.


אתרו בתבנית את השורה הבאה:

    <html


הדביקו את הקוד הבא מיד אחרי (שימו לב שיהיה רווח לפני הקוד ואחריו).
במידה וקוד זה כבר מופיע אצלכם בתבנית, אין צורך להדביקו שוב.
------------------------------------------------------------------------------------------------------

 xmlns:fb="https://www.facebook.com/2008/fbml"
------------------------------------------------------------------------------------------------------


לחצו "שמור תבנית" ויש לכם תיבת תגובות של פייסבוק.


3. הוספת קוד המאפשר קבלת התראה על תגובות 
זהו החלק האחרון והוא לא חובה,  אך מומלץ. הפעלה זו מאפשרת לכם לקבל התראה
בכל פעם שמישהו מגיב בבלוג שלכם. תקבלו את ההודעה הרגילה בפייסבוק ותוכלו
לעבור לבלוג על מנת להשיב. 

היכנסו לכתובת URL זאת (העתיקו והדביקו בשורת כתובת הדפדפן):
https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

לתשומת לבכם, יש לשנות את YOUR_APP_ID עם ה-  מספר App ID שלכם.

בדף שיפתח, לחצו על הגדרות והוסיפו את עצמכם כמנחה.




במידה ואתם רוצים לאשר תגובות לפני פרסום, סמנו כפי שמופיע 
בתמונה (למטה).
הערה: לעיתים תקבלו התראה, אך המערכת הזו אינה יציבה לגמרי.
ניתן לעקוב אחרי התגובות כאן.


האם המדריך עזר לכם? כתבו לי בתגובות ושתפו גם אחרים.

 למאמר בשפה האנגלית מאתר BloggerPlugins.


13 תגובות:

  1. אצלי זה נתקע כשאני מגיעה לסוף שלב 1- אחרי שאני מזינה את בלוגספוט.קום ואת שם הבלוג במקומות המתאימים אני מקבלת הודעת שגיאה:
    Error
    www.blogspot.com must be derived from one of: Site URL, Mobile Site URL, Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.

    השבמחק
    תשובות
    1. הבלוג שלך הוא co.il ולא com

      מחק
  2. תודה רבה לרותי שעזרה לי וליוותה אותי להתקין את התיבה ועוד!! את עושה עבודה מדהימה ועוזרת לכולנו :)))) תמשיכי אלופה!

    השבמחק
  3. שאלה: התבנית שלי היא תבנית מוכנה Arras ואני לא מוצאת לאן להכניס את הקוד כמו שאת אומרת בשלב השני, יש דרך למצוא את זה?

    השבמחק
    תשובות
    1. הדרך שציינתי היא הדרך הקלה ביותר, אך כבר היו מקרים שלא הצלחתי למצוא משהו גם כך. אם לא הולך, נסי שוב בהזדמנות אחרת.

      מחק
  4. מה רק אני מפגרת ולא מצליחה??.

    השבמחק
  5. מסכים לגמרי עם גולדה,
    קראתי המון מדריכים ברשת בשנים האחרונות ...
    לפעמים נראה שהם בכוונה מסבירים לא ברור כדי שתפנה אליהם
    ותבקש שרות בתשלום :)
    את פשוט גדולה !!!

    השבמחק
  6. היי רותי, עשית עבודה מדהימה שאפילו אני הצלחתי להבין מה עושים כאן והוספתי גם את התוסף הזה.. פשוט מדהים חוסך לי המון עבודה .. אם רק הייתי יודע לפני שנה שנתיים שיש כזאת אפשרות.. לא הייתי מדביק ידנית לכל רשומה ודף אפשרות לתגובות.
    יש לי שאלה עניינית ומאוד אודה לך אם תוכלי לעזור לי:
    אם הוספתי ידנית את הפונקציה המדוברת, לפני שהשתמשתי בשיטתך,
    אוכל להעביר את התגובות של המשתמשים ולשמר אותן? או שאצטרך פשוט מחוק ולהיפרד מכולן?

    השבמחק
    תשובות
    1. מניסיון של בלוגריות אחרות שעשו את אותו הדבר - לחלק זה נמחק ולחלק זה נשאר.

      מחק
  7. אוי נפלא.. אולי אוכל להטמיע בבלוג http://gappsmobile.blogspot.co.il/

    השבמחק