2015年4月20日

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

      , ,  

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

點這裡看結果。

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


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

那麼，如果要自己寫的話，可以怎麼寫呢？



建立分享按鍵樣式

首先，我從網路上分別下載了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語法撰寫

我們主要利用click和animate這兩個語法來完成，完整的寫法如下：
 <!--    匯入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>
結果就像這樣。

參考資料
網站
小春日和


0 意見:

張貼留言