twitterangularjstwitter-follow

Twitter follow button appears as link in Angular templates

One page app, where there are user-profile pages(that you change dynamically).

This doesnt work, it appears as link

<a href='https://twitter.com/{{user.twitter}}' class='twitter-follow-button' data-show-count='false' data-size='large'>Follow @{{user.twitter}}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

enter image description here

If it reinitializes the code it doesn't work either

<div ng-show="user.twitter" ng-bind-html-unsafe="user.twitter|followButton">
Solution

  • I forgot about Iframe, there's no option on twitter when you generate the button. So it works!

    <iframe ng-show="user.twitter" allowtransparency="true" frameborder="0" scrolling="no"
              src="//platform.twitter.com/widgets/follow_button.html?screen_name={{user.twitter}}"
              style="width:300px; height:20px;"></iframe>

    Also very important: iframes update history. To solve this problem I generate element iframe dynamically and then appendChild it to the location where it is supposed to be.

    Here's a good example: http://nirlevy.blogspot.com/2007/09/avoding-browser-history-when-changing.html