LoginSignup
2
2

More than 5 years have passed since last update.

@norizou4(Katano Noriyasu)

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

Last updated at Posted at 2018-01-06

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

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

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

/*<![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部分の解説

読み込み外部ファイル

<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を利用しているので、上の行はFont Awsomeへのリンクになります。
次にメインのスクリプトの説明です。

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

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

    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のページからも取得する事ができます。

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

    //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()が機能します。

          var fbidText;
          $('.button_li').on('click',function(){
                  fbidText = $(this).find('.fbid').text();
          });

fdidTextに格納された値がIDになります。
再度ajaxData()で読み込みます。

メッセージの加工

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

             var msg = item.message.replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1" target="_blank">詳しくはこちらをチェック<\/a> ');

さらに、記事としての体裁を整えるために、墨カッコ（【】）で文頭の囲まれた部分をタイトルとして表示させます。
後ろのカッコを基準に前半と後半に文章を分け、ある場合とない場合で振り分けをして表示させています。

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）を取得します。

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> を設置しておくと、そこに対して吐き出されたタグが挿入されます。

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の基本設定に記述することで機能します。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2