Cara membuat facebook social plugin

Question

Facebook memperkenalkan Plugin Halaman baru untuk menggantikan plugin kotak Suka.

Dokumentasi: https://developers.facebook.com/docs/plugins/page-plugin/

Saya mengganti plugin Kotak Suka dengan plugin baru ini. Di beberapa situs web saya telah menggunakan kode CSS ini untuk membuat plugin responsif di dalam sebuah elemen:

 .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;}

Mengganti ini dengan kode ini tidak berfungsi:

 .fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;}

Kode plugin Halaman saya terlihat seperti ini (tidak menyediakan atribut lebar data):

<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

Sepertinya Facebook telah menambahkan elemen div dengan elemen gaya sebaris di dalam DOM yang dimuat oleh iframe:

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

Ketika saya menyesuaikan lebar ini hingga 100%, setiap elemen selaras dengan lebar penuh kecuali foto sampul.

Dimungkinkan untuk memberikan plugin Halaman ini perilaku responsif seperti halnya dengan plugin kotak Suka?

Lebar "Page Plugin" baru Facebook berkisar dari 180px hingga 500px sesuai dokumentasi.

Jika dikonfigurasi di bawah 180px, ini akan memberlakukan lebar minimum 180px
Jika dikonfigurasi di atas 500px itu akan memberlakukan lebar maksimum 500px

Dengan Lebar Beradaptasi dicentang, mis:

Tidak seperti like-box, plugin ini memberlakukan batas-batasnya dengan tetap berpegang pada nilai batas jika salah dikonfigurasi.

Untuk layar kecil/Perilaku responsif

Ketika melakukan rendering pada layar yang lebih kecil, tegakkan width yang diinginkan pada wadah plugin dan plugin akan mencoba menyesuaikan.
Plugin merender pada lebar yang lebih kecil (agar sesuai dengan layar yang lebih kecil) secara otomatis, jika wadah lebih ramping dari width yang dikonfigurasi.
Anda dapat memperkecil wadah pada ponsel dan plugin akan cocok selama mendapat minimum 180px agar sesuai.

Tanpa Lebar Adaptif

Plugin akan ditampilkan pada lebar yang ditentukan, terlepas dari lebar kontainer

Ini tidak berfungsi dengan baik ketika Anda menempatkan plugin di kolom tipis, seperti bilah samping misalnya. Pada layar berukuran sedang ini biasanya berjalan lebih kecil dari 280px lebarnya.

.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

Ini adalah kode yang saya gunakan untuk menghentikan pemecahan plugin di luar wadah pembungkus. Berbeda dengan kotak seperti lama yang akan ubin, yang ini hanya meluap, menyembunyikan konten yang meluap.

ini bekerja untuk saya.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=443271375714375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

jQuery(document).ready(function($) {
  $(window).bind("load resize", function(){  
  setTimeout(function() {
  var container_width = $('#container').width();    
    $('#container').html('<div class="fb-page" ' + 
    'data-href="http://www.facebook.com/IniciativaAutoMat"' +
    ' data-width="' + container_width + '" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
    FB.XFBML.parse( );    
  }, 100);  
}); 
});

</script>
<div id="container" style="width:100%;">  
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>

Untuk membuat Plugin Halaman Facebook responsif pada pemuatan halaman awal, Anda ingin menghapus atribut data-width dan bukannya menambahkan

data-adapt-container-width="true"

Ini akan membuat Plugin Halaman Facebook responsif, tetapi hanya pada render halaman awal, dengan lebar minimum 180px.

Saya masih mencoba mencari cara untuk membuatnya benar-benar responsif secara dinamis, terlepas dari peringatan Facebook (saya akan memposting pembaruan jika saya pernah menemukan jawabannya).

Tidak Mengubah Ukuran Dinamis
Plugin Halaman berfungsi dengan tata letak responsif, lancar, dan statis. Kamu dapat menggunakan kueri media atau metode lain untuk mengatur width dari induknya elemen, namun:

Plugin akan menentukan width-nya pada pemuatan halaman. Itu tidak akan bereaksi perubahan pada model kotak setelah pemuatan halaman. Jika Anda ingin menyesuaikan plugin width pada ukuran jendela, Anda perlu secara manual rerender plugin.

Sumber: https://developers.facebook.com/docs/plugins/page-plugin

Anda dapat membuatnya responsif secara dinamis dengan menginisialisasi ulang widget pada ukuran browser, seperti yang disarankan Io Ctaptceb, tetapi dengan melakukan itu Anda berisiko menghabiskan memori dengan sangat cepat.

Yugal Jindle punya jawaban yang bagus, tetapi saya ingin mengklarifikasi bahwa Saya belum menemukan cara untuk membuat plugin ini benar-benar responsif secara dinamis.

Saya meletakkan ini di sini untuk mereka yang memiliki masalah yang sama dengan saya dan tidak dapat menemukan jawaban mereka di sini di antara komentar atau pada halaman stackoverflow lainnya.

Saya menambahkan Facebook Page Plugin dengan pengaturan yang akan menyesuaikannya dengan lebar wadah.

data-adapt-container-width="true"

Namun, satu atau lebih elemen dalam iframe atau elemen Javascript SDK diberi lebar 340px membuat Page Plugin tidak beradaptasi dengan lebar kontainer. Sementara itu harus memiliki minimum 180px dan maksimal 500px.

Namun kode yang disediakan oleh Facebook kehilangan sesuatu.

<div class="fb-page" data-href="https://www.facebook.com/Paras-Design-393209377418188" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>

Dengan menambahkan data-width="500" secara manual, Plugin Halaman merespons seperti yang diharapkan dan disesuaikan dengan lebar kontainer hingga lebar maksimum 500px.

Saya harap ini membantu siapa pun menemukan masalah yang sama.

bagi Anda yang mencari solusi JS untuk ukuran lebih kecil dari 280

di sini adalah potongan kode saya:

facebookScale = function () {
    var adjustWidth;
    adjustWidth = $('.facebook-likebox').width() / 280;
    return $('.fb-page').css({
      '-webkit-transform': 'scale(' + adjustWidth + ')',
      '-moz-transform': 'scale(' + adjustWidth + ')',
      'transform': 'scale(' + adjustWidth + ')'
    });
  }

$(function(){
    $('.fb-page').on('resize DOMSubtreeModified', facebookScale);
    $(window).on('resize', facebookScale);
  })

sunting. pastikan yang berikut ini ada di css:

.fb-page{
  transform-Origin: 0 0;
  -webkit-transform-Origin: 0px 0px;
  -moz-transform-Origin: 0px 0px;
}

Kami telah mengatasi beberapa keterbatasan responsif plugin Facebook dengan menggunakannya sebagai IFRAME, tetapi bootstrap pada saat render dengan JavaScript yang secara dinamis mengukur ukuran frame (dan parameter lebar/tinggi dalam URL SRC) untuk mengisi elemen kontainer.

Jika wadah lebih besar dari 500px, untuk menghindari Talang yang jelas di sisi kanan, kami cukup menambahkan transformasi skala dengan beberapa matematika sederhana.

Acara onload IFRAME menyala ketika SRC pada awalnya kosong (ketika kita bootstrap) dan kemudian lagi setelah selesai memuat ketika kita mengatur SRC, tetapi kita hanya keluar jika atribut SRC sudah ada.

Dalam penggunaan kami, kami tidak mengubah lebar umpan Facebook untuk penggunaan desktop, dan untuk viewports genggam/tablet, lebar tersebut secara alami diperbaiki (ya, kami menjebak perubahan orientasi) tetapi jika Anda ingin agar Anda terus menyesuaikan jika Dimensi jendela browser berubah, Anda hanya bisa memecat kode sebagai latihan untuk Anda sendiri.

Ini diuji dengan Chrome dan Safari, di desktop dan iOS/Android:

<script>
    function setupFBframe(frame) {

        if(frame.src) return; // already set up

        // get parent container dimensions to use in src attrib
        var container = frame.parentNode;

        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

        var src = 'https://www.facebook.com/plugins/page.php' +
                '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
                '&tabs=timeline' +
                '&width=' + containerWidth +
                '&height=' + containerHeight +
                '&small_header=true' +
                '&adapt_container_width=false' + /* doesn't seem to matter */
                '&hide_cover=true' +
                '&hide_cta=true' +
                '&show_facepile=false' +
                '&appId';

        frame.width = containerWidth;
        frame.height = containerHeight;
        frame.src = src;

        // scale up if container > 500px wide
        if(containerWidth) > 500) {
            var scale = (containerWidth / 500 );
            frame.style.transform = 'scale(' + scale + ')';
        }
    }
</script>
<style>
    #facebook_iframe {
        transform-Origin: 0 0;
        -webkit-transform-Origin: 0px 0px;
        -moz-transform-Origin: 0px 0px;
    }
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

EDIT: Lupa tentang transformasi-Asal, kebutuhan dihapus untuk menyesuaikan kiri/atas untuk mengakomodasi skala. Terima kasih Io Ctaptceb

Pada Graph API 2.3 Facebook menyediakan kode yang mirip dengan yang berikut ini untuk plugin komentar:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5">
</div>

Tambahkan data-width="100%" untuk membuatnya semi-responsif sebagai berikut:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5"
    data-width="100%">
</div>

Semi-responsif karena, plugin tidak mengubah ukurannya sendiri pada ukuran halaman. Ukurannya tergantung pada ukuran layar saat plugin dimuat.

Saya menggunakan solusi yang diusulkan oleh Robert Smith dengan lebar-lebar, bukan lebar:

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
    max-width: 100% !important;
}

Juga, saya menggunakan proposal Yugal Jindle dan saya sudah melakukannya

data-width="555"

dan

data-adapt-container-width="true"

Sekarang halaman saya ok! Terima kasih banyak!

Tampaknya Plugin Halaman Facebook tidak berubah sama sekali dalam 5-7 tahun terakhir :) Tidak responsif sejak awal dan masih belum, bahkan param Adapt to plugin container width baru tidak berfungsi atau saya tidak mengerti cara kerjanya .

Saya mencari cara sederhana yang paling memungkinkan untuk melakukan PLUGIN SIZE 100% WIDTH, dan sepertinya itu tidak mungkin. Omong kosong itu yang terbaik. Bagaimana desainer memecahkan masalah ini?

Saya menemukan keputusan terbaik untuk kali ini 2017 Oktober:

.fb-page, .fb-page iframe[style], .fb-page span {
    width: 100% !important;
}
.fb-comments, .fb-comments iframe[style], .fb-comments span {
   width: 100% !important;
}

Ini memungkinkan jangan merusak lebar ukuran layar untuk layar responsif, tetapi tetap terlihat jelek, karena terpotong dalam beberapa waktu dan tidak melebar ... Facebook tidak peduli dengan desain plugin sama sekali. Itulah yang sebenarnya.

Saya memperbaiki jawaban Twentyfortysix sedikit, untuk hanya memicu acara setelah perubahan ukuran selesai.

Selain itu saya menambahkan memeriksa lebar jendela, sehingga tidak akan memicu reinisialisasi pada Android.

(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    jQuery(document).ready(function($) {
        var oldwidth = $(window).width();
        var timeout;

        var recalc = function() {
          clearTimeout(timeout);
          timeout = setTimeout(function() {
          var container_width = $('#fbcontainer').width();    
            $('#fbcontainer').html('<div class="fb-page" ' + 
            'data-href="YOUR FACEBOOK PAGE URL"' +
            ' data-width="' + container_width + '" data-height="750" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>');
            if(typeof FB !== 'undefined') {
                FB.XFBML.parse( );  
            }  
          }, 100);  
        };

        recalc();

      $(window).bind("resize", function(){  
        if(oldwidth !== $(window).width()) {
            recalc();
            oldwidth = $(window).width();
        }
        }); 
    });

Berikut ini adalah ukuran dinamis iframe yang menyertakan cara, dengan beberapa penayangan ulang jadwal acara diubah ukurannya:

function _facebook() {

    var parent = document.getElementById('facebook');
    var width = (window.innerWidth > 540) ? 500 : window.innerWidth - 40;
    if (parent.firstChild && parent.firstChild.width == width) { return; }
    var url = 'https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width='+width+'&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=YOUR_APP_ID';
    var i = document.createElement('iframe');
    i.src = url;
    i.width = width;
    i.height = 500;
    i.style = 'border:none;overflow:hidden';
    i.scrolling = "no";
    i.frameborder = "0";
    i.allowTransparency = "true";
    while (parent.firstChild) { parent.removeChild(parent.firstChild); }
    parent.appendChild(i);

}

_facebook();

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        _facebook();
    }, 250);
});