0

I'm trying to integrate a facebook like button and twitter follow button to my web application.

I'm little confusion about that.I create a DOM element for facebook like and twitter follow button and append to the html.It works fine.

But i want to append the facebook like and twitter follow button in a particular div.

  var fbroot = document.createElement('div');
    fbroot.id = 'fb-root';
    document.body.appendChild(fbroot);

    var fbscript = document.createElement('script');
    fbscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
    document.head.appendChild(fbscript);

    var twitterscript = document.createElement('script');
    twitterscript.src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js';
    document.head.appendChild(twitterscript);

    var social_likes = document.createElement('div');
    social_likes.id = 'social_like';
    document.body.appendChild(social_likes);

    var facebook = document.createElement('div');
    facebook.setAttribute("class", "fb-like");
    facebook.setAttribute("data-href", "https://developers.facebook.com/docs/plugins/");
    facebook.setAttribute("data-layout", "button");
    facebook.setAttribute("data-action", "like");
    facebook.setAttribute("data-size", "large");
    facebook.setAttribute("data-show-faces", "true");
    facebook.setAttribute("data-share", "false");
    document.body.appendChild(facebook);


    var twitter = document.createElement('a');
    twitter.setAttribute("href", "http://twitter.com/TwitterDev");
    twitter.setAttribute("class", "twitter-follow-button");
    twitter.setAttribute("data-size", "large");
    twitter.setAttribute("data-show-count", "false");
    document.body.appendChild(twitter);

    window.fbAsyncInit = function() {
    FB.Event.subscribe('edge.create', function(response) {
      alert('You liked the URL: ' + response);
     });
   FB.Event.subscribe('edge.remove', function(response) {
     alert('You unliked the URL: ' + response);
   });
};
 (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s);
 js.id = id;
 js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10&appId=115700475727068";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

<!-- //twitter javascript SDK -->
window.twttr = (function(d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = {
_e: [],
ready: function(f) {
  t._e.push(f)
  }
 });
 }(document, "script", "twitter-wjs"));
  twttr.ready(function(twttr) {
  twttr.events.bind('follow', function(e) {
  alert("FOLLOW!");
 });
});

And i am trying to append the social plugins to a particular div like that.

document.getElementById("demo").appendChild(social_likes);

It appended successfully but i don't see the social plugins in a div.I can't find what i'm wrongly do that.

Sakthivel
  • 139
  • 1
  • 16

0 Answers0