پیش تر کد HTML مورد نیاز برای ساخت یک فیلد Like مربوط به صفحه فیسبوک سایت ساختیم. حالا با استفاده از کد به دست آمده فیلد Like را به صفحه خانه سایت مان اضافه می کنیم.
- فایل FacebookLikeBox.html را که به تازگی ساختیم باز کنید.
- تمام کد موجود در این فایل را کپی نمایید.
- Index.html را باز کنید(صفحه خانه سایت مان).
- مارک آپ iframe کپی شده را دقیقاً بعد از عکس غواص ها پِیست نمایید.
در انتهای صفحه پاراگرافی در توصیف فیلد Like مربوط به صفحه فیسبوک مان اضافه خواهیم کرد:
All details of the group’s diving activities, trips, and so on will be
available from the various pages on this site but, in addition, we’ve
got a Facebook page! If you’re on Facebook, please do check it out.
All the updates we post on Facebook will also appear here in this
little box on the right (so even if you’re not a Facebook fan, you can
see our latest updates).
در نهایت مارک آپ ما به شکل زیر در می آید:
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img class="feature" src="divers-circle.jpg" width="200"
height="162" alt="A circle of divers practice their skills" />
</p>
<iframe src="http://www.facebook.com/plugins/likebox.php?➥
href=http://www.facebook.com/pages/Bubble-Under%➥
2F156732361048951?sk=wall&width=292&➥
colorscheme=light&show_faces=true&stream=true&➥
header=true&height=427" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:292px;
height:427px;" allowTransparency="true"></iframe>
<p>Glad you could drop in and share some air with us! You've passed
your underwater navigation skills and successfully found your way to
the start point — or in this case, our home page.</p>
<p>All details of the group's diving activities, trips, and so on
will be available from the various pages on this site but, in
addition, we've got a Facebook page! If you're on Facebook, please
do check it out. All the updates we post on Facebook will also
appear here in this little box here on the right (so even if you're
not a Facebook fan, you can see our latest updates).</p>
صفحه را ذخیره کرده و نتیجه را در مرورگر مشاهده نمایید، همانطور که می بینید هنوز کار داریم
ابتدای کار اضافه کردن لینک مربوط به صفحه فیسبوک سایت، ظاهر آشفته کار به راحتی درست خواهد شد.
فضای خالی زیادی بر جای ماند. این عکس را عمداً به شما نشان دادیم تا ایراد کار را به خوبی ببینید، جعبه مربوط به صفحه فیسبوک در سایت ما هنوز به درستی جای نگرفته است!
کاری که باید انجام دهیم:
- جعبه Like را به درستی در کنار عکس غواص ها جای خواهیم داد.
- هر دوی این آیتم ها را—عکس و جعبه فیسبوک—در قسمت راست صفحه Float می کنیم، به طوری که باقی محتوا به خوبی در اطراف آن ها قرار گیرند. مشابه این کار را پیش تر انجام داده بودیم.
اقدام اول ما یکسان کردن ابعاد هر دوی تصویر و جعبه فیسبوک است. با نگاهی گذرا به تگِ <img> می بینیم که عرض آن 200 پیکسل است. برای تغییر ابعاد جعبه Like فیسبوک دو تغییر در تنظیمان اضافه می کنیم، تغییراتی که در کدهای پایین به صورت پر رنگ تر نشان داده شده اند:
<iframe src="http://www.facebook.com/plugins/likebox.php?➥
href=http://www.facebook.com/pages/Bubble-Under%➥
2F156732361048951?sk=wall&width=200&➥
colorscheme=light&show_faces=true&stream=true&➥
header=true&height=427" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:200px;
height:427px;" allowTransparency="true"></iframe>
تغییر دوم ما این است که تصویر و جعبه Like را بر روی یک دیگر قرار دهیم. برای این کار باید هر دو را درون یک div قرار دهیم. پیش تر یک کلاسِ feature بر تصویرمان اعمال کرده بودیم، آن را حذف کرده و به جایش یک کلاسِ aside تعریف می کنیم. HTML نهایی به صورت زیر در می آید:
<div class="aside">
<img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" />
<iframe src="http://www.facebook.com/plugins/likebox.php?➥
href=http://www.facebook.com/pages/Bubble-Under%➥
2F156732361048951?sk=wall&width=200&colorscheme=➥
light&show_faces=true&stream=true&header=true&➥
height=427" scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px; height:427px;" allowTransparency➥
="true">
</iframe>
</div>
<p>Glad you could drop in ... </p>
در آخر باید کد CSS اعمال شده بر تصویر را تغییر دهیم. کد بدون تغییر ما به این صورت است:
img.feature {
float: right;
margin: 10px;
}
CSS زیر را جایگزین نمایید:
.aside {
float: right;
margin: 10px;
width:200px;
}
Float کردن سایت ما را جمع و جور کرده است.
حالا بهتر شد! اگرچه محتوای کم صفحه خانه سایت با مجموع ارتفاع تصویر غواص ها و جعبه Like نمی خواند، قطعاً می توانیم محتوا را بیشتر کنیم اما راه دیگر کم کردن عرض جعبه Like است که آن را به شما می سپرایم
با اعمال تغییرات جدید به جعبه Like سایت ما به این صورت در می آید.
به یاد داشته باشید که در صورت نیاز به کمک آرشیو کدهای کتاب در خدمت شما است(Chapter8/website_files/03_FacebookLikeBox_ResizedHeight/index.html).
اعمال تغییرات به Width و Height به صورتی ساده تر
در مثال قبل به شما آموختیم که چگونه مارک آپ به دست آمده جعبه Like را به صورت دستی تغییر اندازه دهید. اما راه دیگر در همان ابتدای کار و در همان فیسبوک پیش از به دست آوردن مارک آپ است، البته اگر از همان ابتدا اندازه های مورد نیاز خود را بدانید. این کار را بعد از به دست آورد کد از طریق فیسبوک انجام دادیم تا راه ایجاد تغییرات در مارک آپ های آماده را بدانید.
بله! همه من را Like می کنند! من آدم دوست داشتنی هستم!!!
بله، حالا می توانند—البته با فرض بر اینکه آن ها اکانت فیسبوک داشته باشند و page شما را نیز Like کنند. زمانی که فردی کلید Like صفحه شما را در فیسبوک بزند در اکانت شما یک notification مبنی بر اینکه، برای مثال "Fred Likes Bubble Under" خواهد آمد.
حیله بر این اساس است که حالا تمامی بروزرسانی های سایت از طریق فیسبوک به مخاطب اعلام می شود و از همان فیسبوک نیز مخاطب های زیادی با سایت آشنا خواهند شد.
Like شده اید اما هنوز online نیستید
هنوز در رابطه با Online شدن سایت حرفی نزده ایم. فیسبوک ما به خوبی تنظیم شده و فعال است اما سایت اصلی هنوز هم از تعدادی فایل، عکس و پاراگرافی تشکیل شده که تنها در هارد کامپیوترمان جا خوش کرده اند. در فصل نهم به مباحث مربوط به Online کردن سایت خواهیم پرداخت و آن زمان است که صفحه فیسبوک به وجود آمده مخاطب ها و دوستان ما را با سایت اصلی آشنا خواهد کرد.
