بسم الله الرحمن الرحيم
شرح اضافة أيقونات المواقع الإجتماعية فيس بوك , تويتر , جوجل بلس في أي مكان في مدونتك
الكاتب : مصباحي نت | بتاريخ : 7 - مارس - 2012 | 4 تعليقات | رقم التدوينة : 1447

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

للحصور على أكواد هذه الإيقونات توجه للصفحات التالية:

Facebook
Google+
Twitter

اكواد الأيقونات التي ستحصل عليها من الروابط أعلى ستعمل عند إضافتها في (single.php) أو (page.php) لكنها لن تعمل بشكل صحيح في رئيسية المدونة (index.php) او (archive.php) لأنها ستظهر عدد الإعجاب أو الريتويت للصفحة نفسها بدلاً عن التدوينات لذا لا بد من تعديل الأكواد التي ستحصل عليها لتلائم الصفحة الرئيسية والإرشيف لو أحببت إضافة هذه الأيقونات

ولكي تقوم بهذا العمل تابع الشرح التالي:

Facebook

من صفحة 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

من هذه الصفحة 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

التصنيف : وورد بريس

4 تعليقات على : “شرح اضافة أيقونات المواقع الإجتماعية فيس بوك , تويتر , جوجل بلس في أي مكان في مدونتك”

  1. May_mi220 قال:

    كوماواااااااااااااااااااااااااااااا ^0^
    3>
    الشرح مرره بسيط ويفهمم شكررا من جد شكككككككككرررا
    الله يوفقك ي رب

  2. برامج قال:

    شكرا لك شرح ممتاز بارك الله فيك

  3. memo قال:

    يجزاك ربي الجنة

    بس لو تعلمني طريقة إلغائها

    أنا نزلت قالب وهيا متوفرة فيه وانا ما ابغاها

    • نعم وجودها يسبب ثقل غير عادي ولا انصح بإستخدامها في رئيسية أي موقع
      لأن الثقل دائماً يعني خسارة زوار
      لكن طريقة إلغائها هي التعديل على ملفات القالب لديك


شاركـ بتعليقاتكـ ..!

الإشتراك البريدي

أشترك بإيميلك معنا ليصلك كل جديد

تسجيل الدخول


العضـويـة:
الباسورد:

تدوينات مميزة

yemeniana-bareq-word-press-theme

جديد اعمالي قالب اخباري احترافي فخم ومميز جداً حساس ومتوافق مع كافة الاجهزة الذكية

جديد أعمالي قالب وورد برس اخباري احترافي فخم ومميز جداً لصحيفة بارق الاخبارية القالب متنوع البلوكات وفي ...

yemeniana-neew-wordpress-theme

قالب اخباري احترافي بالوان هادئة وجذابة لصحيفة الحقو نيوز

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

yemeniana-atyaf-word-press-theme

قالب وورد برس اخباري احترافي لصحيفة اطياف الالكترونية

جديد أعمالي قالب وورد برس اخباري احترافي لصحيفة اطياف الاخبارية متنوع المحتوى من اخبار واناشيد وفيديو ...

yemeniana-dalil-e3lany-word-press-theme

جديد أعمالي : قالب وورد برس إعلانات تجارية ومبوبة ودليل تجاري إحترافي

جديد أعمالي قالب وورد برس أحترافي للأعلانات التجارية والإعلانات المبوبة وكدليل تجاري مفتوح صور متنوعة من القالب ...

yemeniana-guercife24-wordpress-theme

جديد اعمالي : قالب وورد برس إحترافي لصحيفة اخبارية

جديد أعمالي قالب وورد برس اخباري احترافي لصحيفة اخبارية صورة للقالب بعد تركيبه على موقع تجريبي ...

أعلن معنا

كن أحد معجبينا