[OpenCart購物網站]Facebook 粉絲團浮動外掛

2016.05.31 / 分類: awei研究室, OpenCart / 0 則回應

標籤: Facebook 粉絲團, 浮動外掛

雖然說opencart可以利用(HTML 內容)新增版面來把FB粉絲團放置在首頁位置
但是如果可以像我wordpress的右側滑動FB粉絲團,不是更省版面位置嗎?

基本上想要動opencart首頁.可直接到
你的網站/catalog/view/theme/default/template/common/home.tpl

普通的建置方式應該是在home.tpl先建立FB粉絲團 DIV區塊,與JS設定滑動方式
然後再到/catalog/view/theme/default/stylesheet/stylesheet.css去定位此div位置
這樣步驟太多…只要有一個地方出錯….很容易沒辦法呈現你想要的效果

---

現在有一個更方便的方式可以快速替你的opencart或其他網站快速加上FB浮動粉絲框

1.首先複製你的粉絲團網址:例如https://www.facebook.com/aweidesignshow/

2.請複製下列語法
<!– float facebook like box start –>
<script id=”float_fb” src=”//pic.sopili.net/pub/float_fb/widget.js” data-href=”粉絲團網址” async></script>
<!– float facebook like box end –>

3.如果是opencart網站則將上面語法貼入home.tpl內即可完成~~超簡單的吧~!
(如果是其他網站介面,可貼在要顯示的頁面檔案)

js備份

<script type="text/javascript" charset="utf-8">// <![CDATA[
(function(){
    var load_float_fb = function($){
        var defaults = {
                container_width:280,
                height:224,
                show_facepile:'true',
                show_posts:'false',
                href:''
            },
            cfg = $("#float_fb").data(),
            iframe = 'https://www.facebook.com/v2.3/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>',
            '<a target="_blank" ',
                'style="width:' + cfg.container_width + 'px;height:24px;line-height:24px; margin:0;padding:0;',
                'padding-left:8px;position:absolute;bottom:-15px;background-color:#f6f7f8;',
                'text-align:left;font-size:12px;color:gray;display:block;"',
                ' href="http://pic.sopili.net/lnk/-/pilipress/float-fb/">get this widget</a>',
            '</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);

})();

發表留言 取消

名稱

電子郵件

個人網站

Δ