share button

share-button

مكون ويب لمشاركة صفحات الويب باستخدام خيارات مشاركة نظام التشغيل الأصلي.

العرض التوضيحي | مزيد من القراءة

أمثلة

مثال الاستخدام العام:

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
</ share-button >

مثال باستخدام روابط الاحتياطية:

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
  < a
    href =" https://twitter.com/intent/tweet/?url=https://website.com&amp;text=Example&amp;via=DavidDarnes "
  >
    Post to Twitter
  </ a >
  < a href =" https://facebook.com/sharer/sharer.php?u=https://website.com " >
    Post to Facebook
  </ a >
  < a
    href =" https://www.linkedin.com/shareArticle?url=https://website.com&amp;title=Example&amp;source=Title&amp;mini=true "
  >
    Post to LinkedIn
  </ a >
  <!-- Find more sharing links here https://codepen.io/daviddarnes/pen/GRJgoxy -->
</ share-button >
< style >
  share-button:not(:defined) button,
  share-button:defined a {
    display: none;
  }
  share-button:not(:defined) a + a {
    margin-inline-start: 1ch;
  }
</ style >

مثال باستخدام إدخال readonly :

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
  < label >
    Share this page
    < input
      type =" url "
      readonly
      value =" https://daviddarnes.github.io/share-button/demo.html "
      onclick =" this.select() "
    />
  </ label >
</ share-button >
< style >
  share-button:not(:defined) button,
  share-button:defined label {
    display: none;
  }
</ style > 

سمات

يتيح لك مكون الويب هذا:

• استخدم عنصر button قياسي لإظهار خيارات مشاركة نظام التشغيل الأصلي لمشاركة صفحة الويب الحالية

تثبيت

لديك بعض الخيارات (اختر واحدة من هذه):

1. التثبيت عبر NPM: npm install @daviddarnes/share-button
2. قم بتنزيل المصدر يدويًا من Github إلى مشروعك.
3. تخطي هذه الخطوة واستخدم البرنامج النصي مباشرة عبر CDN الطرف الثالث (لا ينصح به لاستخدام الإنتاج)

الاستخدام

تأكد من تضمين <script> في مشروعك (اختر واحدة من هذه):

 <!-- Host yourself -->
< script type =" module " src =" share-button.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/share-button.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script > 

ائتمان

بفضل الأشخاص التاليين:

• Zach Leatherman لإلهام قالب ريبو مكون الويب هذا