الطريقة الاولى :اضافة ازرار مشاركة التدوينات خفيفة جدا
على تحميل الصفحة ويتضمن فقط المشاركة على جوجل بلس وفيسبوك وتويتر ، ومن مميزات هذه الاضافة انها خفيفة مما تجعل مدونتك سريعة عند تصفح المستخدمين ودائما سرعة المدونة او الموقع يعتبر شرط اساسي من شروط السيو التي يجعل مدونتك صديقة لمحركات البحث . اولا افتح واجهة Blogger انتقل الى قالب ثم اختر تحرير HTML ابحث عن الكود التالي :]]></b:skin>#share-button{
float:right;
overflow:hidden;
margin-left:15px;
background:#fcfcfc;
}
#share-button p{
float:right;
display:block;
padding:5px 8px!important;
margin:0 0 3px 3px;
border-radius:6px;
border:1px solid #fff;
}
#share-button a,.share span{
float:right;
display:block;
color:#fafafa;
padding-bottom:5px;
padding-left:10px;
padding-right:30px;
padding-top:5px;
margin:5px;
border:1px solid #fff;
font-size:14px;
position:relative;
border-radius:10px;
font-family:Arial, sans-serif;
}
#share-button a:before{
position:absolute;
display:inline-block;
right:0px;
font-family:fontawesome;
top:0px;
height:100%;
border-radius:0px 10px; 10px; 0px;
color:#fff;
padding:0 8px;
line-height:26px;
}
#share-button a:hover{opacity:0.7;box-shadow:0 0 3px rgba(1,1,1,.1);cursor:pointer;}
.share {
font-size:15px;
margin-top:5px;
overflow: hidden;
padding-right:3%;
width:97%;
margin-left:auto;
margin-right:auto;
background:#fcfcfc;
border-bottom:1px solid #f3f3f3;
border-top:1px solid #f3f3f3;
}
.share span{
color:#333;
padding-right:10px;
}
.facebook:before {
content:"\f09a";
}
.google:before{
content:"\f0d5";
}
.twitter:before {
content:"\f099";
}
.facebook {
background:#3b5998;
}
.facebook:hover {
transition: all .2s ease-in-out;
background:#314A7C;
}
.google {
background:#c0361a;
}
.google:hover {
transition: all .2s ease-in-out;
background:#A82E15;
}
.twitter {
background:#4099ff;
}
.twitter:hover {
transition: all .2s ease-in-out;
background:#3988E2;
}<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><body>
<b:if cond='data:blog.pageType == "item"'>
<div class='share'>
<span>
شارك المقال
</span>
<div id='share-button'>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'>فيسبوك</a>
<a class='google' expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Google+'>جوجل+</a>
<a class='twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'>تويتر</a>
</div>
</div>
</b:if>الطريقة الثانية : طريقة حديثة ومتقدمة لعمل ازرار التواصل الإجتماعي بشكل احترافي وفريد :
تتميز هذه الطريقة بالمميزات الاتية:- انيقة وشكلها جذاب.
- متجاوبة مع جميع الاجهزة والهواتف.
- تدعم المشاركة عدد كبير من الشبكات الاجتماعية.
- سهلة التركيب فقط بواسطة اضافة كود واحد.
- ظهور زر المشاركة في الواتس اب ،فقط على الهاتف بشكل تلقائي.
ابحث عن الكود التالي :
<data:post.body/><b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType == "item"'>
<div style="clear:both;"/>
<style>
.rrssb-buttons.large-format li a,.rrssb-buttons.large-format li a .text{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.rrssb-buttons,.rrssb-buttons li,.rrssb-buttons li a{-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{*zoom:1}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}.rrssb-buttons{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0!important;width:100%}.rrssb-buttons li{float:left;height:100%;list-style:none;margin:0;padding:0 2.5px;line-height:13px}.rrssb-buttons li.email a{background-color:#0a88ff}.rrssb-buttons li.email a:hover{background-color:#006ed6}.rrssb-buttons li.facebook a{background-color:#306199}.rrssb-buttons li.facebook a:hover{background-color:#244872}.rrssb-buttons li.tumblr a{background-color:#32506d}.rrssb-buttons li.tumblr a:hover{background-color:#22364a}.rrssb-buttons li.linkedin a{background-color:#007bb6}.rrssb-buttons li.linkedin a:hover{background-color:#005983}.rrssb-buttons li.twitter a{background-color:#26c4f1}.rrssb-buttons li.twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.googleplus a{background-color:#e93f2e}.rrssb-buttons li.googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.youtube a{background-color:#df1c31}.rrssb-buttons li.youtube a:hover{background-color:#b21627}.rrssb-buttons li.reddit a{background-color:#8bbbe3}.rrssb-buttons li.reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.pinterest a{background-color:#b81621}.rrssb-buttons li.pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.pocket a{background-color:#ed4054}.rrssb-buttons li.pocket a:hover{background-color:#e4162d}.rrssb-buttons li.github a{background-color:#444}.rrssb-buttons li.github a:hover{background-color:#2b2b2b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;display:block;font-size:11px;font-weight:bold;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;-webkit-transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-o-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}.rrssb-buttons li a .icon{display:block;height:100%;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .icon svg{height:17px;width:17px}.rrssb-buttons li a .icon svg path,.rrssb-buttons li a .icon svg polygon{fill:#fff}.rrssb-buttons li a .text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .icon{height:100%;left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .text{visibility:hidden}.rrssb-buttons.large-format{height:auto}.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em;line-height:1vw}.rrssb-buttons.large-format li a .icon{left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .icon svg{height:100%;width:100%}.rrssb-buttons.large-format li a .text{font-size:15px;font-size:1vw}.rrssb-buttons.large-format li a:hover{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1.5px}.rrssb-buttons.small-format li a .icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:hover,.rrssb-buttons.tiny-format li a:active{background-color:transparent}.rrssb-buttons.tiny-format li.email a .icon svg path,.rrssb-buttons.tiny-format li.email a .icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.facebook a .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.tumblr a .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.linkedin a .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.twitter a .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.googleplus a .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.youtube a .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.reddit a .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.pinterest a .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.pocket a .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.github a .icon svg path,.rrssb-buttons.tiny-format li.github a .icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg polygon{fill:#111} /***********RRSS Buttons Code Ends***********/
</style>
<script type='text/javascript'>//<![CDATA[
/********Customized By:- New Blogger Lab ( www.newbloggerlab.com)********/
(function(e,t,n){"use strict";var r=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).length,i=100/r;t("li",n).css("width",i+"%").attr("data-initwidth",i)})},i=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=parseFloat(t(n).width()),i=t("li",n).not(".small").first().width(),s=t("li.small",n).length ;i>170&&s<1?t(n).addClass("large-format"):t(n).removeClass("large-format");r<200?t(n).removeClass("small-format").addClass("tiny-format"):t(n).removeClass("tiny-format")})},s=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=0,i=0,s,o,a=t("li.small",n).length;if(a===t("li",n).length){var f=a*42,l=parseFloat(t(n).width());s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(f+o<l){t(n).removeClass("small-format");t("li.small",n).first().removeClass("small");u()}}else{t("li",n).not(".small").each (function(e){var n=parseFloat(t(this).attr("data-size"))+55,s=parseFloat(t(this).width());r+=s;i+=n});var c=r-i;s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(o<c){t(s).removeClass("small");u()}}})},o=function(e){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).nextAll(),i=r.length;t(t("li",n).get().reverse()).each(function(e,r){if(t(this).hasClass("small")===!1){var i=parseFloat(t(this).attr("data-size"))+55,o=parseFloat(t(this).width());if(i>o){var a=t("li",n).not(".small").last();t(a).addClass("small");u()}}--r||s()})});e===!0&&f(u)},u=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,o,u,a,f=t("li.small",n).length;if(f>0&&f!==t("li",n).length){t(n).removeClass("small-format");t("li.small",n).css("width","42px");o=f*42;i=t("li",n).not(".small").length;s=100/i;a=o /i;navigator.userAgent.indexOf("Chrome")>=0||navigator.userAgent.indexOf("Safari")>=0?u="-webkit-calc("+s+"% - "+a+"px)":navigator.userAgent.indexOf("Firefox")>=0?u="-moz-calc("+s+"% - "+a+"px)":u="calc("+s+"% - "+a+"px)";t("li",n).not(".small").css("width",u)}else if(f===t("li",n).length){t(n).addClass("small-format");r()}else{t(n).removeClass("small-format");r()}});i()},a=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});r();t(".rrssb-buttons li .text").each(function(e){var n=parseFloat(t(this).width());t(this).closest("li").attr("data-size",n)});o(!0)},f=function(e){t(".rrssb-buttons li.small").removeClass("small");o();e()},l=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},c=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);l(n.attr("href"),n.find(".text").html(),580,470);e.preventDefault()});t(e).resize(function(){f(u);c(function(){f(u)},200,"finished resizing")});t(document).ready(function(){a()})})(window,jQuery); /* RRSSB: JavaScript Ends */ //]]></script>
<script type='text/javascript'>if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="https://googledrive.com/host/0BwMMDqbfGy7Od3UtLTRJcncwQ1U";h.appendChild(s);}</script>
<ul class='rrssb-buttons rrssb-1'>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' rel='nofollow' style='display:none;'>Share</a>
<li class='facebook' data-initwidth='14.285714285714286' data-size='57' style='width: calc(20% - 16.8px);'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share on Facebook'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'><path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/></svg></span><span class='text'>facebook</span></a>
</li>
<li class='googleplus' data-initwidth='14.285714285714286' data-size='51' style='width: calc(20% - 16.8px);'>
<a expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share on Google Plus'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'>
<g>
<g>
<path d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/>
<polygon points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 '/>
</g>
</g></svg></span><span class='text'>google+</span></a>
</li>
<li class='twitter' data-initwidth='14.285714285714286' data-size='47' style='width: calc(20% - 16.8px);'>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share on Twitter'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'><path d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z'/></svg></span><span class='text'>twitter</span></a>
</li>
<li class='email' data-initwidth='14.285714285714286' data-size='34' style='width: calc(20% - 16.8px);'>
<a expr:href='"mailto:?subject=Check out" + data:post.title + "&amp;body=Visit:" + data:post.url' expr:title='data:top.emailThisMsg' rel='nofollow'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'><g><path d='M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z'/></g></svg></span><span class='text'>email</span></a>
</li>
<li class='linkedin' data-initwidth='14.285714285714286' data-size='47' style='width: calc(20% - 16.8px);'>
<a expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url' rel='nofollow' target='_blank' title='Share on Linkedin'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'><path d='M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803 c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048 h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501 c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546 C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z'/></svg></span><span class='text'>linkedin</span></a>
</li>
<li class='reddit small' data-initwidth='14.285714285714286' data-size='37' style='width: 42px;'>
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url' rel='nofollow' target='_blank' title='Share on reddit'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'><g><path d='M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z'/><path d='M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z'/><path d='M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z'/><path d='M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z'/></g></svg>
</span><span class='text'>reddit</span></a>
</li>
<li class='pinterest small' data-initwidth='14.285714285714286' data-size='57' style='width: 42px;'>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description=" + data:post.title' rel='nofollow' target='_blank' title='Share on Pinterest'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0px'><path d='M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785 c7.061,0,12.785-5.725,12.785-12.785 C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458 c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557 c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168 C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239 c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z'/></svg></span><span class='text'>pinterest</span></a>
</li>
</ul>
</div>
</b:if>الى هنا انتهى شرح اضافة ازرار المشاركة على الشبكات الاجتماعية يطريقيتين رائعتين، واي استفسار حول الدرس ضعه في تعليق والى درس