如何使用JS顯示帶有自定義圖標的Twitter feed而不是個人資料圖像

Question

因此，現在我正在嘗試設置將在網站上顯示的Twitter提要的樣式。 我正在使用TweeCool來做到這一點（ http://www.tweecool.com/ ）。 基本上，我試圖弄清楚如何使用自定義Twitter圖標交換個人資料縮略圖。 所以基本上我想要的是讓每條推文在其左側都顯示一個Twitter字體圖標。 使用下面的代碼，我可以根據需要顯示第一個tweet，但是它不會通過JS循環來設置其他樣式。 我對JS和Jquery還是很陌生，所以想知道如何做才能使每個tweet都位於文本左側的twitter圖標之前，例如示例中的第一個。 任何幫助將不勝感激！

<!DOCTYPE html>
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
     <script src="http://api.tweecool.com/js/tweecool.min.js" type="text/javascript"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" type="text/css">

    <script>
      $(document).ready(function() {
          $('#tweecool').tweecool({
            //settings
             username : 'cnnbrk', 
             limit : 5,
             profile_image: false
          });
      });
    </script>

    <style>
        #tweecool ul {
            list-style-type: none;
        }

        .container-tweet {
            display: block;
            position: relative;
            width: 400px;
        }

        #tweecool {
            width: 80%;
            position: absolute;
            margin-left: 0px;
            line-height: 15px;
            font-size: 12px;
        }

        .tweetLogo {
            position: absolute;
            margin-top: 10px;
            width: 20%;
        }

        .tweetLogo i{
            color: blueviolet;
            font-size: 20px;

        }
      </style>    
    </head>

    <body>
    <div class="container-tweet">
    <div class="tweetLogo"><i class="fa fa-twitter"></i></div>
    <div id="tweecool"></div>
    </div>
    </body>
</html>

Answer 1

使用默認的tweecool插件是不可能的，因此必須破解該插件並將圖標放在tweecool.js以便在每個tweet上加載圖標，並在CSS代碼中進行較小的更改，如下所示。

如果您不想顯示默認圖標，請在此處設置“不顯示”

.tweetLogo i{
    display: none !important;

}

以樣式添加此樣式，以便每個推文中的圖標加載都具有顏色和字體大小

#tweecool i{
    color: blueviolet;
    font-size: 20px;

}

從<head>刪除它

<script src="http://api.tweecool.com/js/tweecool.min.js" type="text/javascript"></script>

在根目錄中創建新的tweecool.js空白文件，並將其添加到<head>

<script src="tweecool.js" type="text/javascript"></script>

在tweecool.js添加以下代碼， tweecool.js順利

/*Name : TweeCool
 *version: 1.6 
 *Description: Get the latest tweets from twitter.
 *Website: www.tweecool.com
 *Licence: No licence, feel free to do whatever you want.
 *Author: TweeCool
 */
(function($) {
    $.fn.extend({

        tweecool : function(options) {

            var defaults = {
                username : 'tweecool',
                limit : 5,
                profile_image : true,
                show_time : true,
                show_media : false,
                                show_media_size: 'thumb'  //values: small, large, thumb, medium 
            }

            var options = $.extend(defaults, options);

            function xTimeAgo(time) {
                var nd = new Date();
                //var gmtDate = Date.UTC(nd.getFullYear(), nd.getMonth(), nd.getDate(), nd.getHours(), nd.getMinutes(), nd.getMilliseconds());
                var gmtDate = Date.parse(nd);
                var tweetedTime = time * 1000; //convert seconds to milliseconds
                var timeDiff = (gmtDate - tweetedTime) / 1000; //convert milliseconds to seconds

                var second = 1, minute = 60, hour = 60 * 60, day = 60 * 60 * 24, week = 60 * 60 * 24 * 7, month = 60 * 60 * 24 * 30, year = 60 * 60 * 24 * 365;

                if (timeDiff > second && timeDiff < minute) {
                    return Math.round(timeDiff / second) + " seconds ago";
                } else if (timeDiff >= minute && timeDiff < hour) {
                    return Math.round(timeDiff / minute) + " minutes ago";
                } else if (timeDiff >= hour && timeDiff < day) {
                    return Math.round(timeDiff / hour) + " hours ago";
                } else if (timeDiff >= day && timeDiff < week) {
                    return Math.round(timeDiff / day) + " days ago";
                } else if (timeDiff >= week && timeDiff < month) {
                    return Math.round(timeDiff / week) + " weeks ago";
                } else if (timeDiff >= month && timeDiff < year) {
                    return Math.round(timeDiff / month) + " months ago";
                } else {
                    return 'over a year ago';
                }

            }

            return this.each(function() {
                var o = options;
                var wrapper = $(this);
                var wInner = $('<ul>').appendTo(wrapper);
                var urlpattern = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
                var usernamepattern = /@+(\w+)/ig;
                var hashpattern = /#+(\w+)/ig;
                                var media = '';

                $.getJSON("https://www.api.tweecool.com/?screenname=" + o.username + "&count=" + o.limit, function(data) {

                    if (data.errors || data == null) {
                        wrapper.html('No tweets available.');
                        return false;
                    }

                    if (o.profile_image) {
                        var pIMG = '<a href="https://twitter.com/' + o.username + '" target="_blank"><img src="' + data.user.profile_image_url + '" alt="' + o.username + '" /></a>';
                    } else {
                        pIMG = '';
                    }

                    $.each(data.tweets, function(i, field) {

                        if (o.show_time) {
                            var timestamp = xTimeAgo(field.timestamp);
                        } else {
                            var timestamp = '';
                        }

                                                if(o.show_media && field.media_url){
                                                    media =  '<a href="https://twitter.com/' + o.username + '" target="_blank"><img src="' + field.media_url + ':'+o.show_media_size+'" alt="' + o.username + '" class="media" /></a>';
                                                }else{
                                                   media = ''; 
                                                }

                        wInner.append('<li> <i class="fa fa-twitter"></i>' + pIMG + '<div class="tweets_txt">' + field.text.replace(urlpattern, '<a href="$1" target="_blank">$1</a>').replace(usernamepattern, '<a href="https://twitter.com/$1" target="_blank">@$1</a>').replace(hashpattern, '<a href="https://twitter.com/search?q=%23$1" target="_blank">#$1</a>') + media + ' <span>' + timestamp + '</span></div></li>');
                    });

                }).fail(function(jqxhr, textStatus, error) {
                    //var err = textStatus + ', ' + error;
                    wrapper.html('No tweets available');
                });

            });

        }
    });

})(jQuery);

我在這里做的是在tweecool.js上方的底部附近，添加了圖標<i class="fa fa-twitter"></i>

 wInner.append('<li> <i class="fa fa-twitter"></i>' + pIMG + '<div class="tweets_txt">' + field.text.replace(urlpattern, '<a href="$1" target="_blank">$1</a>').replace(usernamepattern, '<a href="https://twitter.com/$1" target="_blank">@$1</a>').replace(hashpattern, '<a href="https://twitter.com/search?q=%23$1" target="_blank">#$1</a>') + media + ' <span>' + timestamp + '</span></div></li>');
                });

因此，每條推文都會加載

每個推文的Twitter徽標示例

如何使用JS顯示帶有自定義圖標的Twitter feed而不是個人資料圖像

問題描述

1 個解決方案

解決方案1
0 2015-08-06 05:02:52

如何使用JS顯示帶有自定義圖標的Twitter feed而不是個人資料圖像

問題描述

1 個解決方案

解決方案1 0 2015-08-06 05:02:52

解決方案1
0 2015-08-06 05:02:52