How To Share Website Content Into Facebook Using AngularJs

Posted By : Vivek Joshi | 10-Sep-2017

angularjs

For Implementing share some content of your web application into facebook use the following steps

Step 1:- Create an app in https://developers.facebook.com/ using your facebook account

Step 2:- Implement facebooks javascript SDK using following javascript code in you main including dependency page (e.g index.html)

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (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 = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Using this code you will get FB object of facebook's javascript SDK object using this we will share you website on facebook or some dynamic content of your websites

step 3:- Add some facebook's meta tag on your websites main page (e.g index.html).

<meta property="og:url" content="Your website URL"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Title for showing on facebook"/>
<meta property="og:image" content="Image url for display"/>
<meta property="og:description" content="Description about your website"/>

Step 4:- Write the following code in your controllers to share your website or some dymanic content through your website into facebook

FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': "redirection url from facebook", // your url to share
'og:title': "Title of post",
'og:site_name':'Name of post',
'og:description':'description about post',
'og:image': 'Image of post',
'og:image:width':'200',//size of image in pixel
'og:image:height':'200'
}
})
}, function(response){
console.log("response is ",response);
});