Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can get Twitter hovercard on your blog or website. You must have show I have a Twitter box on the top-right corner of this blog, if you haven’t show it, hopeful you can see it now, hover your mouse on my Twitter handle on that Twitter box. You will see a box appearing with my Twitter details. This used to be on Twitter website but now it is available on Twitter search. If you also want this on your blog or website, let me tell you how
First you need to create an API, click here to know how to create one. Now copy-past the below line in your HTML file just before </BODY> (closing body tag), if you are using Blogger then open Edit HTML (from Dashboard –> Design) and if you are using WordPress (self hosted) open footer.php (from Appearance –> Editor).
<script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1" type="text/javascript"></script>
<script type="text/javascript">
twttr.anywhere(function (T) {T.hovercards();});
</script>Replace API-KEY with your Twitter API
Save the file. Now it will search all the words which have “@” in starting for example “Follow me @Jajodia_Saket on Twitter” now in this it will auto detect if “@” is in starting and it will convert Jajodia_Saket into a link with a hovercard.
If you want to additionally add a hovercard to a word which don’t have “@” then you need use anchor tags (<a>) with Twitter-anywhere-user as class. For e.g.: I want to add hovercard to Jajodia_Saket, so in HTML code I will write
<a class="Twitter-anywhere-user">Jajodia_Saket</a>If you have any question or problem let me know.