תיבה דביקה לאתרים בוורדפרס

נכתב בתאריך 22/08/2017

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

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

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

לצורך הטמעת התיבות נצטרך "לגעת" ב-3 קבצים בתבנית שלנו, וליצור קובץ php חדש בספרייה הראשית באתר שלנו.

הקבצים שניגע בהם הם:

footer.php

style.css (של התבנית הראשית או של תבנית הבית)

קובץ ה-js המרכזי בתבנית שלכם

בנוסף, ניצור את הקובץ contact_handler.php במיקום הבא (או בכל מיקום אחר שנעדיף):

my-site-address.co.il/general_assets/ajax_handler_pages/contact_handler.php

 

חשוב:

לצורך הוספת הפייסבוק, אני מסתמך על כך שאתם כבר משתמשים ב-API של Facebook עבור HTML באתר שלכם.

 

 

(1) הוסיפו את החלק הבא לקובץ ה-footer.php בתבנית שלכם

זהו ה-html של הרכיבים הללו. והוא מובא כאן בנפרד לכל חלק. השתדלו להוסיף שורות אלו בתחתית קובץ זה. גם הדבקה של קוד זה בקובץ ה-header.php תעבוד, אך מכמה סיבות חשובות (SEO לדוגמא), עדיף לעשות זאת בקובץ ה-footer.php בתבנית הוורדפרס. הוסיפו קוד זה אחד אחרי השני או בנפרד- אם תרצו להשתמש רק באחד מהרכיבים או בשניהם.

html עבור תיבת ה-facebook

שנו את התווים בצהוב לקישור לעמוד הפייסבוק שלכם, והוסיפו תיאור לחברה שלכם במקום המשפט הצבוע בכחול. משפט זה יוצג במקרה בו הקישור לא יהיה תקין בלבד. במידה והתבנית שלכם טוענת את ספריית "בוטסטראפ" (Bootstrap), השאירו גם את המאפיינים בירוק (אחראים לכך שהתיבה לא תוצג במכשירים ניידים). הקישור אמנם מפנה לגרסא 3 של Bootstrap, אך גם Bootstrap4 כוללת את המאפיינים visible-md visible-lg השימושיים.

<div id="facebox" class="visible-md visible-lg">
<a href="#" title="לעמוד הפייסבוק" class="of">facebook
</a>
<div class="likbox">
<div class="fb-page" data-href="https://www.facebook.com/webopsIL" data-width="300" data-height="350"
data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/webopsIL">
<a href="https://www.facebook.com/webopsIL">‏
בניית אתרים לעסקים- אבירם אדר
</a>
</blockquote>
</div>
</div>
</div>
</div>

html עבור תיבת יצירת הקשר

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

<div id="fastMsgBox">
<div class="fastMsgTitle">
<span>
השארת הודעה
</span>
</div>
<div class="fastMsgBoxText">
השאירו פרטים ונחזור בהקדם
</div>
<form class="form" id="contactFormStickMsg" novalidate="novalidate">
<div class="form-group">
<label class="sr-only">
השם שלך
</label>
<input type="text" class="form-control" id="contactFormStickMsgName" name="contactFormStickMsgName"
placeholder="השם שלך">
</div>
<div class="form-group">
<label class="sr-only">
טלפון לחזרה
</label>
<input type="tel" class="form-control" id="contactFormStickMsgPhone"
name="contactFormStickMsgPhone"
placeholder="מספר טלפון">
</div>
<button type="button" class="btn btn-primary btn-lg" id="contactFormStickMsgSend">
שליחה
</button>
</form>
</div>

(2) הוסיפו את העיצובים הבאים לקובץ העיצוב (CSS) שלכם

הוסיפו את שורות העיצוב הבאות בתחתית קובץ ה-style.css בתבנית שלכם, או בתבנית הבת.

אם אתם משתמשים בתבנית אשר עשוייה להתעדכן, ודאו כי המאפיינים הללו לא "יידרסו".

css  עבור תיבת ה-facebook

החליפו את החלק הצבוע בירוק לרקע ולגובה בו תרצו שתיבת הפייסבוק תופיע באתר.

/* Stick Facebook Style */
#facebox {
position: fixed;
top: 45%;
z-index: 100;
width: 299px;
background: #fff;
left: -300px;
transition: .7s;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
}
#facebox a.of {
font-size: 33px !important;
border: 0;
color: #fff;
margin: 0;
cursor: pointer;
text-transform: lowercase;
transform: rotate(90deg);
background: #3B5998;
position: absolute;
right: -140px;
text-align: center;
top: 92px;
width: 240px;
border-bottom: 1px solid white;
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.faceboxopen {
left: 0 !important;
}

css עבור תיבת יצירת הקשר

החליפו את הערכים בירוק בכל צבע שתרצו בהתאם לעיצוב שלכם.

/* Stick Message Style */
#fastMsgBox {
position: fixed;
bottom: -250px;
height: 250px;
width: 300px;
left: 5%;
text-align: center;
background-color: rgba(228, 226, 226, 0.9);
transition: .3s all;
}
.fastMsgTitle {
position: relative;
top: -45px;
text-align: center;
color: #fff;
background-color: #444;
margin: 10px 0;
font-size: 24px;
cursor: pointer;
padding: 5px 0;
}
.fastMsgBoxText {
margin-bottom: 0;
margin-top: -50px;
}
#fastMsgBox input {
width: 100%;
padding: 8px;
margin-bottom: 4px;
}
#fastMsgBox button {
background-color: #444;
}
@media (max-width: 767px) {
#fastMsgBox {
width: 75%;
left: 50%;
margin-left: -37.5%;
}
}
.stickyout {
bottom: 0 !important;
}

 

(3) הוסיפו את מקטע הקוד הבא לקובץ ה-JS המרכזי שלכם

js עבור תיבת ה-facebook

לא נדרש לגעת בדבר, פשוט הדביקו את הקוד הבא (jQuery) כמו שהוא. במידה וביצעתם את כל השלבים הקודמים בצורה תקינה, כאן סיימתם עם ההטמעה של תיבת הפייסבוק באתר שלכם. העדיפו להדביק את הקובץ באחד מקבצי ה-js המרכזיים בתבנית שלכם (לדוגמא "main.js" וכו'…).

חשוב: מכיוון ונעשה פה שימוש ב"סלקטורים" (selectors) עבור אלמנטים ב-html של האתר שלנו, ודאו כי הקוד נמצא בתוך:

$(document).ready(function() {

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

var $facebox;
$facebox = $("#facebox");
$("#facebox a.of").mouseenter(function() {
if (!$facebox.hasClass('faceboxopen')) {
$facebox.addClass('faceboxopen');
}
})
$("#facebox a.of").focusin(function() {
if (!$facebox.hasClass('faceboxopen')) {
$facebox.addClass('faceboxopen');
}
})
$facebox.mouseleave(function() {
if ($facebox.hasClass('faceboxopen')) {
$facebox.removeClass('faceboxopen');
}
})
$facebox.focusout(function() {
if ($facebox.hasClass('faceboxopen')) {
$facebox.removeClass('faceboxopen');
}
})

 

 

js עבור תיבת יצירת הקשר

החליפו את החלק בצהוב לכתובת האתר שלכם.

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

החלק בכחול הוא הנתיב בו יצרתם את קובץ ה-php שאמור לקלוט את הפנייה, ודאו כי הוא תקין.

הערה לאנשי FrontEnd: ישנן מספר דרכים וצורות לכתוב קוד בכלל, וקוד JS בפרט. מהירות יותר או פחות ו/או ברורות יותר או פחות. לא אכנס כאן לקוד JS, אם כי בכל קוד JS (בכל ספרייה) שאני כותב אשתדל תמיד "לגעת" כמה שפחות ב-DOM, ולהקצות משתנים במקום מרכזי, במעלה הקובץ. כתיבת הקוד ה-JS המובא פה אינה Strict, והיא ארוכה מעט יותר ממה שאפשרי היה לעשות.

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

var $fastMsgTitle, $fastMsgBox;
$fastMsgBox = $("#fastMsgBox");
$fastMsgTitle = $(".fastMsgTitle").click(function() {
$fastMsgBox.toggleClass('stickyout');
})
var siteURL, redirectPageUrl;
//(1) Change- Our site's address
siteURL = 'https://webops.co.il';
//(2) Change- Page to redirect visitor after success
redirectPageUrl = 'https://webops.co.il/thank-you/'
var $contactFormStickMsgName, $contactFormStickMsgPhone, $contactFormStickMsgSend;
$contactFormStickMsgName = $("#contactFormStickMsgName");
$contactFormStickMsgPhone = $("#contactFormStickMsgPhone");
$contactFormStickMsgSend = $("#contactFormStickMsgSend");
$contactFormStickMsgSend.click(function() {
if ($contactFormStickMsgName.val() != '' && $contactFormStickMsgPhone.val() != '') {
$.ajax({
//(1)
url: siteURL + '/general_assets/ajax_handler_pages/contact_handler.php',
type: 'POST',
data: {
contactName: $contactFormStickMsgName.val(),
contactPhone: $contactFormStickMsgPhone.val(),
pageUrl: window.location.href
},
success: function() {
//(2)
window.location.replace(redirectPageUrl);
}
});
} else {
alert('ודא/י שמילאת את כל הפרטים ובצורה תקינה, על מנת שנוכל לקבל את הפניה');
}
});

(4) הוסיפו את קוד ה-php הבא בקובץ בשם ובמיקום הבא באתר שלכם:

חלק זה רלוונטי עבור תיבת יצירת הקשר בלבד!

הקוד הבא אחראי על קבלת השדות שנשלחו ב-Ajax בחלק (3) ושליחתם במייל. הדביקו אותו במלואו בקובץ שיצרתם במיקום:

my-site-address.co.il/general_assets/ajax_handler_pages/contact_handler.php

הוסיפו את כל החלקים הללו במלואם בקובץ זה.

 

הקצאת השדות שנשלחו ב-Ajax למשתני php.

$contactName = addslashes ($_POST["contactName"]);
$contactPhone = addslashes ($_POST["contactPhone"]);
$contactEmail = addslashes ($_POST["contactEmail"]);
$pageUrl = addslashes ($_POST["pageUrl"]);

הערה: הפונקציה addslashes אחראית על הוספת תווי Slash ("\") לפני תויים העשויים לשמש למתקפות שונות, דוגמת sql injection. במקרה זה השדות אמנם לא נשלחים ל-DB (מסד נתונים, MySql במקרה שלנו). אך זה תמיד הרגל טוב לתכנת בצורה בטוחה במרבית המקרים.

 

שנו את החלק בצהוב לכתובת האימייל אליה תרצו שפרטי הפנייה יישלחו אליכם.

$emailAdmin = 'aviramadar@gmail.com';
$subjectAdmin = 'Someone is looking for you!';
$messageAdmin = $contactName . ', ' . $contactPhone . ', wants you to call him';

 

שנו את החלק בצהוב לאימייל של האתר שלכם (במרבית חברות לאירוח האתרים המייל יישלחו אליכם גם אם אין ברשותכם מייל אמיתי). זהו האימייל היוצא של האתר שלכם.

$headers = "From: " . "contact@webops.co.il" . "\r\n";
$headers .= "Reply-To: ". "contact@webops.co.il" . "\r\n";

 

שימוש בפונקציית mail של php אשר מופעלת בשרת האחסון עליו יושב האתר שלכם.

mail($emailAdmin, $subjectAdmin, $messageAdmin, $headers);



שיתוף עמוד זה בפייסבוק

הוספת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

*
*