السلام عليكم،
بعد التدوينتين السابقتين ( هنا و هنا ) اللتين تحدثنا فيهما عن طريقة إضافة صندوق الإعجاب -بصفحة الفيسبوك- ،نستمر في حديثنا هنا عن التطرق إلى مواقع التواصل الإجتماعي.
و كما نعلم فقد أصبح لهذه الاشبكات الدور الحاسم في التعريف بمواقعنا. و أفضل طريقة فعالة لإشهار تدويناتنا و مواضيعنا هي أزرار المشاركة (كالتي توجد أسفل هذه التدوينة).
إذن فاليوم إن شاء الله سأشارككم الكود خاصتي لتحصلوا على أزرار خفيفة لكل من - النادر - الواتساب و الفيسبوك و غوغل بلاس و تويتر و لينكدن. و أضنها هي الأكثر إستعمالا من طرف الزوار.
هذه الأزار هي أزرار "متجاوبة" إن صح التعبير. بمعنى أنها تتأقلم مع قياس الشاشة التي يتصفح من خلالها الزائر.
أولا
نتجه إلى قالب > تحرير HTML
ثانيا
ننقر في أي مكان داخل محرر ال HTML ثم نضغط Ctrl + F
نبحث عن:
</head>
ثالثا
فوقها مباشرة نلصق الكود css التالي الذي سيقوم بتنسيق مظهر أزرارنا و الذي سيعطيها الأبعاد المناسبة تبعا لمقاس الشاشة:
<b:if cond='data:blog.pageType == "item"'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /><style type='text/css'>
.share-text{display:none!important}.sharebar{height:28px;background:#F7F7F7;border-top:1px solid #EAEAEA;position:relative;z-index:2;width:100%;display:inline-block;clear:both;margin:10px -20px -6px;padding:10px 0 0 36px}.sharebar .Share_buttons{display:block;margin:0 auto}.sharebar .Share_buttons .wrap{text-align:center;margin:0 auto;display:inline-block;min-width:41px}.sharebar .Share_buttons .wrap1{display:inline-block;width:31px;float:left}.sharebar .Share_buttons ul{margin:0;padding:0}.sharebar .Share_buttons ul li a,.sharebar .Share_buttons ul li a:hover{color:#FFF!important;cursor:pointer;line-height:25px;height:100%;display:block;text-decoration:none}.sharebar .Share_buttons ul li{list-style:none;padding:0;margin:-4px 1px;float:left;width:16%;max-width:100px;display:inline-block;font-size:13px;overflow:hidden;height:25px;line-height:25px;color:#fff;border:1px solid rgba(0,0,0,.04);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.sharebar .Share_buttons ul li .fa{color:#fff;font-size:17px;font-weight:400;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:25px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.05)}.sharebar .Share_buttons .btn_whtspp{background-color:#5CBE4A}.sharebar .Share_buttons .btn_whtspp:hover{background-color:#53AB43}.sharebar .Share_buttons .btn_fb{background:#3a579a}.sharebar .Share_buttons .btn_fb:hover{background:#314a83}.sharebar .Share_buttons .btn_twtr{background:#00abf0}.sharebar .Share_buttons .btn_twtr:hover{background:#0092cc}.sharebar .Share_buttons .btn_gplus{background:#df4a32}.sharebar .Share_buttons .btn_gplus:hover{background:#be3f2b}.sharebar .Share_buttons .btn_linkdin{background:#0077b5}.sharebar .Share_buttons .btn_linkdin:hover{background:#005480}.sharebar .Share_buttons .share.h6{font-size:10px;font-weight:700;text-shadow:none!important;text-decoration:none;text-align:center;color:#000;border-top:3px solid #FFF600!important;border-bottom:0;padding:5px 0 0!important;margin:0!important;line-height:8px;border-radius:75% 0}.sharebar .Share_buttons .share{border:none;margin:0 5px 0 1px;overflow:visible!important;width:95px!important}.sharebar .Share_buttons .share .count.h4{font-size:18px;font-weight:700;text-shadow:none;text-decoration:none;font-family:sans-serif;text-align:center;color:red;line-height:15px;margin:-4px 0 2px;min-height:15px;padding:0;border:none}.sharebar .Share_buttons .btn_fb .share-btn,.sharebar .Share_buttons .btn_gplus .share-btn,.sharebar .Share_buttons .btn_linkdin .share-btn,.sharebar .Share_buttons .btn_twtr .share-btn,.sharebar .Share_buttons .btn_whtspp .share-btn{position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0 5px;background-color:rgba(0,0,0,.28);border-radius:0 0 0 15px}@media only screen and (max-width:979px){.sharebar .Share_buttons .btn_linkdin{width:34px}.sharebar .Share_buttons .btn_fb,.sharebar .Share_buttons .btn_gplus,.sharebar .Share_buttons .btn_twtr,.sharebar .Share_buttons .btn_whtspp{width:78px}.sharebar .Share_buttons .btn_fb .share-btn,.sharebar .Share_buttons .btn_gplus .share-btn,.sharebar .Share_buttons .btn_linkdin .share-btn,.sharebar .Share_buttons .btn_twtr .share-btn,.sharebar .Share_buttons .btn_whtspp .share-btn{display:none!important}}@media only screen and (max-width:768px){.sharebar .Share_buttons ul li a,.sharebar .Share_buttons ul li a:hover{color:#FFF!important;cursor:pointer;line-height:25px;font-size:11px;height:100%;display:block;text-decoration:none}.sharebar .Share_buttons .wrap{min-width:34px}.sharebar .Share_buttons .btn_linkdin,.sharebar .Share_buttons .btn_twtr{width:30px}.sharebar .Share_buttons ul li{margin:1px 3px}.sharebar .Share_buttons{margin:-4px auto 0}}@media only screen and (max-width:479px){.sharebar .Share_buttons .share{border:none;margin:0 5px 0 1px;overflow:visible!important;width:80px!important}.sharebar .Share_buttons ul li{width:25px!important;margin:2px;border-radius:50px;border:2px solid rgba(0,0,0,.14)}.sharebar .Share_buttons ul li .fa{width:34px!important}.sharebar{height:28px;display:inline-block;clear:both;margin-right:-14px;padding:10px 0 10px 36px}.sharebar .Share_buttons{display:inline-block;float:left;margin-top:-4px}.sharebar .Share_buttons .btn_fb,.sharebar .Share_buttons .btn_whtspp{width:78px!important}}
</style>
</b:if>
رابعا
هنا سنضع قالب أزرارنا. و قد نجد شيئا من الصعوبة في إيجاد المكان المناسب. ما علينا إلا الحاولة حتى نصل لمبتغانا.
لكن عموما في أغلب القوالب يكون المكان المناسب هو قبل/فوق:
<data:post.body/>
إذن لنبحث عن هذه العبارة و نضيف فوقها مباشرة الكود التالي:
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div class='sharebar'> <div class='Share_buttons'> <ul> <li class='btn_linkdin'> <a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-linkedin'/> </div> <div class='wrap'> شارك </div> <div class='share-btn' data-service='linkedin'> <div class='count'/> </div> </a> </li> <li class='btn_twtr'> <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + ""' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-twitter'/> </div> <div class='wrap'> غرد </div> <div class='share-btn' data-service='twitter'> <div class='count'/> </div> </a> </li> <li class='btn_gplus'> <a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'> <div class='wrap1'> <i class='fa fa-google-plus'/> </div> <div class='wrap'> شارك </div> <div class='share-btn' data-service='google'> <div class='count'/> </div> </a> </li> <li class='btn_fb'> <a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-facebook'/> </div> <div class='wrap'> شارك </div> <div class='share-btn' data-service='facebook'> <div class='count'/> </div> </a> </li> <li class='btn_whtspp'> <a alt='WhatsApp' data-action='share/whatsapp/share' expr:href='" whatsapp://send?text=" + data:post.title + " !-" + data:post.url' id='whatsapp-share-button' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-whatsapp'/> </div> <div class='wrap'> أرسل </div> </a> </li> </ul> </div> </div> </b:if></b:if>
خامسا
نقوم بحفظ القالب و نتأكد من نجاح ما قمنا به.
هنيئا.
دعواتكم.
تم تعديل هذه التدوينة مرة واحدة 05/01/2016 لتصحيح خطا.
السلام عليكم، بعد التدوينتين السابقتين ( هنا و هنا ) اللتين تحدثنا فيهما عن طريقة إضافة صندوق الإعجاب -بصفحة الفيسبوك- ،نستمر في حديثنا ...