Facebookのタイムラインの情報を読み込んでページに表示させる。さらにクリックでPOPUPさせる方法@JIMDO

複数人で運用しているFacebookページがあり、それぞれの編集者がFacebookに投稿できる状態です。そして、JIMDOで作成したWebサイトもあるけど、Webサイトの更新は少しハードルが高くなかなか更新できない状態でした。
そこで、Facebookページのタイムラインの情報を JIMDOページに取り込みさらに、そこからでも「いいね」できるようにしたいと思いました。

やりたい事は、facebookページの情報を運用しているページに一覧で表示させる事と、その投稿をPOPUPで表示させて、拡散できるようにしたいです。

次がページに埋め込んだ全体のソースです。

````html
/*<![CDATA[*/
<script src="https://use.fontawesome.com/31c8bef927.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

    function ajaxData(){
      return $.ajax({
                type: 'GET',
                url: 'https://graph.facebook.com/v2.11/[ページID]/feed?fields=id,message,picture,full_picture,likes,shares,created_time,object_id,comments&access_token=[Facebookアクセストークン]',
                dataType: 'json',
                error: function() {
                    //error func
                    $('#fb-list').append('<li>Facebookのデータが取得できませんでした。<\/li>');
                }
        })
    }
    
    //for HTML
    ajaxData().done(function(jsondata){
        var COUNT = 6;
        for (var i=0; i<=(COUNT-1); i++) {
                            
        var obj = jsondata.data[i];
        var msg = obj.message;
        var pic = obj.picture;
        var fbtime = obj.created_time.replace(/[A-Z].*0/g,'').replace(/-/g,'/');
        var fbid = obj.id;

        //make tike for h3 frome msg
        var splitText = "】";
        var cutNum = '79';
        if ( msg.indexOf(splitText) != -1) {
            var titleText = msg.split(splitText);
            //make message count
            var messageText = titleText[1].substr(0,cutNum);
            $('#fb-list').append('<li class="button_li" onClick="popup()"><p class="imageSize"><img src="'+pic+'"><\/p><h3>'+titleText[0].slice(1)+'<\/h3><p class="messageClass"><time>'+fbtime+'<\/time>'+messageText+'<\/p><span class="fbid">'+fbid+'<\/span><\/p><\/li>');
            }else{
                var messageText = msg.substr(0,cutNum);
            $('#fb-list').append('<li class="button_li" onClick="popup()"><p class="imageSize"><img src="'+pic+'"><\/p><p class="messageClass"><time>'+fbtime+'<\/time>'+messageText+'<span class="fbid">'+fbid+'<\/span><\/p><\/li>');
            }
        }
    });

      function popup(){
          var fbidText;
          $('.button_li').on('click',function(){
                  fbidText = $(this).find('.fbid').text();
          });
          
          ajaxData().done(function(jsondata){
              jsondata.data.filter(function(item, index){
                  if (item.id == fbidText){
                      var msg = item.message.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1" target="_blank">詳しくはこちらをチェック<\/a> ');
                      
                      var pic = item.full_picture;
                      var fbtime = item.created_time.replace(/[A-Z].*0/g,'').replace(/-/g,'/');
                      var postid = item.object_id
                      console.log("id:" + postid);
                      
                      //make title
                      var splitText = "】";
                      if ( msg.indexOf(splitText) != -1) {
                          var titleText = msg.split(splitText);
                          
                          //make message count
                          var itemHtml = '<p class="imageSize"><img src="'+pic+'"><\/p><h3>'+titleText[0].slice(1)+'<\/h3><p class="messageClass"><time>'+fbtime+'<\/time>'+titleText[1]+'<\/p>';
                      }else{
                          var itemHtml = '<p class="imageSize"><img src="'+pic+'"><\/p><p class="messageClass"><time>'+fbtime+'<\/time>'+ msg +'<\/p>';
                          
                      }
   var shareMsg = item.message.substr(0,100);
if(postid != null){
                      var shareButton = '<ul id="shareButton"><li class="fbButton"><a href="https://www.facebook.com/sharer/sharer.php?app_id=202970370270244&u=https://www.facebook.com/[facebookページ]/posts/'+ postid +'" target="_blank"><i class="fa fa-facebook" aria-hidden="true"><\/i>いいね<\/a><\/li><li class="twButton"><a href="http://twitter.com/intent/tweet?text='+ shareMsg +'&amp;url=https://www.facebook.com/[Twitterページ]/&hashtags=[ハッシュタグ（#はいらない）]" target="_blank"><i class="fa fa-twitter" aria-hidden="true"><\/i>ツイート<\/a><\/li>'
}else{
    var shareButton = '<ul id="shareButton"><li class="fbButton"><a href="https://www.facebook.com/[facebookページ]/" target="_blank" ><i class="fa fa-facebook" aria-hidden="true"><\/i>facebookで詳細をみる<\/a><\/li><li class="twButton"><a href="http://twitter.com/intent/tweet?text='+ shareMsg +'&amp;url=https://www.facebook.com/[Twitterページ]/&hashtags=[ハッシュタグ（#はいらない）]" target="_blank"><i class="fa fa-twitter" aria-hidden="true"><\/i>ツイート<\/a><\/li><\/ul>'
}
                  var closeButtonDom = '<button class="popup-close" type="button">×<\/button>';
                  var addHtml = '<div id="popup">'+closeButtonDom + '<div class="sp-list-itemInner -modalItem">' + itemHtml+shareButton+'<\/div><\/div>';
                  $('#fb-list').after(addHtml);
                   $('#popup').addClass('-modal'); 
                  }
              });
          })
      }
      $(document).on('click', '.popup-close', function() {
          jQuery('#popup').remove();
      })
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/

/*Facebook Post
*********************************/
ul#fb-list {
   display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

ul#fb-list li {
  width:29%;
  padding:0.8em;
  font-size:16px;
  line-height:1.6;
  letter-spacing:0.1em;
  list-style:none;
  vertical-align:top;
}
ul#fb-list li time{
    display:block;
    font-size:0.8em;
}
ul#fb-list li p.imageSize{
    overflow: hidden;
    width:100%;
    height:120px;
    position:relative;
    margin-bottom:1em;
}
ul#fb-list li p.imageSize img{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
ul#fb-list li h3{
    font-size:1.3em;
    margin-bottom:1em;
}
ul#fb-list li p.messagetxt{
    
}
ul#fb-list li a {
  display: block;
}
ul#fb-list li:hover{
    cursor : pointer;
    background-color:rgba(185, 249, 136, 0.14);
}
ul#fb-list li span.fbid{
    display:none;
}

/* close button */
button.popup-close:before,
button.popup-close:after {
    content: '';
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    border-right: solid 2px;
    color:#fff;
}
button.popup-close:before{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
button.popup-close:after{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

button.popup-close {
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    width: 28px;
    height: 28px;
    position:fixed;
    top:2em;
    right:1em;
    cursor: pointer;
    background: none;
    z-index: 9999;
    transition: all .3s;
    border:none;
}
button.popup-close:hover{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  background: none;
}

/*** module Item ***/
.-modal:before {
  background-color: rgba(0, 0, 0, 0.5);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.sp-list-itemInner.-modalItem {
  background-color: #fff;
  width: 60%;
  height: auto;
  padding: 0 !important;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  overflow: auto;
  z-index: 9999;
        border-radius: 8px;        /* CSS3草案 */  
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-o-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-ms-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
  }
.sp-list-itemInner.-modalItem .imageSize{
    float:  left;
    height: 100%;
    width: 50%;
    overflow:  hidden;
    margin-right:1em;
    line-height:0;
 }
.sp-list-itemInner.-modalItem .imageSize img{
      height:auto;
      min-width:100%;
  }
  .sp-list-itemInner.-modalItem h3{
      margin:1em 1em 0 0;
  }
    .sp-list-itemInner.-modalItem p.messageClass{
      margin:1em 1em 1em 0;
  }
  .sp-list-itemInner.-modalItem ul#shareButton li{
      list-style:none;
      display:inline;
      margin-right:0.5em;
      background-color:#ddd;
      font-size:0.8em;
      padding:0.5em 1em;
      border-radius: 4px; 
  }
    .sp-list-itemInner.-modalItem ul#shareButton li a{
      color:#fff;
      text-decoration:none;
    }
  .sp-list-itemInner.-modalItem ul#shareButton li.fbButton{
      background-color:#3b5998;
  }
    .sp-list-itemInner.-modalItem ul#shareButton li.twButton{
      background-color:#00aced;
  }
    .sp-list-itemInner.-modalItem ul#shareButton li a i{
    margin-right:0.5em;
    }
/*]]>*/
</style>

````
##Javascript部分の解説
###読み込み外部ファイル

````html
<script src="https://use.fontawesome.com/31c8bef927.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
````
このソースに必要な外部ファイルは２つです、jQueryとFacebookとtwitterのアイコンを表示するために[Font Awsome](http://fontawesome.io/)を利用しているので、上の行はFont Awsomeへのリンクになります。
次にメインのスクリプトの説明です。

機能（function）としては大きく3つから成り立っています。最初はFacebookからタイムラインを読み込むパーツです。そして、それをページに表示させるパーツと、クリックしてPOPUPを表示させ、そのPOPUPに読み込んだ情報を表示させるようにしています。

###Facebookページのタイムラインを読み込む

````js
    function ajaxData(){
      return $.ajax({
                type: 'GET',
                url: 'https://graph.facebook.com/v2.11/[ページID]/feed?fields=id,message,picture,full_picture,likes,shares,created_time,object_id,comments&access_token=[Facebookアクセストークン]',
                dataType: 'json',
                error: function() {
                    //error func
                    $('#fb-list').append('<li>Facebookのデータが取得できませんでした。<\/li>');
                }
        })
    }
````
こちらを作成する上で参考にさせてもらったのがこちらのページです。
https://codepen.io/takumaro-web/pen/aOYmOr

この方のが一番わかりやすいです。

````
https://graph.facebook.com/v2.11/[ページID]/feed?fields=id,message,picture,full_picture,likes,shares,created_time,object_id,comments&access_token=[Facebookアクセストークン]
````
このURLで情報を取得して、その情報を分解して表示させている感じです。
こちらの情報は[Facebook Developper](https://developers.facebook.com)のページからも取得する事ができます。

次がHTMLに一覧で表示させるための機能です。

````js
    //for HTML
    ajaxData().done(function(jsondata){
        var COUNT = 6;
        for (var i=0; i<=(COUNT-1); i++) {
                            
        var obj = jsondata.data[i];
        var msg = obj.message;
        var pic = obj.picture;
        var fbtime = obj.created_time.replace(/[A-Z].*0/g,'').replace(/-/g,'/');
        var fbid = obj.id;

        //make tike for h3 frome msg
        var splitText = "】";
        var cutNum = '79';
        if ( msg.indexOf(splitText) != -1) {
            var titleText = msg.split(splitText);
            //make message count
            var messageText = titleText[1].substr(0,cutNum);
            $('#fb-list').append('<li class="button_li" onClick="popup()"><p class="imageSize"><img src="'+pic+'"><\/p><h3>'+titleText[0].slice(1)+'<\/h3><p class="messageClass"><time>'+fbtime+'<\/time>'+messageText+'<\/p><span class="fbid">'+fbid+'<\/span><\/p><\/li>');
            }else{
                var messageText = msg.substr(0,cutNum);
            $('#fb-list').append('<li class="button_li" onClick="popup()"><p class="imageSize"><img src="'+pic+'"><\/p><p class="messageClass"><time>'+fbtime+'<\/time>'+messageText+'<span class="fbid">'+fbid+'<\/span><\/p><\/li>');
            }
        }
    });
````
ajaxData()で先に取得した情報を再度読み込みにいきます。所得した情報はjsondata(任意で作成)した値に格納されます。それらを取得した値ごとに変数に格納していきます。

###POPUPでタイムライン情報を表示
一覧表示ができたので、それを今度はPOPUPさせます。
jQueryのプラグインなどを使えば簡単にできるのかもしれませんが、逆に複雑になりすぎてしまうので、シンプルにPOPUPを作成します。

先ほど作った一覧からどの記事が押されたかを取得するため、POSTのIDを拾います。
一覧の作成時に各liにonClick="popup()"を付け足して表示させています。
クリックされたら、functionのpopup()が機能します。

````js
          var fbidText;
          $('.button_li').on('click',function(){
                  fbidText = $(this).find('.fbid').text();
          });
````
fdidTextに格納された値がIDになります。
再度ajaxData()で読み込みます。

####メッセージの加工
メッセージ内にURLがあった場合それを「詳しくはこちらをチェック」として表示させます。

````js
             var msg = item.message.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1" target="_blank">詳しくはこちらをチェック<\/a> ');
````
さらに、記事としての体裁を整えるために、墨カッコ（【】）で文頭の囲まれた部分をタイトルとして表示させます。
後ろのカッコを基準に前半と後半に文章を分け、ある場合とない場合で振り分けをして表示させています。

````js
var splitText = "】";
                      if ( msg.indexOf(splitText) != -1) {
                          var titleText = msg.split(splitText);
                          
                          //make message count
                          var itemHtml = '<p class="imageSize"><img src="'+pic+'"><\/p><h3>'+titleText[0].slice(1)+'<\/h3><p class="messageClass"><time>'+fbtime+'<\/time>'+titleText[1]+'<\/p>';
                      }else{
                          var itemHtml = '<p class="imageSize"><img src="'+pic+'"><\/p><p class="messageClass"><time>'+fbtime+'<\/time>'+ msg +'<\/p>';
                          
                      }
````
POPUP内に投稿の記事を「いいね」できるようにします。
投稿のURLを生成するため、投稿のID（object_id）を取得します。

````js
var shareMsg = item.message.substr(0,100);
if(postid != null){
                      var shareButton = '<ul id="shareButton"><li class="fbButton"><a href="https://www.facebook.com/sharer/sharer.php?app_id=202970370270244&u=https://www.facebook.com/[facebookページ]/posts/'+ postid +'" target="_blank"><i class="fa fa-facebook" aria-hidden="true"><\/i>いいね<\/a><\/li><li class="twButton"><a href="http://twitter.com/intent/tweet?text='+ shareMsg +'&amp;url=https://www.facebook.com/[Twitterページ]/&hashtags=[ハッシュタグ（#はいらない）]" target="_blank"><i class="fa fa-twitter" aria-hidden="true"><\/i>ツイート<\/a><\/li>'
}else{
    var shareButton = '<ul id="shareButton"><li class="fbButton"><a href="https://www.facebook.com/[facebookページ]/" target="_blank" ><i class="fa fa-facebook" aria-hidden="true"><\/i>facebookで詳細をみる<\/a><\/li><li class="twButton"><a href="http://twitter.com/intent/tweet?text='+ shareMsg +'&amp;url=https://www.facebook.com/[Twitterページ]/&hashtags=[ハッシュタグ（#はいらない）]" target="_blank"><i class="fa fa-twitter" aria-hidden="true"><\/i>ツイート<\/a><\/li><\/ul>'
}
````
最後に、作成したPOPUPの中身をまとめて表示させます。
あらかじめHTMLの方に ````<ul id="fb-list"></ul>```` を設置しておくと、そこに対して吐き出されたタグが挿入されます。

````js
var closeButtonDom = '<button class="popup-close" type="button">×<\/button>';
                  var addHtml = '<div id="popup">'+closeButtonDom + '<div class="sp-list-itemInner -modalItem">' + itemHtml+shareButton+'<\/div><\/div>';
                  $('#fb-list').after(addHtml);
                   $('#popup').addClass('-modal'); 
                  }
````

だんだん力が付きてきました。
そして、クローズのボタンを押した時の処理をつけます。
     
````
     $(document).on('click', '.popup-close', function() {
          jQuery('#popup').remove();
      })
````

CSSの説明は見てもらえばわかると思います。
これを、JIMDOの基本設定に記述することで機能します。