2015年4月20日 星期一

[筆記] 建立分享社交社群(Facebook、Goole+、pinterest)的浮動按鍵—jQuery(第九堂)


最近很流行在網頁的一側加上分享的按鈕,今天我們就來看一下怎麼樣自己製作一個分享至FB和Goole+的浮動游標吧!

點這裡看結果

最近社群分享非常熱門,很多網站都紛紛加入分享到網路社群的浮動游標,像是這樣:


現在其實已經有很多網站已經提供了自動把浮動游標嵌入網頁當中,像是GetSiteControlAddThis,有需要的話都可以直接去做免費申請,另外如果希望更客制化的樣式,他們也提供付費的版本。

那麼,如果要自己寫的話,可以怎麼寫呢?




建立分享按鍵樣式

首先,我從網路上分別下載了facebook、google+和pinterest的icon當作這次的練習(點我下載)。我的想法是這樣的,我要建立一個share button,當網友點選share button之後,就會跳出讓它分享的選項。

首先,我一樣要利用Font Awesome所提供的圖案來製作share button,所以我在<head>
</head>標籤中,插入下面的語法,引入Font Awesome(用法可參考這篇:如何使用Font Awesome所提供的各種icon)。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
在body的部分,語法如下:
<div class="menu">
    <div class="socialbar">
        <ul>
            <li class="fb"  style="background-color:#38579D"><img src="images/fb.png"></li>
            <li class="g"   style="background-color:#DF4B38"><img src="images/gplus.png"></li>
            <li calss="pin" style="background-color:#CC2028"><img src="images/pin.png"></li>
        </ul>
    </div>
    <div class="share">
        <i class="fa fa-share-alt-square fa-4x"></i>
    </div>
</div>
我先建立了兩個div,一個叫socialbar,這是用來選擇要分享到那個社群,另一個叫share,這會是一個分享的圖案,最後還建立一個叫做menu的div,把這兩個都包起來。

CSS部分的語法如下:
*{
            padding:0;
            margin: 0;
        }
        .menu{
            position:fixed;
            top:30vh;
            cursor:pointer;
        }
        .socialbar{
            float:left;
        }
        .socialbar li{
            list-style-type:none;
            width:100px;
            text-align: right;
        }
        .socialbar img{
            width:50px;
        }
    .share{
            color:#909090;
            float:left;
       }
這裡面我把socialbar的長度設為100px,所以等一下如果我要把它們隱藏起來的話,就要設成-100px,比較重要的是float的用法,在share和socialbar的class中,都加上了float:left的指令,這麼做可以讓share button出現在socialbar的右邊,如果不加的話,這兩個div會重疊在一起,像這樣:


加上了float之後,它們就會變成並排了:


點選Share鍵時跳出分享社群選擇,再點一下則縮回
jQuery語法撰寫

我們主要利用clickanimate這兩個語法來完成,完整的寫法如下:
 <!--    匯入jQuery    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--    點了會彈出、再點一下會縮回-->
    <script>
        $(document).ready(function(){
            moving=0
            $(".share").click(function(){
                if(moving==0){
                    $(".menu").animate({"left":"0"})
                    moving=1
                }else if(moving==1){
                    $(".menu").animate({"left":"-100"})
                    moving=0
                }
            })
        })
    </script>
這裡比要要注意的地方是我們設定了一個變數叫做moving,當moving為0時,點擊分享鍵會讓menu這個區塊向右移動到left為0的地方(也就是跳出分享選項),同時會讓moving變成1;當moving為1時,點擊分享鍵會讓menu這個區塊向右移動到left為-100px的地方(也就是縮回分享選項),同時會讓moving變成0。(註:在舊版的jQuery中可以直接用toggle完成這個指令,但新版無法)。

另外,我們希望網友一進來的時候,並不會直接看到社群的按鍵,而是要按分享鈕後才看的到,因此我們在menu的CSS中加上left:-100px;,修改後menu的CSS為:
 .menu{
            position:fixed;
            left:-100px;
            top:30vh;
            cursor:pointer;
        }

為分享社群鍵加上超連結
最後,現在我們已經為我們的網頁加上固定在網頁左側的浮動分享鍵了,但是點下去這些按鈕還不會有任何效果(因為我們還沒寫超連結阿!)

超連結的加法分別如下:

Facebook
  <a href="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));"><li class="fb" style="background-color:#38579D"><img src="images/fb.png"></li></a>
Google+
 <a href="javascript: void(window.open('http://plus.google.com/share?url='.concat(encodeURIComponent(location.href))));"><li class="g"   style="background-color:#DF4B38"><img src="images/gplus.png"></li></a>
Pinterest
<a href="javascript: void(window.open('http://pinterest.com/pin/create/button/?url='.concat(encodeURIComponent(location.href))));"><li calss="pin" style="background-color:#CC2028"><img src="images/pin.png"></li></a>
除了我們這裡做的這三個之外,還有一些常用的,像是
Twitter
<a href="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));">Twitter</a>
Plurk
<a href="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&amp;status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));">推至Plurk</a>
大家可以自己斟酌使用嘍!

結果

完整的程式碼如下
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分享至社群網站</title>
    <!--    匯入FontAwesome   -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <!--    匯入jQuery    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--    點了會彈出、再點一下會縮回-->
    <script>
        $(document).ready(function(){
            moving=0
            $(".share").click(function(){
                if(moving==0){
                    $(".menu").animate({"left":"0"})
                    moving=1
                }else if(moving==1){
                    $(".menu").animate({"left":"-100"})
                    moving=0
                }
            })
        })
    </script>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .menu{
            position:fixed;
            left:-100px;
            top:30vh;
            cursor:pointer;
        }
        .socialbar{
            float:left;
        }
        .socialbar li{
            list-style-type:none;
            width:100px;
            text-align: right;
        }
        .socialbar img{
            width:50px;
        }
    .share{
            color:#909090;
            float:left;
       }
    </style>
</head>
<body>
<div class="menu">
    <div class="socialbar">
        <ul>
            <a href="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));"><li class="fb" style="background-color:#38579D"><img src="images/fb.png"></li></a>
            <a href="javascript: void(window.open('http://plus.google.com/share?url='.concat(encodeURIComponent(location.href))));"><li class="g"   style="background-color:#DF4B38"><img src="images/gplus.png"></li></a>
            <a href="javascript: void(window.open('http://pinterest.com/pin/create/button/?url='.concat(encodeURIComponent(location.href))));"><li calss="pin" style="background-color:#CC2028"><img src="images/pin.png"></li></a>
        </ul>
    </div>
    <div class="share">
        <i class="fa fa-share-alt-square fa-4x"></i>
    </div>
</div>
</body>
</html>
結果就像這樣

參考資料


Share:

0 意見:

張貼留言