جميع روابط المشاركة المخصصة على مواقع التواصل الاجتماعية

سنحاول أن نريكم كيف يتم استخدام خيار المشاركة المخصصة، عبر تخصيص أزرار مشاركة التدوينة في معظم الخدمات الأخرى مواقع التواصل الإجتماعي مع توفير شفرة كل

محتويات المقالة

إنشاء زر مشاركة مخصص

نماذج أزرار المشاركة

المشاركة عبر [البريد الإلكتروني]

المشاركة على موقع [ Blogger ]

المشاركة على موقع [ Facebook ]

المشاركة على موقع [ Twitter ]

المشاركة على موقع [ Pinterest ]

المشاركة على موقع [ Linkedin]

المشاركة على موقع [ Reddit ]

المشاركة على موقع [ Digg ]

المشاركة على موقع [ Stumble Upon ]

المشاركة على موقع [ Buffer ]

المشاركة على موقع [ Delicious ]

المشاركة على موقع []

المشاركة على موقع [ Hacker News ]

المشاركة على موقع [ Tumblr ]

المشاركة على موقع [ Pocket ]

في هذه التدوينة سنحاول أن نريكم كيف يتم استخدام خيار المشاركة المخصصة، عبر تخصيص أزرار مشاركة التدوينة في معظم الخدمات الأخرى مواقع التواصل الإجتماعي مع توفير شفرة كل موقع متداول بكثرة سواء في المحتوى العربي أو الأجنبي...فكما نعلم أن إضافة أداة أزرار المشاركة تختلف في اللون والشكل وما يهمنا هو الموقع المضمن في الأداة ...فتحتاج أحيانا أن تحذف موقع وتستبدله بآخر أو تضيف عليه وهكذا...فهذه التدوينة ستساعدك على ضبط الأمور ولتكن هذه التدوينة عبارة عن مرجع تحتاج له متى أردت إجراء تعديلات من هذا النوع.

إنشاء زر مشاركة مخصص

التطبيق العملي

1. نقوم بوضع الكود الرئيسي والذي يحتوى على شفرة الموقع الإلكتروني وليكن مثلا زر الفايسبوك  وهو كالتالي...
   

    <a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>  </a>
   

   
   
   
2. نقوم الآن بوضع إسم مع الوسم وليكن مثلا إسم الموقع (facebook) أو كلمة (شارك) المحددة باللون   ليصبح كالتالي...
   

    <a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>
    </a>
   

   
   
3. نضع الآن أيقونة (facebook) لتكن صورة أو رمز من رموز مكتبة Font Awesome المحددة باللون ليصبح الكود كالتالي...
   

   <a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>
     <i class='fa fa-facebook'></i>
     شارك
    </a>
   

   
   
4. إذا أردنا عند الضغط على الزر يفتح معك في نافذة منبثقة أضف السمة المحددة باللون ليصبح الكود النهائي كالتالي...
   

   <a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' 
   rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, 
   left=24, top=24, scrollbars, resizable'); return false;'>
     <i class='fa fa-facebook'></i>
     شارك
    </a>
   

   
   

 لتخصيص الشكل الخارجي للزر هنا نحتاج إدراج إسم فئة class المحددة باللون كالتالي...

<a class='share-item' expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' 
rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550,
height=600, left=24, top=24, scrollbars, resizable'); return false;'>
  <i class='fa fa-facebook'></i>
  شارك
 </a>

بعدما أضفنا هوية للزر بإسم الفئة share-item قم بالبحث عن هذا الوسم ]]></b:skin>فوقه أي قبله قم بوضع كودCss التالي..

.share-item {
    padding: 10px;
    margin: 0 auto;
    max-width: 150px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    background-color: #38559c;
    color: white;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
        -ms-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

 شرح نمط الكود

النمط المحدد بهذا اللون  الأول خاص بحجم الحشو والثاني سعة الهامش.

النمط المحدد بهذا اللون خاص بأقصى حجم طول الزر

النمط المحدد بهذا اللون الأول خاص بحجم الخط والثاني بالسمك 400 أخف / 700 أثقل

النمط المحدد بهذا اللون خاص بمكان النص center الوسط right اليمين left اليسار

النمط المحدد بهذا اللون خاص بـ لون خلفية الزر والثاني لون النص والثالث تنسيق ضل النص

النمط المحدد بهذا اللون خاص بدوران حافة الزر كلما زاد العدد زاد في تقوس الحافة.

 الأن سنظيف تأثير بسيط على الزر عند مرور الماوس فوقه ما يعرف بالـ :hover  التحويم بالشكل التالي...

.share-item:hover {
    background-color: #2f2f2f;
    color: #777;
}

ما قمنا به هنا أضفنا مع الـكلاس .share-item خاصية :hover ثم غيرنا لون الزر ولون النص وبما أن الأيقونة هي عبارة عن خط فسيتغير لونها كذلك بمجرد مرور الماوس فوق الزر...بنفس الطريقة تستطيع التلاعب بالزر كما تشاء عبر إضافة أكواد التأثيرات...وفي الأخير ستلاحظ معاينة الزر الذي قمنا بتصميمه في الأسفل فوق كل شفرة موقع.

نماذج أولية لأزرار المشاركة

ستجد في الأسفل مجموعة من المواقع الأكثر إستعمالا على الصعيدين العربي والأجنبي..داخل كل حاوية ستجد توليفة من الشفرات هي نفس الأكواد التي طبقناها في المثال الذي سبق وهي مرتبة على الشكل الآتي
1- معاينة للزر الذي صممناه منعكس على كود كل موقع
3- كود اللون الرئيسي المستعمل في الموقع.
2- كود زر المشاركة.
ابحث عن الموقع المرغوب للمشاركة واستبدل العنوان والأيقونة واللون في أداتك.

بعض المواقع لاتتوفر لها أيقونات رمز خطي على مكتبة font-awesomeلذلك رأينا الطريقة الأحسن هي إستبدالها بكود صورةsvgلن تلاحظ الفرق سوى في حجم الكود الكبير نوعا ما لكن لا تقلق فذلك لن يأثر ...مثال على ذلك منصة بلوجرBlogger وموقع.
فقط قم بنسخ كود صورةsvgوضعه داخل الكود الرئيسي بنفس الطريقة التي أضفنا بها كود رمز أيقونات مكتبة font-awesome

المشاركة عبر [البريد الإلكتروني]

 شارك

لون خلفية الزر #4d90f0

 <a expr:href='"//www.blogger.com/share-post.g?postID=" + data:post.id + "&blogID=" + data:blog.blogId  + "&url=" + data:post.url + "&title=" + data:post.title + "&target=email"' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-envelope'></i>
 شارك
 </a> 

تستطيع أن تستعمل كذلك هذا الكود الجاهز والذي يمكنك التحكم في إظهاره أو إخفائه من خلال تحرير رسائل المدونة الإلكترونية في صفحة التخطيط ثم التحديد على مربع عرض أزرار المشاركة.

  <!-- BLOG TEM Email Share Buttons Start -->
<b:if cond='data:top.showEmailButton'>
<a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-envelope'/>
<span class='share-button-link-text'>
<data:top.emailThisMsg/>
</span>
</a>
</b:if> 

---

المشاركة على موقع [ Blogger ]

 شارك

لون خلفية الزر #f79029

<a expr:href='"//www.blogger.com/blog_this.pyra?t&u=" + data:post.url + "&n=" + data:post.title + "&pli=1"' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <svg version="1.1" id="Capa_1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 508.52 508.52" style="enable-background:new 0 0 508.52 508.52;" xml:space="preserve" width="18px" height="18px">
<g>
<path style="fill:#FFFFFF;" d="M475.625,190.695h-28.509c-17.449,0-32.736-14.779-33.944-31.782
C413.172,68.205,340.041,0,248.698,0h-83.334C74.085,0,0.064,73.513,0,164.22v180.175C0,435.102,74.085,508.52,165.364,508.52
h177.982c91.343,0,165.174-73.449,165.174-164.156V227.976C508.488,209.86,493.868,190.695,475.625,190.695z M158.881,127.13
h95.347c17.48,0,31.783,14.302,31.783,31.782s-14.302,31.782-31.782,31.782h-95.347c-17.48,0-31.782-14.302-31.782-31.782
S141.4,127.13,158.881,127.13z M349.576,381.39H158.881c-17.48,0-31.782-14.302-31.782-31.782
c0-17.48,14.302-31.783,31.782-31.783h190.695c17.48,0,31.782,14.302,31.782,31.783
C381.358,367.088,367.056,381.39,349.576,381.39z"></path>
</g>
</svg>
 شارك
 </a> 

---

المشاركة على موقع [ Facebook ]

 شارك

لون خلفية الزر #38559c

 <a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-facebook'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Twitter ]

 شارك

لون خلفية الزر #00aaf3

 <a expr:href='"//twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-twitter'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Pinterest ]

 شارك

لون خلفية الزر #cd1c1f

 <a expr:href='"//pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-pinterest'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Linkedin ]

 شارك

لون خلفية الزر #3c97c6

 <a expr:href='"//www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-linkedin'></i> 
  شارك
 </a>  

---

المشاركة على موقع [ Reddit ]

 شارك

لون خلفية الزر #ff4501

 <a expr:href='"//reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-reddit-alien'></i> 
  شارك
 </a>

---

المشاركة على موقع [ Digg ]

 شارك

لون خلفية الزر #333333

 <a expr:href='"//digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-digg'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Stumble Upon ]

 شارك

لون خلفية الزر #eb4823

 <a expr:href='"//www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-stumbleupon'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Buffer ]

 شارك

لون خلفية الزر #192533

 <a expr:href='"//bufferapp.com/add?url=" + data:post.url + "&text=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
<svg version="1.1" id="Layer_1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 350.001 350.001" style="enable-background:new 0 0 350.001 350.001;" xml:space="preserve" width="18px" height="18px";>
<g>
 <path style="fill:#FFFFFF;" d="M14.092,88.769L172.1,164.826c1.833,0.882,3.969,0.882,5.802,0L335.91,88.768
  c5.051-2.429,5.051-9.621,0-12.051L177.9,0.662c-1.832-0.882-3.968-0.882-5.801,0L14.092,76.718
  C9.041,79.148,9.041,86.339,14.092,88.769z"></path>
 <path style="fill:#FFFFFF;" d="M14.092,181.024L172.1,257.082c1.833,0.882,3.969,0.882,5.802,0l158.008-76.057
  c5.051-2.429,5.051-9.621,0-12.053l-33.336-16.044l-105.881,50.962c-6.726,3.236-14.228,4.946-21.692,4.946
  s-14.964-1.71-21.702-4.951L47.43,152.924l-33.339,16.047C9.041,171.404,9.041,178.595,14.092,181.024z"></path>
 <path style="fill:#FFFFFF;" d="M335.91,261.229l-33.336-16.047l-105.881,50.965c-6.726,3.236-14.228,4.946-21.692,4.946
  s-14.964-1.71-21.702-4.951L47.43,245.182L14.091,261.23c-5.051,2.432-5.051,9.621,0,12.053l158.008,76.057
  c1.833,0.882,3.969,0.882,5.802,0l158.008-76.057C340.961,270.85,340.961,263.66,335.91,261.229z"></path>
</g>
</svg>
  شارك
 </a> 

---

المشاركة على موقع [ Delicious ]

 شارك

لون خلفية الزر #3398fc

 <a expr:href='"//del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-delicious'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Vkontakte ]

 شارك

لون خلفية الزر #4c75a3

 <a expr:href='"//vk.com/share.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-vk'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Hacker News ]

 شارك

لون خلفية الزر #ff6600

 <a expr:href='"//news.ycombinator.com/submitlink?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-hacker-news'></i> 
  شارك
 </a> 

---

المشاركة على موقع [ Tumblr ]

 شارك

لون خلفية الزر #32506d

 <a expr:href='"//www.tumblr.com/share?=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-tumblr'></i> 
  شارك
 </a>

---

المشاركة على موقع [ Pocket ]

 شارك

لون خلفية الزر #f92c8b

 <a expr:href='"//getpocket.com/save?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
 <i class='fa fa-get-pocket'></i> 
  شارك
 </a>