كيفية توليد زر مشاركة رابط facebook

يمكنك الإستعانة بالكود التالي مع تغيير ما يلزم تغييره لمطابقة المطلوب. في المثال التالي نستخدم facebook sdk لتوليد زر المشاركة مع القليل من HTML وكما يلي

<!-- body ضع هذا الكود بعد فتح الوسم -->
…
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0" nonce="8IZbfAk3"></script>
…
<!--  ثم ضع الكود التالي في المكان المناسب لك والذي يمثل زر المشاركة وغير إسمه الحالي الى أي إسم تريد وكذلك تضع رابط الفيس بوك للصفحة او الحساب الذي يراد مشاركته وفي المثال لدينا الرابط هو 
myLink.com
حيث تحتاج تغييره في كل من
data-href
href
مع الحفاظ على نفس الهيكلية
-->

<div class="fb-share-button" data-href="https://Mylink.com" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2FMylink.com%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">مشاركة</a></div>
…
	

بالنسبة للإيميل تستطيع إستخدام الكود التالي بالخاصية mailto ونترك لك عمل styling للزر من خلال css

...
<a href="mailto:ضع أيميلك هنا"> Email </a>
...
	

من أسهل الطرق لفعل ذلك هي من خلال موقع Facebook الرسمي من هنا.

سوف يقوم الموقع بتوليد زر المشاركة لك ولكن يحتاج منك فقط بعض المدخلات كالاتي:

• الرابط Facebook الذي تريد مشاركتة
• حجم زر المشاركة
• أختيار بين أحدي هذه الاشكال
  • Button count
  • Box count
  • Button

ثم أضغط على زر Get Code

سوف يظهر لك نافذة بها اكواد مثل هذه

<!-- هذا خو كود الزر -->
<div id="fb-root"></div>

<!-- ضع هذا الكود قبل نهاية وسم ال Body -->
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v15.0"
nonce="JpDAP8iu"></script>

والكود الاخر

<div class="fb-share-button"
	data-href="https://developers.facebook.com/docs/plugins/" <!-- هذا هو اللينك المراد مشاركتة -->
	data-layout="button_count" data-size="large"><a target="_blank"	href="https://www.facebook.com/sharer/sharer.phpu=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a>
</div>

قم بنسخ الكود و وضعه في موقعك.

بالنسبة لزر مشاركة الأيميل سوف نستخدم الوسم a كما في المثال التالي

<a href="mailto:email@example.com1, email@example.com2 ?subject=Mail from our Website&body=Some body text here">Send the mail</a>

هناك بعض الخصائص المفيدة مثل :

• بعد كلمة mailto: يمكنك وضع أكثر من أيميل ولكن نفصل بينهم ب (,) كما في المثال السابق
• يمكنك تحديد موضوع الإيميل من خلال الاستعلام subject كما في المثال
• يمكنك تحديد  محتوي الإيميل من خلال الاستعلامbody كما في المثال