9/12/2017

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




تطبيق عملي بسيط !

  • نقوم بوضع الكود الرئيسي والذي يحتوى على شفرة الموقع الإلكتروني وليكن مثلا زر الفايسبوك  وهو كالتالي...
  • 
      <a expr:href='&quot;//www.facebook.com/sharer.php?u=&quot;
     + data:post.url + &quot;&amp;title=&quot;+ data:post.title'
     rel='nofollow' target='_blank'>
     </a> 
    
  • نقوم الآن بوضع إسم مع الوسم وليكن مثلا إسم الموقع (facebook) أو كلمة (شارك) ليصبح كالتالي...
  • 
      <a expr:href='&quot;//www.facebook.com/sharer.php?u=&quot;
     + data:post.url + &quot;&amp;title=&quot;+ data:post.title'
     rel='nofollow' target='_blank'>
     شارك
     </a> 
    
  • نضع الآن أيقونة (facebook) لتكن صورة أو رمز من رموز مكتبة Font Awesome ليصبح الكود كالتالي...
  • 
      <a expr:href='&quot;//www.facebook.com/sharer.php?u=&quot;
     + data:post.url + &quot;&amp;title=&quot;+ data:post.title'
     rel='nofollow' target='_blank'>
     شارك
     <i class='fa fa-facebook'></i>
     </a> 
    
    ملحق هام
    الكود التالي هو لإظهار أيقونات font-awesome ، إنسخ الرابط <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> وأضفه فوق </head> إذا كان موجود فلا داعي لإضافته أو قم بتحديثه (أخر تحديث 4.7.0) .
  • الأن عندما تضغط على الزر سيفتح معك في نافذة جديدة إذا أردت جعلها نافذة منبثقة أضف هذه الشفرة مع الكود الذي صممناه ليصبح الكود النهائي كالتالي...
  • 
      <a expr:href='&quot;//www.facebook.com/sharer.php?u=&quot;
     + data:post.url + &quot;&amp;title=&quot;+ data:post.title'
     rel='nofollow' target='_blank' onclick='window.open(this.href,
     &apos;windowName&apos;, &apos;width=550, height=600, left=24,
     top=24, scrollbars, resizable&apos;); return false;'>
     شارك
    <i class='fa fa-facebook'></i>
     </a> 
    
    ماذا عن الشكل الخارجي للزر؟
    هنا نحتاج إدراج هوية الوسم مايعرف بالـ class حتى نستطيع التحكم في نمط أو ستايل الزر ولنطبق على نفس الكود الذي صممناه لنجعله كالتالي
    
      <a class='Share-button' expr:href='&quot;//www.facebook.com/sharer.php?u=&quot;
     + data:post.url + &quot;&amp;title=&quot;+ data:post.title'
     rel='nofollow' target='_blank' onclick='window.open(this.href,
     &apos;windowName&apos;, &apos;width=550, height=600, left=24,
     top=24, scrollbars, resizable&apos;); return false;'>
     شارك
    <i class='fa fa-facebook'></i>
     </a>  
    
  • كما تلاحظ أضفنا هوية للكود بالإسم Share-button الأن نضيف كود ستايل الزر بنفس الإسم لنظهر الزر بالشكل الذي نريد وهو كالتالي...
  • 
     .Share-button {
        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);
        border-radius: 4px;
    }
    
    شرح نمط الكود
    الكود المحدد بهذا اللون الأول خاص بحجم الحشو والثاني سعة الهامش 
    الكود المحدد بهذا اللون خاص بأقصى حجم طول الزر
    الكود المحدد بهذا اللون الأول خاص بحجم الخط والثاني بالسمك 400 أخف / 700 أثقل
    الكود المحدد بهذا اللون خاص بمكان النص center الوسط right اليمين left اليسار
    الكود المحدد بهذا اللون الأول خاص بـ لون الزر والثاني النص والثالث ضل النص
    الكود المحدد بهذا اللون خاص بدوران حافة الزر كلما زاد العدد زاد في تقوس الحافة.
  • الأن سنظيف تأثير بسيط على الزر عند مرور الماوس فوقه ما يعرف بالـ :hover الأن لاحظ معي التالي...
  • 
     .Share-button:hover {
        background-color: #2f2f2f;
        color: #777;
    } 
    
    ما قمنا به هنا أضفنا مع الـكلاس .Share-button خاصية :hover ثم غيرنا لون الزر ولون النص وبما أن الأيقونة هي عبارة عن خط فسيتغيرلونها كذلك  بمجرد مرور الماوس فوق الزر ...بنفس الطريقة تستطيع التلاعب بالزر كما تشاء عبر إضافة أكواد التأثيرات ...وفي الأخير ستلاحظ معاينة الزر الذي قمنا بتصميمه في الأسفل فوق كل شفرة موقع.


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


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



  1. كود المشاركة على   [البريد الإلكتروني ]
  2. شارك
  3. 
     <a class='share-item' expr:href='&quot;//www.blogger.com/share-post.g?postID=&quot; + data:post.id + &quot;&amp;blogID=&quot; + data:blog.blogId  + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;target=email&quot;' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-envelope'></i> 
    
  5. 
     #4d90f0 
    
  6. تستطيع أن تستعمل كذلك هذا الكود الجاهز والذي يمكنك التحكم في إظهاره أو إخفائه من خلال تحرير رسائل المدونة الإلكترونية في صفحة التخطيط ثم التحديد على مربع عرض أزرار المشاركة.
  7. 
      <!-- BLOG TEM Email Share Buttons Start -->
    <b:if cond='data:top.showEmailButton'>
    <a class='share-item' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class='fa fa-envelope'/>
    <span class='share-button-link-text'>
    <data:top.emailThisMsg/>
    </span>
    </a>
    </b:if> 
    




  1. كود المشاركة على موقع   [ Blogger ]
  2. شارك
  3. 
     <a expr:href='&quot;//www.blogger.com/blog_this.pyra?t&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=1&quot;' rel='nofollow' target='_blank'></a> 
    
  4. 
     <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> 
    
  5. تستطيع أن تستعمل الرمز التالي ( حرف B من مكتبة Font Awesome ) بدل كود الأيقونة svg
  6. 
     <i class="fa fa-bold"></i> 
    
  7. 
     #f79029 
    




  1. كود المشاركة على موقع  [facebook ]
  2. شارك
  3. 
     <a expr:href='&quot;//www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-facebook'></i> 
    
  5. 
     #38559c 
    




  1. كود المشاركة على موقع  [Google Plus ]
  2. شارك
  3. 
     <a expr:href='&quot;//plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-google-plus'></i> 
    
  5. 
     #d74628 
    





  1. كود المشاركة على موقع  [Twitter ]
  2. شارك
  3. 
     <a expr:href='&quot;//twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-twitter'></i> 
    
  5. 
     #00aaf3 
    





  1. كود المشاركة على موقع  [pinterest ]
  2. شارك
  3. 
     <a expr:href='&quot;//pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-pinterest'></i> 
    
  5. 
     #cd1c1f 
    





  1. كود المشاركة على موقع   [ Linkedin ]
  2. شارك
  3. 
     <a expr:href='&quot;//www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-linkedin'></i> 
    
  5. 
     #e14929 
    





  1. كود المشاركة على موقع   [ Reddit ]
  2. شارك
  3. 
     <a expr:href='&quot;//reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-reddit-alien'></i> 
    
  5. 
     #666666 
    





  1. كود المشاركة على موقع   [ Digg ]
  2. شارك
  3. 
     <a expr:href='&quot;//digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-digg'></i> 
    
  5. 
     #546b9f 
    





  1. كود المشاركة على موقع   [ Stumble Upon ]
  2. شارك
  3. 
     <a expr:href='&quot;//www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-stumbleupon'></i> 
    
  5. 
     #ea4b24 
    





  1. كود المشاركة على موقع   [ Buffer ]
  2. شارك
  3. 
     <a expr:href='&quot;//bufferapp.com/add?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
    <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>
    
  5. 
     #2f2f2f 
    





  1. كود المشاركة على موقع   [ Delicious ]
  2. شارك
  3. 
     <a expr:href='&quot;//del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
     <i class='fa fa-delicious'></i> 
    
  5. 
     #3398fc 
    





  1. كود المشاركة على موقع   [ vkontakte ]
  2. شارك
  3. 
     <a expr:href='&quot;//vk.com/share.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
    <i class='fa fa-vk'></i> 
    
  5. 
    #4c75a3
    






  1. كود المشاركة على موقع   [ hacker-news ]
  2. شارك
  3. 
     <a expr:href='&quot;//news.ycombinator.com/submitlink?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
    <i class='fa fa-hacker-news'></i> 
    
  5. 
    #ff6600
    






  1. كود المشاركة على موقع   [ Tumblr ]
  2. شارك
  3. 
     <a expr:href='&quot;//www.tumblr.com/share?=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
    <i class='fa fa-tumblr'></i> 
    
  5. 
    #32506d
    






  1. كود المشاركة على موقع   [ Pocket ]
  2. شارك
  3. 
     <a expr:href='&quot;//getpocket.com/save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> 
    
  4. 
    <i class='fa fa-get-pocket'></i> 
    
  5. 
    #f92c8b
    



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



add_commentإرسال تعليق

إرسال تعليق