I’ve just added Twitter’s @anywhere hovercard feature in Flutter Happy and you can see it from the screenshot of my comment section. I’m loving it. ♥ I just wanted to share with you this one coz I find it really cool. ♥ If you like the feature, then this post is for you. Hovercards preview the user’s twitter profile without leaving your site.

Here’s how to add the hovercard feature to your site.

1. Go to the Twitter’s Developers site, and create an application.



2. The site will give you a snippet of code.

Copy, and paste it in the header section just below the < ?php wp_head(); ?> and the closing head section.

  <script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script> 

Insert your consumer or API key on the YOUR_API_KEY part.

3. Directly underneath that code, paste this:

    <script type="text/javascript">
        twttr.anywhere(function (T) {
         T.hovercards();
          infer: true
            });
      </script>
   

Thanks goes out to Andrew Bolster for the infer: true part of my code.

4. Now you’re almost done. If you’ve done everything right, your hovercard will look something like this.



5. If what you wanted is the hovercard expanded version in my first screenshot (without having to click the link more), just replace the code you copied in #3 with this one.

<script type="text/javascript">
     twttr.anywhere(function (T) {
      T.hovercards({expanded: true});
	  infer:true
    });
   </script>

P.S. I’m now using @flutterhappy. ♥