Blog Siteleri İçin Açılır-Kapanır Facebook Beğen Kutusu Oluşturma

Blogger sitelerinde Facebook popülaritesinin artmasıyla kullanım koşulları da her geçen gün artan talep üzerine blogcular için, açılır-kapanır Facebook beğen kutusunu paylaşıyoruz.

Facebook beğen kutusu, blog sitelerinin Facebook sayfalarının hem beğenme sayısını artırma hem de Facebook sayfasından blog takibinin artmasına yardımcı olan önemli bir eklentidir.

Facebook beğen kutusu çalışma sitemi, bilgisayarınızın imlecini buton üzerine getirdiğinizde basit jQuery sayesinde otomatik olarak açılır ve kapanır.

Facebook beğen kutusunu blog sitenize eklemek için aşağıdaki adımları takip edin.

Blogger Sitesine Açılır-Kapanır Facebook Beğen Kutusu Ekleme

Blogger hesabınıza giriş yapın ve eklemek istediğiniz blogun kumanda panelini açın ve aşağıdaki adımları takıp edin.

Birinci adım: Blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki CSS kodunu blogunuzun </head> kodunun bir satır üzerine ekleyin.

CSS Kodu

<style>
/*<![CDATA[*/
#fb_like_box{display:block;padding:0;z-index:99999;position:fixed}
.fb_like_box_button{background-color:#3B5998;display:block;height:150px;top:50%;margin-top:-75px;position:absolute;right:-47px;width:47px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAACWCAMAAAB5PCEjAAAAvVBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9o6qWPAAAAPnRSTlMAG8ITUdoJoazyBTACgvoPt4top5ed3b7HsnjvfZZKYIVcbODTV3RDmpJwQDv49dgeZOkWzEYm4itNNeznj0ydlzQAAAO6SURBVFjD7ZjZlqpADEVRJkFEWpxQBOexHXHWrv//rFvFYIOtJDzcN8+DlGtta4VwKolw3EcfffSsgymblwz8FyGkAzDl4kPHAuWNc7G40d7zLfJXq6bwli+Rl9pm5Ad8Np5M3vDCPv9Qm3K3fL7OeBeRzxnlqhzHi/RaQeaf8pwB8KoUXG0UPzLqp2ZfpSvpfNhe6dUp2fYxLQiqGV16RU+FYp6E+dOLHNcl+mqMyImv/u/9pslie6/oxxfOn9ST7cXx5IOY/buE7P0MUv4HwTuE3HnGz4K8zwBeWtOtHfqRd0pLypcA/rud9KWL8ExMy3M23uQy8YaHqDmRqvZE/R9lje9VLcMwrKnrYXDh9Ah/14NxR4/fMPgDaYirO5EuJPvzVVrfTP0bXddg/z88TL1NGgBvBEcxqBR03UScx0oGvkYZO1xv6doCeDsWfwlxvoTYPRYQddabyXJUoyqyPN2gLCcxYc1c/GnWB1Rrqych8FbMcA3Y0f2EfQoQ7p2SflsAfC/o0FHVZWUXrOf3yfFOSJf/Qjzfgr+nVGdPytvB/gl6W8DzmfgWN2YVCxFP3+fbfqZ+AL7j13CpHuXTgZ6uf2YffEND+DnPSYMAXx/B51s1TZtTm7qi7PY2j62harlcRvlZPQhMF8dxLhchkvPW2NfX49Ul3W9/1EqrDy8kv+Onr/l9mh+GNb9/mewA7P21WdJS6mHUJOS0wGP+HMXqoYnwZ7Sn63sD9qdIZzFN4/gGoj5X/OO+HlLdCKJfFPVkIqcc4gZiEiB+k2ioFmxSrzRsL3WqZXtYKuPKOe9R8WUNd1au7rjVao23V9SJueYf0Q8PMJ4Y+HQwPVo+kU4RuuHFk/FHiP5LCnMmWUc8XznWhDoI/xQyzhsmZbrheozwP5vhd0Jus9nkDgNEgwz7naIoq/TCEyq3yzZvP/0BnoF+0OITt4wZIL47TbEuiuK+dtC4/yBvWy0wTfuoYcn9zZAyhvFRIj9zCC+LCX4HhfQ8b0PzIZuZV/aCadxOaywx/3cyzNtx/7tI/2fZP4h/QrUYK4j4haf89LPl/wZaItngEYZwb7/+maP86XZM5s9qBeNPVU18CfU+mpO4Xou+1tGCLosZ30dVMvKzjHzj/d8FWtoU5mSlrTyk599VCjVHJY1o6a/y3iYXKXWwVCt31rtqOVw9mezDoO9bRL3ayPH3D2C5nSTfnyyhfhfm07rOgx9WMbzIdj1aSH7VDZt074R5H2WdY8M92H+F5AsEocd99NFHcf0Dkss5RvCdtUEAAAAASUVORK5CYII=");background-repeat:no-repeat;overflow:hidden;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;border-top-right-radius:8px;border-bottom-right-radius:8px}
/*]]>*/
</style>

İkinci adım: Aşağıdaki jQuery kodunu blogunuzun tema kodlarının en alt kısımlarında bulunan </body> kodunun bir satır üzerine ekleyin.

jQuery Kodu

<script>
/*<![CDATA[*/
    (function(md){
        md(document).ready(function(){
            var $dur = "medium";
            md("#fb_like_box").css({left: -250, "top" : 100 })
            md("#fb_like_box").hover(function () {
                md(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                md(this).stop().animate({
                    left: -250
                }, $dur);
            });
            md("#fb_like_box").show();
        });
    })(jQuery);
/*]]>*/
</script>

Üçüncü adım: Aşağıdaki HTML kodu tema HTML kodlarının <body>...</body> etiketleri arasında sizin için en uygun bir yere ekleyin ve tema editör sayfasını kaydedin.

HTML Kod

<div class="fb_like_box">
<div id="fb_like_box" style="display:none;">
<div class="fb_like_box_button"></div> 
<center><iframe src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/bloggereklentileri&amp;width=250&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:250px;height:230px" allowTransparency="true"></iframe></center>
</div>
</div>

Yukarıdaki HTML kod içerisinde bulunan işaretli yere "bloggereklentileri" blogunuzun Facebook sayfası adını veya sayfa ID numarasını ekleyin.

Ön İzleme

Bu yazımızda Blog siteleri için açılır-kapanır Facebook beğen kutusu oluşturmayı paylaştık. Eklenti ile ilgili görüşlerinizi ve sorularınızı yorum formunu kullanarak bize iletebilirsiniz.