Twitter feed on the index page

(14 posts) (5 voices)

1. 

   flatrabbit
   Member

   How do I set this up so that it functions?

   Posted 1 year ago #
2. 

   Elliott
   Support

   Hello flatrabbit, sorry for the late reply.

   I am currently having some trouble with the HTML/CSS version. I will go ahead and flag this topic for the rest of our team and we should hear a reply shortly.

   Posted 1 year ago #
3. 

   Elliott
   Support

   Sorry for the wait flatrabbit,

   You are talking about the twitter widget correct? If this is so then on the page you want to display your tweets paste this HTML in your sidebar,

   <div class="widget webtreats_twitter_widget">
   	<h3 class="widgettitle">Recent Tweets</h3>
   	<div class="twitter_bird"></div>
   	<ul></ul>
   </div>

   Next, at the very bottom of your page you should see this,

   </body>
   </html>

   Go ahead and replace it with this,

    <style type = 'text/css'>
    .webtreats_twitter_widget ul a { display: inline !important; }
    .webtreats_twitter_widget ul li { margin-bottom: 10px !important; }
    </style>
    <script type = 'text/javascript'>
    
   function grabTweets(twitters) {
     var statusHTML = [];
     for (var i=0; i<twitters.length; i++){
       var username = twitters[i].user.screen_name;
       var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
         return '<a href="'+url+'">'+url+'</a>';
       }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
         return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
       });
       statusHTML.push('
   <li><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+ status + '' + relative_time(twitters[i].created_at)+'</a></li>
   ');
     }
     jQuery('.webtreats_twitter_widget ul').html(statusHTML.join(''));
   }
    
   function relative_time(time_value) {
     var values = time_value.split(" ");
     time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
     var parsed_date = Date.parse(time_value);
     var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
     var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
     delta = delta + (relative_to.getTimezoneOffset() * 60);
    
     if (delta < 60) {
       return 'less than a minute ago';
     } else if(delta < 120) {
       return 'about a minute ago';
     } else if(delta < (60*60)) {
       return (parseInt(delta / 60)).toString() + ' minutes ago';
     } else if(delta < (120*60)) {
       return 'about an hour ago';
     } else if(delta < (24*60*60)) {
       return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
     } else if(delta < (48*60*60)) {
       return '1 day ago';
     } else {
       return (parseInt(delta / 86400)).toString() + ' days ago';
     }
   }
    
   jQuery(document).ready(function() {
       var username = 'YOUR USERNAME';
       jQuery.getScript('http://twitter.com/statuses/user_timeline/' + username + '.json?callback=grabTweets&count=5');
   });
    
   </script>
    
   </body>
   </html>

   Make sure to place your twitter username in this section, "var username = 'YOUR USERNAME';". I attached a sample of it being used on the blog page.

   Let us know if this works for you and if you have any other questions.

   Attachments

   1. blog_single.zip (7.3 KB, 2 downloads) 1 year old

   Posted 1 year ago #
4. 

   Lanky
   Member

   Thanks for posting this - very useful feature.

   Posted 1 year ago #
5. 

   flatrabbit
   Member

   Thanks. I'll give it a try. Cheers.

   Posted 1 year ago #
6. 

   JordanBostrom
   Member

   Hello. I have the Awake HTML/CSS Template. I am having a really hard time getting the Twitter feed to work. I followed the instructions above, and I have done it multiple times.

   Do I need the twitter.php or widgets.php from the wordpress template (I bought that as well)? Just to clarify, I can get it to work on wordpress template, but not the standalone HTML/CSS template. Should the Twitter feed work by following the steps above and just replacing 'YOUR USERNAME';

   Posted 1 year ago #
7. 

   Elliott
   Support

   Hello JordanBostrom,

   Make sure to copy each section to your page. Go ahead and send us a link so we can take a closer look.

   Posted 1 year ago #
8. 

   Elliott
   Support

   Hey JordanBostrom,

   On your site you will see this,

   `statusHTML.push('
   <li><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+ status + '' + relative_time(twitters[i].created_at)+'</a></li>
   ');`

   Try changing it like this,

   statusHTML.push('<li><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+ status + '' + relative_time(twitters[i].created_at)+'</a></li>');

   So it is all on one line.

   Posted 1 year ago #
9. 

   JordanBostrom
   Member

   Wow, that was an easy fix. Thanks a lot Elliot! Keep the great templates and support coming.

   Posted 1 year ago #
10. 

    Elliott
    Support

    Glad that worked for you JordanBostrom, let us know if you need anything else.

    Posted 1 year ago #
11. 

    MatejKravanja
    Member

    Hi,

    I can't get this to work.

    I have done everything you said Elliot, but the only thing that's showing up is Header, Divider and a Bird. No tweets.

    Any ideas?

    P.S.: Trying to do this in my HTML/CSS InFocus Theme.

    Posted 1 year ago #
12. 

    Elliott
    Support

    If possible then send us a link to your site MatejKravanja so we can take a look at your code.

    Posted 1 year ago #
13. 

    MatejKravanja
    Member

    http://www.hairstyle-expert.com/demo.html

    Posted 1 year ago #
14. 

    Elliott
    Support

    Your currently getting a javascript error,

    jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto is not a function
    [Break On This Error] "theme": 'light_square' /* light_rou...uare / dark_square */

    Which I think is because your prettyPhoto.js script is giving you a 404,

    http://www.hairstyle-expert.com/support-files/prettyPhoto/js/jquery.prettyPhoto.js

    Check to see if that file exists on your server or if you need to give it read permissions.

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.