المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : نبذة عن الفيس بوك والحصري إضافة Facebook Fanbox widget بالطريقة الإحترافية



loulou ange
10-30-2013, بتوقيت غرينيتش 09:31 PM
http://www.dzbatna.com/images/icons/idea.gif ظ†ط¨ط°ط© ط¹ظ† ط§ظ„ظپظٹط³ ط¨ظˆظƒ ظˆط§ظ„ط*طµط±ظٹ ط¥ط¶ط§ظپط© Facebook Fanbox widget ط¨ط§ظ„ط·ط±ظٹظ‚ط© ط§ظ„ط¥ط*طھط±ط§ظپظٹط© (http://www.dzbatna.com/t1812454/)



بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

كيفيكم طيبين إن شاء الله http://www.dzbatna.com/images/smilies/shiny01.gif

كما ترون مدة طويلة وأخيرا حصلنا وقت ننزل شئ يفيد الناس وتبقى الوحشة للمعهد http://www.dzbatna.com/images/smilies/cupidarrow.gif

نبذة عن الموضوع

بشكل عام خصائص إضافات الفيس بوك أكبر مكسب للزوار فمعذرة لمن لم يعرف لحد الان انه الفيس بوك يعتبر الرقم 2 عالميا بعد جوجل GOOGLE ترتيبه ومن فيه كلهم مدمنين الانترنت وأعتقد مكسبه لي موقعك أكثر من مكسبك من جوجل GOOGLE لي موقعك حيث من زواره سأتكلم عن بعض النقاط التي تساعد ولكن موضوعنا هنا نركز على كيفية إضافة صندوق المعجبين وتعديله بشرح طريقة مبتكر شخصيا مني فقط مع بعض الاضافات من جهات اخرى لاكون صريحا http://www.dzbatna.com/images/smilies/icon26.gif فقط اممم حسننا نسنتطيع إضافة المواضيع تلقائيا لي صفحة الفيس بوك عن طريق بلوجن Graffiti وهو الأفضل وأيضا نجلب أناس كثير لعمل لايك للصفحة بوضع الفان بوكس في جميع صفحات موقعك او منتداك حيث ما ان عملو لايك ما ان كان تواصلك معهم بالمواضيع الجديدة ان كانت منتدى او شبكة عن طريق الربط بالتغذية RSS ستظهر في صفحتهم وهكذا يبقى انك ربط الزائر بيك طالما انه دخل الفيس بوك راح تجيه كل التحديث updateات الصفحة الا يكيفي انه الفيس بوك يحتاج من اصحاب المنتديات بالذات الرعاية فلهذا ما اوصيكم صفحتي ابيكم كلكم لايك ها ما ابي منكم شئ فقط يمكن تستفيديون وتفيديون

حسننا هنا في موضوعنا الرئيسي جبتلكم

facebook fanbox widget كما ترون منظرها الإعتيادي غير مناسب دئما والكثير منا يحاول ضبطه سواء كونه من الالوان وعدم التوافق المعاييري لل xhtml فلهذا بهذا الدرس مفصل أقدم لكم الطريقة بالمميزات التالية

تلوين CSS مميز
عرض بطريقة أجمل
الكود code خالي من الأخطاء Valid Xhtml


قبل كل شئ لي تفهمو عن ما أتكلم تابعو المثال هنا (http://www.creativityworld.net/js/tajareb/Facebook-Fanbox-Widget/)

حسننا فهمتم الأن تريدون مثلها وبتلوينكم الخاص وصفحتكم لا بأس تابعو معانا

متطلبات التطبيق

Page ID :
API KEY :

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

صفحتي الخاصة

http://www.facebook.com/pages/alm-al...13671962014283 (http://www.facebook.com/pages/alm-alabda/113671962014283)

هذا هو الأي دي الخاصة بالصفحة

Page ID : 113671962014283

في حالة قمت بإعطاء username خاصة بصفحتك فستطيع إستخراج الأي دي عن طريق التالي

توجه لي صفحتك عن طريق رابطها باليوزر نيم كمثال من هنا



http://www.facebook.com/creativityworld

طبعا لا تنسو إفتحو كل هذا بالفاير فوكس ثم إضغط في الكيبورد على CTRL + U ثم ستفتح لك صفحة السورس إضغط على CTRL + F ثم ضع في خانة البحث التالي

رمز PHP:

<code style="white-space:nowrap"> <code> {\"profile_id\":
</code> </code>

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

اما بخصوص ال API KEY فتفضلو من هنا http://developers.facebook.com/setup

دئما يطلب منك تفعيل حسابك بالتاكيد عن طريق بطاقة الإئتمان أو رقم جوالك إختر المناسب وفعل حسابك حتى تستطيع الحصول على API ثم بعد التفعيل نعود لي هذه الصفحة http://developers.facebook.com/setup

وفي الخانات التالية

Site name: ضع هنا إسم موقعك وتذكر دئما بدون رموز أو شروط فقط كمثال ( عالم الإبداع )
Site URL: ضع رابط الموقع الي تريد تركب عليه Facebook Fanbox وأرفق بالنهاية سلاش الا وهي / ليكون كالتالي كمثال http://www.creativityworld.net/
Locale: إختر اللغة العربية

ثم إضغط Create App

بعد ذلك ستظهر لك النتائج كالتالي

اسم التطبيق: عالم الإبداع
‎App URL:‎ http://www.creativityworld.net/
معرّف التطبيق: 174537649261247
العنوان السري للتطبيق: 10ae72632fb3318719058f28f55d71bc

وكل ما نريده هو API وهو العنوان السري للتطبيق وليكن 10ae72632fb3318719058f28f55d71bc
وإنتهى

الأن تحصلنا علي جميع المتطلبات كل ما علينا فعله هو ضبط صندوق المعجبين في تباعو معاي http://www.dzbatna.com/images/smilies/smoke1.gif

قبل كل شئ الفيس بوك يقدم خدمتين لعرض المعجبين عن طريق XFBML أو IFRAME والأغلب يقول XFBML مناسبة أكثر وفي الحقيقة هي لا حيث لا حل لها مع توافق للمعايير القياسية ومعقدة بعض الشئ لم أفهم لها حيث iframe مناسبة أكثر وتستطيع جلعها موافقة للمعايير القياسية

فلهذا سنستخدم IFRAME والممكن إستخدامه عن طريق IFRAME التالي

ملاحظة :ستجدون بين كل خاصية هالوسم (&amp;) وما هو الا رمز ASCII لي & والمعايير القياسية في حالة إستخدمت & سيعتبر error بسيط ولكن لنطبق بالصحيح بإستخدام التالي (&amp;)

دلالات : false تعني لا يستخدم true يعني يستخدم وno يعني تعطيل وyes تشغيل

وكل مافي الأمر سنستخدمهم لعرض المناسب وإيقاف الغير المناسب لك شخصيا كمثال لا تريد ظهور أخر الاخبار وهو stream سيكون كتالي stream=false وفي حالة تريد إستبدل false بي true وأرفق وسم ASCII لي نقول & ثم كمثال تريد scrolbar في حالة كانت الصفحة أكبر يجب تفعيل scrolling الى yes وفي حالة لا تفعيلها الى no لتكون كالتالي scrolling=no ثم أرفق وسم & الا وهو &amp;

حسننا هنا قائمة للخاصيات الممكن إستخدامها

frameborder | تستطيع إضافة حدود على الفريم لتكون كتالي frameborder=0 كما تلاحظون هي 0 تحدد بالبكسل ان كانت واحد 1 تعني واحد بكسل
scrolling | السكرول بار المحيط بي الفريم في حالة كان حجمه أكبر من المحدد ستظهر السكرول بار كمثال كالتالي scrolling=yes
width | وهو عرض الفريم كمثال width=300 يعني عرضه سيكون 300px
height | وهو طول الفريم كمثال height=555 ويعني طوله سيكون 555px
header | وهو هيدر يظهر لونه أزرق أعلى الفريم وخاص بالفيس بوك لا افضله فكونه سيشوه لك التصميم فلهذا دئما دعه header=false
stream | وهي الأخبار الي في الصفحة راح تظهر مدروجة امم موجود في المثال ولي تكون في حالة مساحة الطول لي الفريم كافية وتلاحظها كويسة إستخدم هالخاصية تساعد في الوصل بين اعضاء الشبكة او المنتدى forum بما يحدث في صفحة الفيس بوك ولتكون كالتالي stream=true
CSS | وهذه الخاصية الأعظم والتي ستسمح لنا بتعديل تصميم صندوق المعجبين وبما يناسبونا من تلوين وتكبير الاحجام ولي تكون كالتالي css=http://www.creativityworld.net/js/tajareb/Facebook-Fanbox-Widget/cssstyle.css?ضع هنا رمق خرافي ليكون كمثال هكذا
css=http://www.creativityworld.net/js/tajareb/Facebook-Fanbox-Widget
/cssstyle.css?9984839934278934289734
وفي كل تغيير لي ملف css غير الرقم الي رقم خرافي اخر

connections | هذه خاصية عرض المتصال ومن هنا تحدد العدد الذي تريد ظهوره مثلا نريد عرض 10 صور شخصية من بروفايلات المعجبين ولتكن كذلك connections=10
api_key | هذه مهمة جدا حتى لا يظهر شعار الفيس بوك تحت facebook plugin ايضا يعطيك خيارات اضافات ملف css واضافة اللغة لي موقعك فلهذا من الضروري الحصل وعلى رقم الاي بي اي الي قمنا بإستخراجه وإضافته كتالي api_key=10ae72632fb3318719058f28f55d71bc
locale | خاصية إضافة اللغة المناسبة لي صندوق عرض المعجبين وكمثال نريد عرضها بالانجليزي تكون كالتالي locale=en_US وفي حالة عربي تكون كالتالي locale=ar_AR وهكذا

id | هنا نضع الاي دي مال الصفحة لي يكون بالنتيجة التالية id=113671962014283

http://www.connect.facebook.com/widgets/fan.php? | وهو رابط العرض دئما ما نبدا به لعرض صندوق المعجبين وان كان صندوق اللايك فقط استبدل fan.php الى like.php ومع إختلاف الخائص بالتأكيد تستطيع التعرف عليها من هنا http://developers.facebook.com/docs/plugins/ تجد هنا جميع الخاصئص للفيس بوك وإضافات أخرى

ملاحظة : توجد إضافات راح اضيفها في الكود code كإستايل style داخلي وهو ضروري لانه المتصفحات لا تستخرج عرض وحجم الفريم بالمجرد اضافته في رابط الفريم يجب إضافة إستايل style داخلي وهو إضافي كالتالي

رمز PHP:

<code style="white-space:nowrap"> <code> style="border:0px; width:العرض المراد للفريم; height:الطول المراد للفريم;"
</code> </code>

وأيضا الخصائص الي اضفناها في رابط الفريم ولكن لا اعرف لسبب ما ما تشتغل الا لمن نضيفها خارج رابط الفريم لوحدها كالتالي وتابعو الكود code في النهاية وراح تعرفو وين حطيتها

scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot;

وهنا ننتهي من الخصائص والتي أغلب ما يمكن إستخدامها وطبعا كل خاصية ترفق بعد الاخرى وبينهما كما قلت رمز & هكذا &amp;

كما تلاحظون قمة البساطة والمهم لمن لم يفهمو ما أن تتطلعو على الكود code ستفهمون كل شئ

مع هذا أظن جميع خدمات الفيس بوك يمكن تعديلها بهذه الطريقة حتى بلوجن اضافة كوممنت فقط كل ما عليك الضغط على CTRL + U ثم إستخراج كلاسات الجهات المراد تعديلها في صفحة البلوجن وإضافتها في ملف css الي وضحته فوق وتعديلها لما يناسبك وبس http://www.dzbatna.com/images/smilies/bigsmile.gif

حسننا هذا هو كود codeي النهائي

رمز PHP:

<code style="white-space:nowrap"> <code> <script type="text/javascript">
//<!&#91;CDATA&#91;
document.write('<iframe src="http://www.connect.facebook.com/widgets/fan.php?locale=ar_AR&amp;api_key=10ae72632fb3318719058 f28f55d71bc&amp;id=113671962014283&amp;connections=8&amp;css=h ttp://www.creativityworld.net/js/tajareb/Facebook-Fanbox-Widget/cssstyle.css?848947328973426734289432&amp;stream=true&amp; header=false&amp;scrolling=no&amp;height=555&amp;width=300" scrolling="no" frameborder="0" style="border:0; width:300px; height:555px;" allowTransparency="true"></iframe>');
//&#93;&#93;>
</script>
</code> </code>

بداية وسم الجافا سكربت ثم إستخدمت إخفاء المحتوى عن قياس المعايير القياسية حتى لا يأثر الفريم بأخطائه التي ليس لها ضرر أبدا وهو الكود code //<![CDATA[ضع هنا الكود code المراد اخفائه عن موقع validator.w3.org//]]> ثم جلبنا الفريم عن طريق document.write('هنا الفريم'); حتى يتم إخفاء المحتوى على أنه جافا سكربت وتخطيه عند الفحص وهي أفضل طريقة لجعل المحتوى valid xhtml حيث نزلت طرق كثيرة وأغلبها لم تفلح الا لبعض الوقت ولكن طريقتي الحمد لله من شهر 5 2014 وماواجهتني مشكلة فيها ابد وبهكذا أغلقنا الأوسمة وتم هذا الكود code نهائيا

امم نختتم الشرح طريقة وهذا ما بوسعي فعذرا ان كان هنالك شئ غير مفهوم جيدا والحقوق دئما نراعيها تم الإستعانة بموقع في جلب طريقة عرض css وتعديلها كوني مشغول ما فضيت العدل الخصائص من الصفر http://www.dzbatna.com/images/smilies/nosweat.gif

وأي إستفسار او ملاحظة أمر وبس http://www.dzbatna.com/images/smilies/shiny01.gif

ودي

والسلام عليكم ورحمة الله وبركاته

اخوكم Honourable

جميع الحقوق محفوظة لي منتديات عالم الإبداع وديزاد باتنة فقط http://www.dzbatna.com/images/smilies/thumbdown.gif






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى