Sunday, 4 January 2015

#100ThingsIlearnt- Lesson:3- Integrate facebook comments,likes shares on your blog.



This was something I should have covered long time ago, wonder why it did not strike me. My amazing brother from another mother, Mathaious found that I had not integrated it in my blog and asked me to go ahead and learn how to.
I love people that encourage me to learn, I hope lot of people continue suggesting things I should pick up along the way.
How did I go about doing this? I obviously used my amazing google skills I picked up from my first lesson, read about it here. Anywho, I did find a blog that gave me an overview, but that was before facebook updated itself. It had everything I needed but also thing I did not need. So I experimented a little(read very little) and this is how it is done.


P.s: I barely read through tutorials, I often look at the pictures and figure it out, so there's less words and more pictures. That is how we will roll,kapish?

Step 1:
Step 2 : Click on add new app, you can see i have created one already for the blog. but I am going to another one now.


Step 3: Because It is a blog, I chose website but you can choose whatever your platform is, the basics dont change.


Step 4: Now, as I already have an app registered it asks me to choose a new one or the existing one, but if it is  your first time you wont see this, it will just ask you to enter a name and create app id


Step 5: You just create it, unless you want to make it a test app, then slide the "yes" to a "no", but since it is a blog, I am not testing it, just integrating. Do not forget to choose category,it is a must.




Step 6: As said, copy it into your body tag, now if you are on blogspot this is how you do it 
Click on "HTML", add a <body></body> tag. for some reason,  you dont usually have one. 
Then add that code in the beginning as shown.

EDIT: I tried this without the <body> tag and it still works, so you can skip adding it altogether too. As long as you add the scripts in the beginning whether you make a body tag or not does not matter. 













Step 7:Fill in blog details and click next.

Step 8 : This is for testing purposes, but I added the like button, which comes with a share button on my page anyway, And Add it after the first <script> </script>



Also, this tells the page where you want the button, now it is in the starting,  but nothing is stopping you from putting it at the end, all you do is write your entire blog and then paste this code.


Step 9: So you came here how to add comments, and not "likes" this is how you do it, click on the "comments plugin " hyperlink that you will see on the page as the previous screenshot shows, click on it
Now like a genius  clicked on get code, and just copied it onto the "HTML" part. What I forgot was, the URL needs to be changed to whatever your blog is, or you get this example facebook has put up, so make sure to change that here:


Step 10: Do what it says. Add the first set of code in the beginning, and the second set of code where ever you want to add the comments, so something like this :



You are done :). Writing a tutorial for the first time,  so should that not count as something I learnt too? I am going to ponder on that, while this reaches someone in need :)



Keep learning.

0 comments:

Post a Comment