CODEWITHSUNDEEP
javascriptruby-on-railstwitter
bevanb
bevanb

Reputation: 8511

JS-loaded Twitter share button doesn't render properly

In my Rails app, I have an "infinite page" that loads more blog posts as you scroll down. On each blog post, there is a twitter share button. When the page first loads, all the "above-the-fold" share buttons load great; the button appears properly, and when you click it, the custom text for the tweet appears.

However, the share buttons that load as you scroll down don't work. When you scroll down and more blog posts load, the share button loses its styling (becomes just a plain link), and the custom text feature goes away (when you click it, it opens a blank twitter window, without the custom text).

Even when I load all the twitter JS under each button, it still doesn't work. Here's my button code:

    %a.twitter-share-button{"data-count" => "none", "data-text" => "#{post.title} (My new blog post!)", "data-url" => "http://www.example.com", :href => "https://twitter.com/share"} Tweet
    :javascript
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Upvotes: 0

Views: 1135

Answers (2)

Epuri
Epuri

Reputation: 300

Update: With updated API, it should be 

twttr.widgets.load()

Upvotes: 2

jimw
jimw

Reputation: 2598

According to https://dev.twitter.com/discussions/6860, to add multiple Twitter buttons to a page dynamically, you need to use:

twttr.render();

after adding each group of buttons. This function will render all the buttons currently on the page.

Upvotes: 3

Related Questions