شلة اصحاب على النت

Bookmark


الاعلان فى المنتدى مفتوح مجانا امام كل صديق  معنا بمنتدى الشلة
عليه فقط الضغط هنا وكتابة رسالة بطلب الاعلان
سمى الله واضغط هنا واكتب رسالتك

http://up.progs4arab.com/uploads/de0bdf66b3.jpg
http://up.progs4arab.com/uploads/00fa7905f7.jpg






اول موقع مصري عربي لتحميلات و شرح برامج و بوتات سرفرات Xmpp/Jabber باللغه الأنجليزيه لمنافسه المرمجين الروسين و الايرانين و الاندونيسين بلغتهم
او اللغه الثانيه في كل انحاء العالم ارجو منكم الزياره و الدعم.... بواسطه: محمد جمال 201225516116+



    شرح طريقة التعامل واستخدام تطبيق Static FBML والاستفادة منه على صفحات الفيس بوك بالصور100%

    شاطر

    محمود عبدالله
    مدير عام المنتدى
    مدير عام المنتدى

    زقم العضويه : 1
    عدد المساهمات : 7874
    نقاظ : 15095
    السٌّمعَة : 44
    تاريخ التسجيل : 29/12/2009
    العمر : 47
    الموقع : مصر

    m10 شرح طريقة التعامل واستخدام تطبيق Static FBML والاستفادة منه على صفحات الفيس بوك بالصور100%

    مُساهمة من طرف محمود عبدالله في السبت أكتوبر 29, 2011 9:50 pm



    <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="33%">
    </td>
    <td width="33%">
    </td>
    <td width="33%">
    </td>
    </tr>
    </table>


    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td> <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td valign="top" width="52%">
    </td>
    <td width="43%">







    </td>
    <td width="5%">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td> <table id="table12" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td align="center" width="22%">
    </td>
    <td align="center">

    شرح طريقة التعامل واستخدام تطبيق Static FBML والاستفادة منه على صفحات الفيس بوك بالصور100%
    </td>
    <td align="center" width="22%">

    مشاركة41

    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>


    الحمد لله رب العالمين والصلاة والسلام على أشرف الأنبياء وسيد المرسلين وبعد ،،،

    نظرا لعدد الاستفتسارات الكبير حول وضع بلوكات على جانب صفحات الفيس بوك Facebook وتبويبات اضافية باستخدام تطبيق Static FBML
    فأحببت ان أجيب عن هذا التساؤل بدرس خاص من دروس دورتنا ،مع أني كنت اود طرحه في المحور الثالث وهو محور صفحات الفيس بوك ...

    طبعا (FBML)هي ختصار لكملة Facebook Markup Language ، وتعني لغة ترميز الفيس بوك .


    ما هي فائدة تطبيق Static FBML ؟

    يسمح لنا تطبيق static FBML ، بإضافة صفحات على شكل تبويب ثابت على صفحتنا وكذلك صناديق جانبية على صفحات الفيس بوك
    يمكن
    الاستفادة منها بوضع تصاميم خاصة باستخدام أكواد html ، وإضافة صور وعداد
    زوار وغيره في الصناديق الجانبية ، وكما هو مشاهد في عدد من صفحات
    الفيس بوك .


    كيف نضيف تطبيق static FBML إلى صفحاتنا على الفيس بوك Facebook؟


    في البداية لابد ان يكون لك صفحة على فيس بوك ولإنشاء صفحة على الفيس بوك اتبع هذا الرابط :

    Create a Page | Facebook


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

    الآن لنبدأ شرح اضافة تطبيق Static FBML واستخدامه على صفحاتنا ولنشاهد الصور التالية :

    ادخل على صفحتك التي تديرها ولتكن صفحة
    دروة كيف تحترف استخدام الفيس بوك (مجانا)


    سنجد أسفل صورة الصفحة ، رابط تعديل الصفحة قم بالضغط عليه :






    ستظهر
    لك الآن صفحة التعديل الخاصة بصفحتك ، أنزل إلى نهاية الصفحة ستجد في
    النهاية تطبيقات أكثر اضغط على ثابت FBML بـ (Static FBML)






    <table id="ncode_imageresizer_warning_2" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20"></td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>




    ستنتقل إلى صفحة التطبيق ، وتجد أسفل صورة التطبيق رابط بمسمى إضافته إلى صفحتي قم بالضغط عليه :




    <table id="ncode_imageresizer_warning_1" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20">
    </td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>




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







    نعود
    الآن إلى صفحتنا التي اضفنا عليه التطبيق ، ونضغط على تعديل الصفحة ، سنجد
    بأن تم اضافة التطبيق على الصفحة بالمسمى التالي FBML ، قم الآن بالتعديل
    على التطبيق اضغط على تعديل:




    <table id="ncode_imageresizer_warning_4" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20">
    </td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>






    ستظهر
    لنا الآن صفحة التعديل على التطبيق ، سنقوم بإختيار عنوان الصندوق ، ونقوم
    بوضع المحتوى سواء نصوص أو كود html كما نشاهد في هذه الصور :




    <table id="ncode_imageresizer_warning_3" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20"></td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>




    <table id="ncode_imageresizer_warning_5" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20"></td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">هذه الصورة تم اعادة تحجيمها . الحجم الافتراضي لها هو 704x498.</td>
    </tr>

    </table>



    بعد
    حفظ التغييرات ننتقل الآن إلى الصفحة وسنجد بأنه تم ادراج تبويب جديد
    وبالاسم الذي اخترناه والمحتوى الذي وضعناه على تطبيق static FBML :




    <table id="ncode_imageresizer_warning_6" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20"></td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>



    <table id="ncode_imageresizer_warning_8" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20"></td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>



    الآن لو أردنا جعل هذا التبويب الجديد هو التبويب الرئيسي المشاهد لزوار الصفحة نتبع هذه الخطوات :

    من تعديل الصفحة ومن صفحة التعديل نضغط على خيار تعديل اعدادات الحائط كما في الصورة :






    ثم نختار الصفحة الافتراضية لكل الباقين هي الصفحة التي أنشأناها كما في الصورة التالية :







    ثم عودة إلى الصفحة من جديد وعند دخول أحد الزوار (أي غير منضم إلى الصفحة )
    فسيظهر له التبويب الذي قمنا بإنشائه والتعديل عليه كما مشاهد في الصورة التالية :




    <table id="ncode_imageresizer_warning_7" class="ncode_imageresizer_warning" style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BACKGROUND-COLOR: #ffffe1; COLOR: #000000; BORDER-TOP: #cccccc 1px solid; CURSOR: pointer; BORDER-RIGHT: #cccccc 1px solid; background-origin: initial; background-clip: initial" border="0" width="700">

    <tr>
    <td class="td1" style="PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none; PADDING-TOP: 2px" width="20">
    </td>
    <td class="td2" style="FONT: 10px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; VERTICAL-ALIGN: middle; TEXT-DECORATION: none">
    </td>
    </tr>

    </table>






    نود الآن أن ننتقل إلى جزئية أخرى وهي كيفية عمل صندوق جانبي على صفحات الفيس بوك باستخدام تطبيق Static FBML ؟

    نضغط على تعديل الصفحة ، ومن خلالها نذهب إلى الصفحة التي قمنا بإضافتها قبل قليل باستخدام تطبيق Static FBML ،
    لإضافة واحد جديد واستخدامه كصندوق جانبي على صفحتنا شاهد الصور التالية :

    هذه
    هي الصفحة التي قمنا بانشائها قبل قليل نضغط على تعديل ومن صفحة التعديل
    نأتي إلى نهاية صفحة التعديل الخاصة بتطبيق FBML نجد رابط اضف مربع إضافة
    لغة الفيس بوك آخر كما في الصور التالية :













    الآن نقوم بالتعديل على الاضافة الجديدة ، وسنجعلها عداد زوار وسنستخدم كود لعداد زوار من الموقع التالي :
    Flag Counter » free counters - collect flags - learn about your visitors! ، وشاهد معنا بالصور كيفية عمل ذلك :











    الآن
    نأتي لخطوة مهمة وهي لنجعل التطبيق يظهر كصندوق جانبي ، نضغط على تعديل
    التطبيق ومن ثم تظهر نافذة نختار من أضف امام كلمة صندوق ،
    ويمكن أن نزيل التبويب فنضغط على إزلة أمام كلمة تبويب كما في الصور التالية :









    نعود الآن لعرض الصفحة من جديد وننتقل إلى تبويب الصناديق كم في الصور التالية :









    سنجد الصندوق الذي قمنا بإضافته سنجري عليه تعديل كما في الصور التالية :









    نعود الآن إلى لصفحة وسنجد بأنه ظهر كصندوق جانبي على الصفحة :







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

    أتمنى أن أكون قد وفقت في شرح طريقة استخدام تطبيق Static FBML ، لكم تحياتي


    =========================================



    انتهى الموضوع... يمكنك التعليق
    على الموضوع في الاسفل





    [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]




    Folica Hair Care

    محمود عبدالله
    مدير عام المنتدى
    مدير عام المنتدى

    زقم العضويه : 1
    عدد المساهمات : 7874
    نقاظ : 15095
    السٌّمعَة : 44
    تاريخ التسجيل : 29/12/2009
    العمر : 47
    الموقع : مصر

    m10 رد: شرح طريقة التعامل واستخدام تطبيق Static FBML والاستفادة منه على صفحات الفيس بوك بالصور100%

    مُساهمة من طرف محمود عبدالله في السبت أكتوبر 29, 2011 9:56 pm

    [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



    [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]




    Folica Hair Care

      الوقت/التاريخ الآن هو الإثنين ديسمبر 05, 2016 3:23 am