Dynamic follow button: Creating an element and attaching it dynamically to the DOM - dynamic html
Topics

Dynamic follow button: Creating an element and attaching it dynamically to the DOM - dynamic html

how to create a dynamic follow button for twitter
Scroll down to see the bar appear.

As you can see here I have been experimenting with the bar. The first version showed a link to my twitter profile in the bar. Now I placed a follow button into the bar. It didn't work until I inserted "twttr.widgets.load()" into the code below. This will search the entire document.body DOM tree for uninitialized widgets.

The following is Native twitter script. This code also needs to be inserted before the code in order for the dynamic follow button to work. If this is not loaded the browser won't know what is "twttr.widgets.load()".

  
  window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));

 
Let me give some instructions, to make it convenient for you to implement. To see more comments concerning the code use the "peek" button below:

1. Insert the code in-between <pre> and </pre> into your site, preferably at the beginning of the site.
2. Change the content to your needs, lines that need change are marked with *change this*
3. Be my friend on twitter and press the button now
4. Insert this into your css file, adapt the colors if you like, of course:

.dynamic {
    background-color:#8000FF;
    left: 0px; 
    right: 0px;
    height:300px;
    text-align:center;
}

5. Insert the following script into your site (press "peek" anchor below). It can be at the end.

Or download zip.

submit to reddit





Sneak peek of the server side code