Web Divulgando Sua página do Facebook No seu WebSite

[Dev PHP 27]

Olá a todos.

Segue um tutorial rápido pra você que quer colocar aquele bom e velho  slide que mostra sua página do Facebook na lateral do seu site.
 

Vamos lá:
Crie um arquivo .JS, não importa o nome dele, ele só deve terminar com a extensão .js e adicione em alguma pasta do site.

Eu aconselho a criar uma hierarquia de pastas para organizar melhor seu código.
Se você utiliza gesior coloque o arquivo na mesma pasta do layouts.php para facilitar.

fb_float_plugin.js
 

Spoiler

(function(){
    var load_float_fb = function($){
        var defaults = {
                container_width:280,
                height:224,
                show_facepile:'true',
                tabs:'',
                href:''
            },
            cfg = $("#float_fb").data(),
            iframe = 'https://www.facebook.com/v3.0/plugins/page.php?',
            params = [],
            png = $("#float_fb").attr('src').replace(/\?.*/, '').replace(/[\w\.]+$/, "widget.png")
        ;
        var val;
        for(var k in defaults)
        {
            if(typeof cfg[k] === 'undefined')
                cfg[k] = defaults[k];
            val = cfg[k];
            params.push(k + '=' + val);
        }
        iframe += params.join('&');

        var status_ = 'hide'; // showing, hiding, show, hide
        $("body").append(
            ['<div id="float_fb_plugin" style="visibility:hidden">',
                '<img src="' + png + '" style="cursor:pointer;position:absolute;margin-left:-47px;" border=0 />',
                '<iframe scrolling="no" frameborder="0" allowTransparency="true"></iframe>',
            '</div>'].join(''));
        var w = $("#float_fb_plugin");

        var top_ = ($(window).height() - cfg.height)/2;
        if(top_ < 50)
            top_ = 50;
        var right_ = cfg.container_width * -1;

        var css = {width:cfg.container_width, height:cfg.height,
            position:'fixed',
            top:top_,
            right:right_,
            visibility:'visible',
            backgroundColor:'white',
            zIndex:2147483647
        };

        w.find('iframe').attr({width:cfg.width, height:cfg.height}).attr('src', iframe);

        w.css(css);

        w.find('img').hover(function(){
            if(status_ != 'hide')
                return;
            status_ = 'showing';
            w.animate({right: 0}, function(){ status_ = 'show'; });
        });

        w.mousemove(function(e){
            e.stopPropagation();
        });

        $("body").mousemove(function(){
            if(status_ != 'show')
                return;
            status_ = 'hiding';
            w.animate({right:right_}, function(){ status_ = 'hide';});
        });
    };

    // load jquery if needed
    if(typeof jQuery === 'undefined')
    {
        var run = false;
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
        script.onload = function(){
            $.noConflict();
            run = true;
            load_float_fb(jQuery);
        };
        var head = document.getElementsByTagName('head')[0];
        if(head) head.appendChild(script);

        setTimeout(function(){
            if(!run)
                load_float_fb(jQuery);
        }, 3000);
    }
    else
        load_float_fb(jQuery);
})();

 

 

 

Após criar o arquivo é necessário informar ao site que você irá utilizar esse arquivo.

Se você usa gesior insira essa linha no seu arquivo layout.php logo antes do fechamento da TAG </body>.

Lembrando que é necessário no src="" inserir o caminho correto de onde está o arquivo.
e em data-htref deverá ter o link para sua página do facebook. ex.:  https://www.facebook.com/otservferobra/
Ficando assim:

Spoiler

	<!-- float facebook like box start -->
    <script id="float_fb" src="<?=$layout_name?>/fb_float_plugin.js" data-href="LINK_DA_SUA_PÁGINA_DO_FACEBOOK" async></script>
    <!-- float facebook like box end -->
</body>
</html>

 

Após tudo isso fica faltando apenas colocar a foto que será exibida no lado direito, ela deve necessariamente ter o nome : widget.png.

Os arquivos necessários estão anexados nesse tutorial.

fb_float_plugin.js

[LeoTK 795]

Este tópico foi movido para a área correta. Esta é uma mensagem automática!
Pedimos que leia as regras do fórum!

Spoiler

This topic has been moved to the correct area. This is an automated message!
Please read the forum rules.

 

[LeoTK 795]

Parabéns, seu tópico de conteúdo foi aprovado!
Muito obrigado pela sua contribuição, nós do Tibia King agradecemos.
Seu conteúdo com certeza ajudará à muitos outros, você recebeu +1 REP.

Spoiler

Congratulations, your content has been approved!
Thank you for your contribution, we of Tibia King we are grateful.
Your content will help many other users, you received +1 REP.

 

[FalcaoEmperium 1]

Boa noite irmao, Fiz tudo que vc colocou ai, e Nao apareceu nd. Me ajude ai pf !!

[Dev PHP 27]

opa DR.
Pode ser então que não colocou algum arquivo no local correto.

[Rogex Joyz 95]

Como o script saberá de onde puxar a imagem .png?

Editado Outubro 19, 2020 por Rogex Joyz (veja o histórico de edições)