将鼠标悬停在图片上时显示的Instagram点赞数

instagram likes count shown when hover the mouse on image

本文关键字:显示 Instagram 悬停 鼠标      更新时间:2023-09-26

是否可以将Instagram喜欢的计数纳入我的instafeed?

我想看看得到这样的结果在这里输入图像描述

当鼠标悬停在图像上时,将出现类似计数,

在我的工作中需要添加哪些代码?:

$(document).ready(function(){
  
  Instafeed.prototype._makeTemplate = function (template, data) {
    var output, pattern, varName, varValue, _ref;
    pattern = /(?:'#{2})(['w'[']'.]+)(?:'#{2})/;
    output = template;
    while (pattern.test(output)) {
      varName = output.match(pattern)[1];
      varValue = (_ref = this._getObjectProperty(data, varName)) != null ? _ref : '';
      output = output.replace(pattern, "" + varValue);
    }
    return output;
  };
  
  //<a href="##link##"> // original image link
     
  var feed = new Instafeed({
    target: 'instafeed',
    get: 'user',
    userId: 8303117,
	accessToken: '8303117.467ede5.360077337739443ab81ddc05f94ef38d',
    tagName: '{{settings.instafeed_tags}}',
    limit: 8,
    links: true,
    sortBy: 'most-recent',
    clientId: '{{settings.instafeed_client_id}}',
    resolution: 'standard_resolution',
    template: '<div class="cus-col-md-3" style="padding:0;"><a href="##link##" target="_blank" class="zoom" style="background-image: url(##image##);"></a></div>',
    after: function() {
   	  
      if (!this.hasNext()) {
	
      }
      
    },
    before: function () {
      
      $('#instafeed').empty();
      
    },
  });
  
  $(document).find('.livery-instafeed-navigation').on('click', 'a', function (e) {
  	feed.next();
  	e.preventDefault();
  });
  
  feed.run();
  /*userId: 8303117
accessToken: 8303117.467ede5.360077337739443ab81ddc05f94ef38d
  
  */
  
});

我自己做过。你可以使用{{likes}}来获得图片的喜欢数。你应该把它放在你的模板中。

替换:

<div class="cus-col-md-3" style="padding:0;"><a href="##link##" target="_blank" class="zoom" style="background-image: url(##image##);"></a></div>
与这个:

<div class="cus-col-md-3" style="padding:0;"><a href="##link##" target="_blank" class="zoom" style="background-image: url(##image##);"><div class="likes">{{likes}}</div></a></div>

并使用CSS将其放置在你想要的位置,隐藏它并在悬停时显示。

你可以在这里阅读更多关于模板的内容:https://github.com/stevenschobert/instafeed.js模板