موضوع هام للمدونين واصحاب المواقع
وقد الفيسبوك مشغول جدا استكمال كيف تتم الأمور، وأحد التغييرات هو كيف تقوم بإنشاء علامة التبويب تطبيق IFRAME.
على الرغم من أن مفهوم إلى حد كبير نفس، قد تغيرت واجهة لإنشاء التطبيق التبويب الفيسبوك IFRAME. هذا البرنامج التعليمي بتحديث البرنامج التعليمي فعلناه في هذا الموضوع في وقت سابق من هذا العام.
ما هو تطبيق الإطار من؟
تطبيق الإطار من أنت يسمح لك بإضافة صفحة ويب الخارجية في العرف علامة التبويب صفحة الفيسبوك الخاصة بك. بك "مؤشر" أو "قماش" صفحة مستضافة في الواقع في الخادم غير الفيسبوك وتحيط به الفيسبوك "الكروم" (عناصر الفيسبوك على الصفحة).
لأن هذه الصفحة ضمن إطار iframe لا استضافت في الفيسبوك، فإنه يمكن استخدام HTML القياسية، CSS، وجافا سكريبت مثل أي صفحة ويب أخرى لا. تتم التفاعل مع المحتوى الفيسبوك باستخدام الفيسبوك أدوات تطوير البرامج (عدد تطوير البرامج) و علامات XFBML. (لهذا البرنامج التعليمي، غير مطلوب SDK الفيسبوك).
الجانب السلبي لهذا النهج هو أن عليك أن تكون على دراية تلك التكنولوجيات، وسوف تحتاج إلى خادم الويب للوصول حيث يمكنك تحميل الملفات لصفحة التطبيق الخاص بك. أو يمكنك إضافة تطبيق الإطار من خلق لصفحتك، مثل TabPress ، وتحرير لك من الحاجة إلى إنشاء تطبيق الفيسبوك ولكن أكثر تقييدا في أنه لا يمكن السيطرة على الرمز الذي يظهر بجانب اسم علامة التبويب في التنقل الأيمن.
إعداد الخادم الخاص بك
الفيسبوك في HTTPS / تأمين استضافة شرط
أول شيء يجب أن نعرفه هو أنه أينما استضافة صفحة الفهرس لتطبيق الفيسبوك الإطار من الخاص بك، سيقوم الملقم يجب أن تكون آمنة، أي لديها شهادة أمان SSL لالمجال الذي استضافته ذلك.
أول شيء يجب أن نعرفه هو أنه أينما استضافة صفحة الفهرس لتطبيق الفيسبوك الإطار من الخاص بك، سيقوم الملقم يجب أن تكون آمنة، أي لديها شهادة أمان SSL لالمجال الذي استضافته ذلك.
إذا لم يتم استضافتها صفحة الفهرس الخاص بك على URL آمن SSL، أو لم تقم بتحديد عنوان URL الآمنة في إعدادات التطبيق، فإن علامة التبويب يتم عرض لأولئك الذين يستخدمون الفيسبوك تحت التصفح آمن. بدلا من ذلك، سوف يرى المستخدم:
والموجودات الأخرى ودعا إلى صفحتك (الصور وجافا سكريبت، CSS، فيديو، الخ) يتعين أيضا استضافته ضمن HTTPS. ونحن نوصي الأمازون S3 لاستضافة هذا، ويتم تناول هذا أيضا في المادة HTTPS لدينا .
إنشاء تطبيق الإطار من الخاص بك
على الخادم الخاص بك آمن ويب، إنشاء دليل لتطبيق الإطار من الخاص بك. في هذا المثال، على الخادم لدينا نحن إنشاء دليل جديد يسمى "الفيسبوك" ثم دليل فرعي يسمى "mytestapp". ومسار الملف ننظر بشيء من هذا القبيل في برنامج FTP الخاص بك:
هل تريد أن تضع كل الملفات (HTML، CSS، جافا سكريبت، PHP، الخ) في المجلد "mytestapp" أو الدلائل الخاصة به. إذا كنت لا تعرف كيفية القيام بذلك، وقراءة هذهبروتوكول نقل الملفات البرنامج التعليمي .)
ملف HTML
تذكر، في ملف HTML الخاص بك يمكنك استخدام CSS - ويؤدي تضمين الأنماط مع <نمط> ... </ النمط> علامات يعمل بشكل جيد مع الملفات ذات الإطارات المضمنة HTML - وجافا سكريبت (! لا تستخدم FBML أو FBJS) .
فأنت تريد أن تعيين DIV الحاويات الرئيسي للمحتوى الخاص بك إلى 520 بكسل. وإليك مثال تجريد لأسفل جدا من ملف HTML الخاص بك:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="container">
<p>This is some HTML content</p>
</div>
</body>
</html>
في المثال أعلاه، وتشمل كلا من رمز لأنماط خارجية تسمى مع <رابط /> العلامة، وكذلك أساليب inlined دعا مع <نمط> ... </ النمط> العلامات، في حال كنت تريد أن تفعل ذلك بهذه الطريقة . إما أن تعمل بشكل جيد.
تثبيت الفيسبوك المطور التطبيق
الخطوة الأولى في إنشاء تطبيق في Facebok هي لتثبيت الفيسبوك التطبيق المطور.
للقيام بذلك، قم بتسجيل الدخول إلى الفيسبوك ثم قم بزيارة URLhttp://facebook.com/developers .
إذا كانت هذه هي المرة الأولى التي قمت بتثبيت التطبيق المطور، سترى طلب عرض الحوار إذن أدناه:
انقر فوق السماح زر للمتابعة.
إنشاء تطبيق الإطار من الخاص بك
الآن أن لديك المطور التطبيقات المثبتة، انقر على خلق التطبيقات الجديدة زر.
إعطاء التطبيق الخاص بك "عرض التطبيقات اسم" (الاسم المعروض للمستخدمين) و "المجرد" (للاستخدام مع توسيع الرسم البياني - 8 أحرف كحد أدنى، ألفا، شرطات ويؤكد فقط - الاستمرار في المحاولة حتى تحصل على النطاق الذي هاسن ' ر استخدمت). ثم وضع علامة في خانة "أنا أوافق على سياسات منصة الفيسبوك". ثم انقر على مواصلة زر.
على الشاشة التالية، أدخل العبارة الأمن وثم انقر فوق إرسال .
هناك الكثير من الخيارات التي يمكن قرص ذات الصلة إلى التطبيق الخاص بك. في هذا المنصب، ونحن نذهب إلى التركيز على الأساسيات اللازمة للحصول على التطبيق الخاص بك علامة التبويب الإطار من وتشغيلها.
في علامة التبويب إعدادات
هذا هو المكان الذي به مجموعة أساسية تصل للتطبيق.
أولا، في الجزء العلوي، سترى التطبيقات معرف والتطبيقات القيم السرية. في معظم الأحيان عليك أن تكون باستخدام اسم المستخدم الخاص بك التطبيقات للتكامل مع الفيسبوك.
ثانيا، لاحظ "تحرير رمز" دون التطبيقات السرية. هذا هو الرمز الذي سيظهر على يسار اسم علامة التبويب في الملاحة الصفحة الخاصة بك، حتى جعله فتت الانظار وجعل أبعاد 16 × 16 بكسل. إذا لم تقم بإنشاء رمز الخاص بك، والتبويب لديك رمز الفيسبوك التبويب عام:
معلومات أساسية :
- التطبيق اسم العرض: جعل هذا نفس القيمة الأصلية التي قدمتها.
- التطبيق النطاق: جعل هذا نفس القيمة الأصلية التي قدمتها.
- البريد الإلكتروني: أين تريد الفيسبوك لإرسال رسائل البريد الإلكتروني فيما يتعلق التطبيق الخاص بك؛
- التطبيق المجال: وضعت للتو "mydomain.com" حيث "mydomain.com" هو الخادم الخاص بك آمن استضافة.
- الفئة: حدد فئة من القائمة المنسدلة.
الخدمات السحابية
منذ الفيسبوك وضعت شرط HTTPS من أجل جميع التطبيقات، والتي تقدم حلولا سحابة استضافة لأولئك الذين يجدون انشاء حساب استضافة وخادم آمن الكثير من عناء، حساب أو كليهما. ولكن فوق تعرف على المزيد إذا كنت مهتما.
منذ الفيسبوك وضعت شرط HTTPS من أجل جميع التطبيقات، والتي تقدم حلولا سحابة استضافة لأولئك الذين يجدون انشاء حساب استضافة وخادم آمن الكثير من عناء، حساب أو كليهما. ولكن فوق تعرف على المزيد إذا كنت مهتما.
تحديد كيفية يتكامل التطبيق الخاص بك مع الفيسبوك
هذا هو المكان الذي حدد نوع التطبيق الذي تقوم بإنشاء وكيف يتكامل مع الفيسبوك.
وشرح لقيم الفيسبوك التكامل
لأغراض هذا البرنامج التعليمي، وسوف تختار "صفحة علامة تبويب" من الخيارات المختلفة التكامل. انها آخر واحد المدرجة ولكن مرة واحدة كنت قد قمت بحفظ التغييرات يتم سرد لأول مرة (كما في المثال أعلاه).
- صفحة علامة تبويب الاسم: الاسم المعروض من علامة التبويب في الصفحة الملاحة؛
- صفحة علامة تبويب URL: عنوان URL غير آمن (HTTP) من صفحة الفهرس الخاص بك - إذا كانت الصفحة مؤشر يدعى إما "index.html و" أو "index.php" يمكنك فقط وضع الدليل مع شرطة مائلة للأمام (كما هو الحال في بلدي على سبيل المثال أعلاه )؛أو يمكنك تحديد اسم الملف في الدليل، على سبيل المثال myapp.html أو myapp.php.
- تأمين صفحة تبويب URL: نفس في "صفحة علامة التبويب URL" ولكن مع HTTPS بدلا من HTTP.
- صفحة علامة التبويب تحرير URL: يمكنك إنشاء أي عنوان في المجال الخاص بك هنا ثم قم بإعداد هذا العنوان لإعادة توجيه إلى صفحة تحرير لعلامة التبويب الفيسبوك. وعادة يتم ذلك باستخدام 301 أو 302 إعادة توجيه. أنا لا تغطي 301/302 الموجهات في هذا البرنامج التعليمي.
إذا كنت تنوي استخدام المكالمات إلى الفيسبوك جافا سكريبت SDK على علامة التبويب - اضافة "التطبيق على الفيسبوك" القيم
إذا كنت ترغب في استخدام الفيسبوك جافا سكريبت SDK في علامة تبويب الصفحة - على سبيل المثال، لدينا حصة زر لعلامات التبويب الصفحة - سوف تحتاج أيضا لتحديد التكامل "التطبيق في الفيسبوك"، وإضافة قيم URL نفس ل "صفحة علامة تبويب" :
ملاحظة: إن "التطبيق في الفيسبوك" URL يجب أن تكون دليل، وليس ملف محدد:
http://www.myDomain.com/facebook/mytestapp/
ليس
http://www.myDomain.com/facebook/mytestapp/mycanvaspage.php
حتى إذا كنت بحاجة إلى تحديد عنوان URL "التطبيق في الفيسبوك"، ستحتاج إلى استخدام "index.html و"، "ملف index.htm" أو "index.php" لاسم الملف من صفحة قماش.
ويتم ملؤها تلقائيا قيمة "قماش ل" بواسطة الفيسبوك، مع قيمة النطاق الخاص بك.
انقر على "حفظ التغييرات" والانتهاء من ذلك!
تثبيت تطبيق الإطار من الخاص بك على صفحة المعجبين
تحديث - 9 ديسمبر 2011: الفيسبوك هو في عملية إزالة التطبيق الملف الشخصي ل تماما، وأضافت طرق جديدة لإضافة التطبيقات إلى صفحة المعجبين بك. قراءة مقالتي على إزالة الفيسبوك من التطبيق الملف الشخصي ل .
إذا كان تطبيقك فقط لإضافة علامة تبويب الصفحة لديك صفحة الفيسبوك، وليس التطبيق الذي تريد أن تتيح لعدة صفحات، يمكنك ببساطة انتقل إلى هذا العنوان في المتصفح الخاص بك:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
استبدال "YOUR_APP_ID" مع الخاص بك معرف التطبيق و"YOUR_URL" مع قماش URL التطبيقات الخاصة بك، سواء من القيم التي تتوفر في حياتك إعدادات التطبيق .
سترى صفحة مماثلة لهذا أقل من واحد عند الانتقال إلى هذا العنوان:
بعد تحديد الصفحة من القائمة المنسدلة والنقر على "إضافة علامة تبويب الصفحة،" يجب أن تظهر التطبيق الإطار من الخاص بك الآن على صفحة المعجبين الخاصة بك. إذا كنت لا أرى ذلك هناك على الفور، قد تحتاج إلى ضبط إعدادات الصفحة الخاصة بك. من الصفحة مروحة، انقر على زر "تحرير الصفحة" في الزاوية العلوية اليمنى من الصفحة الخاصة بك. ثم انقر على "تطبيقات" والعثور على التطبيق الذي قمت بإضافته. اضغط على "تعديل الإعدادات" وستحصل على الحوار المنبثقة هذا:
- التبويب: إذا كان يقول "المتوفرة (إضافة)"، انقر فوق "إضافة" لإضافته إلى قائمة التصفح الخاص بك؛ إذا كان يقول "واضاف (إزالة)"، انت حددت.
- مخصص تبويب اسم : يمكنك تجاوز اسم علامة التبويب الافتراضية عن طريق إدخال اسم جديد في هذا المجال، وتصل إلى 32 حرفا، ثم النقر فوق "حفظ".
انقر على زر "موافق" لحفظ التغييرات.
استكشاف الأخطاء وإصلاحها
بناء على ملاحظات لهذا المنصب، وبدأنا في تجميع بعض الإطار من التطبيقات استكشاف الأخطاء وإصلاحها نصائح. سنقوم بتحديث هذا القسم من الأسئلة الجديدة بعض ما يصل.
تحقق عناوين المواقع الخاصة بك!
تأكد من أن عنوان الموقع الذي وضع للالإطار من الخاص بك هو الصحيح. حاول الوصول إليه مباشرة، عن طريق المتصفح الخاص بك، بدلا من طريق التبويب الصفحة الخاصة بك. عناوين URL السيئة هي المشكلة الأكثر شيوعا. إذا كان عنوان URL لصفحة ويب أو الصورة التي تريد في علامة التبويب الإطار من الصفحة الخاصة بك غير صحيحة، من الواضح أن علامة التبويب لا تعمل.
يمكنك أيضا اختبار صحة URL الخاص بك عن طريق بزر الماوس الأيمن فوق منطقة حيث يجب أن يكون محتوى الإطارات المضمنة ومن ثم حدد "هذا الإطار: إطار فتح في إطار جديد" أو شيئا من هذا القبيل (ويعرض كل متصفح هذا الخيار بشكل مختلف قليلا).
تأكد من أنك قد حددت HTTPS / URL الآمنة لتطبيق صفحة علامة التبويب الخاصة بك. إذا لم تقم بذلك، فإن علامة التبويب يتم تحميل للأشخاص الذين يستخدمون الفيسبوك مع التصفح الآمن تفعيلها.
إذا كنت لا تستطيع إضافة تطبيق الفيسبوك صفحة علامة التبويب الخاصة بك إلى صفحة
الناس في كثير من الأحيان الإبلاغ عن هذه المشكلة، وسوف السبب المرجح أن تكون واحدة مما يلي:
- لقد سبق وأن أضفت التطبيق على الصفحة الخاصة بك: انقر على زر "تحرير الصفحة" في أعلى يمين الصفحة الخاصة بك. ثم انقر فوق "تطبيقات" في العمود الأيسر من منطقة المشرف. للبحث عن وصفحة تبويب التطبيق. انقر على "تعديل الإعدادات" وتأكد من أنه في الحوار المنبثقة التي تقول "واضاف (إزالة" وليس "المتوفرة (إضافة)".
- كنت لا المسير من الصفحة التي تريد إضافة التطبيق.
- في إطار مجال التطبيق "إعدادات> خيارات متقدمة"، وكنت قد وضعت "مصادقة> وضع الحماية" إلى "تمكين" . هذا يحد من القدرة على إضافة التطبيق إلى صفحة لمطوري التطبيق فقط.
- انها الفيسبوك علة / خلل: نعم، هذا يمكن أن يكون السبب.
رسائل خطأ من الخادم الخاص بك (خطأ 405 - فعل HTTP أو ما شابه ذلك)
في حالة عودة الخادم الخاص بك خطأ عندما يحاول الفيسبوك لتحميل صفحة HTML في الإطار من، قد تحتاج لتغيير امتداد الملف من هتمل إلى .php أو .aspx اتصال (اعتمادا على منصة الخادم الذي تستخدمه). عند تحميل الفيسبوك في الإطار من، يفعلون POST إلى صفحة الفهرس من أجل تمرير بعض البيانات إلى التطبيق الخاص بك ويبدو أن يتم تعيين بعض خوادم حتى لا تسمح POST إلى الملف مع امتداد .html. فإننا سوف نلقي نظرة على كيفية الوصول إلى البيانات التي يمر الفيسبوك في البرنامج التعليمي القادمة، ولكني أردت أن أذكر هذا الآن لأنها تسبب مشاكل لبعض الناس.
API رمز الخطأ: 191 قافزة الحوار
إذا كنت تحصل على "API رمز الخطأ: 191" خطأ الحوار المنبثقة:
عند استخدام حصة زر جزءا لا يتجزأ أو الميزة الأخرى التي تتطلب الفيسبوك جافا سكريبت SDK ، فإنه قد يكون لديك لم يتم تحديد "التطبيقات في الفيسبوك" عناوين المواقع. انظر أعلاه للحصول على التفاصيل.
أشرطة التمرير - التخلص منهم!
إذا تسبب محتوى الإطار من الخاص بك شريط التمرير الأفقي في الظهور، وهو أمر يسبب عرض يتجاوز 520 بكسل، وهو الحد الأقصى الذي يسمح الفيسبوك. قراءة لدينا البرنامج التعليمي على استكشاف الأخطاء وإصلاحها والقضاء على التمرير الإطار من .
نحن نوصي بإضافة بعض CSS (إما مضمنة كما هو موضح أدناه أو في ملف CSS منفصل بك) لإزالة الهامش، الحشو، والحدود من عناصر افتراضيا. العديد من المتصفحات اضافة تباعد حول بعض العناصر التي الافتراضية التي يمكن أن تتسبب في التمرير لتظهر بشكل غير متوقع.
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>الخطوات التالية
كنا نحب أن نسمع ما كنت أود أن أرى في هذه السلسلة - إذا كنت ترغب في معرفة كيفية القيام بشيء معين باستخدام تطبيقات الإطار من، مجرد ملاحظة ذلك في التعليقات وسوف نرى ما يمكننا القيام به.
