דילוג לתוכן
נאור בן שושן

כפתור שיתוף שמעתיק כתובת מקוצרת

מה במאמר?

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

במדריך הבא נלמד איך להוסיף כפתור כזה – שמשתלב אוטומטית יחד עם כפתורי השיתוף הקיימים של Elementor. הכפתור יעתיק את הקישור במבנה ?p=1234 (כלומר קישור קצר מבוסס מזהה הפוסט), ויציג אייקון אישור מרחף ונעלם לאחר ההעתקה.

למה להשתמש בקישור מקוצר?

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

קוד JavaScript להטמעה

העתיקו את הקוד הבא והטמיעו אותו דרך אלמנטור > ניהול קודים (או באנגלית Elementor -> Code Manager):

				
					 <script>
  document.addEventListener("DOMContentLoaded", function () {
  const id = document.body.className.match(/postid-(\d+)/)?.[1];
  if (!id) return;
  const url = `${location.origin}?p=${id}`;
  const grid = document.querySelector(".elementor-widget-share-buttons .elementor-grid");
  if (!grid) return;

  const item = document.createElement("div");
  item.className = "elementor-grid-item";

  const btn = document.createElement("div");
  btn.className = "elementor-share-btn elementor-share-btn_copy";
  btn.setAttribute("role", "button");
  btn.setAttribute("tabindex", "0");
  btn.setAttribute("aria-label", "העתקת קישור מקוצר");
  btn.setAttribute("title", "העתקת קישור מקוצר");
  btn.style.background = "#000";

  btn.innerHTML = `
    <span class="elementor-share-btn__icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
        <path fill="currentColor" d="M3.9 12a4.1 4.1 0 0 1 4.1-4.1h2v1.5H8a2.6 2.6 0 0 0 0 5.2h2v1.5H8a4.1 4.1 0 0 1-4.1-4.1Zm4.6.75h7v-1.5h-7Zm6.5-5.25h1.5a4.1 4.1 0 0 1 0 8.2h-1.5v-1.5h1.5a2.6 2.6 0 1 0 0-5.2h-1.5Z"/>
      </svg>
    </span>
  `;
  item.appendChild(btn);
  grid.appendChild(item);

  const fb = document.createElement("div");
  fb.style.cssText = `
    display:none;position:fixed;z-index:9999;
    transition:transform 1s ease,opacity 1s ease;
    pointer-events:none
  `;
  fb.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="currentColor" d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20m5.457-12.543L11 15.914 6.793 11.707l1.414-1.414L11 13.086l5.043-5.043z"/>
    </svg>
  `;
  document.body.appendChild(fb);

  btn.addEventListener("click", () => {
    navigator.clipboard.writeText(url).then(() => {
      const r = btn.getBoundingClientRect();
      fb.style.left = `${r.left + scrollX}px`;
      fb.style.top = `${r.top + scrollY - 30}px`;
      fb.style.display = "block";
      fb.style.opacity = "1";
      fb.style.transform = "translateY(0)";
      requestAnimationFrame(() => {
        fb.style.transform = "translateY(-30px)";
        fb.style.opacity = "0";
      });
      setTimeout(() => (fb.style.display = "none"), 1000);
    });
  });
});

    </script>
				
			

סיכום

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

שתפו את המאמר:

הרעיונות והתגובות שלכם

אין תגובות עדיין...

הוסיפו תגובה

שמך המלא *
תוכן התגובה