شرح اضافة أيقونات المواقع الإجتماعية فيس بوك , تويتر , جوجل بلس
لعل الكثير من مستخدمي سكريبت الوورد برس يلاحظ إضافة هذا الأيقونات في العديد من القوالب بطرق مختلفة وفي أماكن مختلفة لهذا أخترت تطبيقي لهذه الليلة كيفية الحصول على هذه الأيقونات وإضافتها للوورد برس بشتى الطرق
للحصور على أكواد هذه الإيقونات توجه للصفحات التالية:
اكواد الأيقونات التي ستحصل عليها من الروابط أعلى ستعمل عند إضافتها في (single.php) أو (page.php) لكنها لن تعمل بشكل صحيح في رئيسية المدونة (index.php) او (archive.php) لأنها ستظهر عدد الإعجاب أو الريتويت للصفحة نفسها بدلاً عن التدوينات لذا لا بد من تعديل الأكواد التي ستحصل عليها لتلائم الصفحة الرئيسية والإرشيف لو أحببت إضافة هذه الأيقونات
ولكي تقوم بهذا العمل تابع الشرح التالي:
من صفحة Facebook قم بضبط الأيقونة بالطريقة التي تحبذها حيث ستلاقي خيارات عديدة لشكل ومظهر الأيقونة تستطيع تحديد الخاصية وظهورها للمعاينة تمجرد تنسيقها وعند الإعتماد على المظهر الذي سيعجبك أنقر Get Code
ستحصل على كودين :
الأول يجب عليك وضعه في ملف (header.php) مباشرة بعد وسم
الثاني ستظيفه في المكان الذي تود ظهوره فيه
لتتاكد من ان الصفحة الموجه في الكود هي الصفحة الصحيحة للموضوع ضع هذا الأمر في الكود href=”ID); ?>”
ليصبح الكود كالتالي
<div class="fb-like" data-href="http://www.facebook.com/pageID" href="<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>
Google+
صفحة Google+ تعطيك أربعة احجام لأيقونة جوجل بلس مع أختلاف في طريقة عرض عدد الإعجابات او ما يسمى بالبلس حيث يمكنك تحديد أي شكل
طريقة ربط الأيقونة للرابط الدائم لصفحة او التدوينة أضف هذا الأمر href=””
للكود الذي ستحصل عليه
ليصبح هكذا
<!-- Place this tag where you want the +1 button to render --> <g:plusone size="tall"href="<?php the_permalink(); ?>"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> window.___gcfg = {lang: 'ar'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
من هذه الصفحة Twitter يمكنك تحديد شكل ومظهر الأيقونة الذي تريده ان يظهر لك في موقعك أو مدونتك
ثم قم بإضافة التعديلات عليه كما في هذا الكود التالي
<a href="https://twitter.com/share" class="twitter-share-button" data-via="misbahinet" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
لإظهار الأيقونة الكبيرة اضف في هذا الأمر data-size=”large”
لإظهار ايقونة تويتر الشائعة (الرأسية) أضف هذا الأمر data-count=”vertical”
وهذه نتيجة التطبيق
يمكنك تاطير الأيقونات كيفما تشاء من ملف style.css
كوماواااااااااااااااااااااااااااااا ^0^
3>
الشرح مرره بسيط ويفهمم شكررا من جد شكككككككككرررا
الله يوفقك ي رب
شكرا لك شرح ممتاز بارك الله فيك
يجزاك ربي الجنة
بس لو تعلمني طريقة إلغائها
أنا نزلت قالب وهيا متوفرة فيه وانا ما ابغاها
نعم وجودها يسبب ثقل غير عادي ولا انصح بإستخدامها في رئيسية أي موقع
لأن الثقل دائماً يعني خسارة زوار
لكن طريقة إلغائها هي التعديل على ملفات القالب لديك