Not able to add the Facebook Fanpage to my blog

[s.shekhar90]

Well hi this is kinda like my first post(if you ignore the introduction thread)!

Hi I want to add the Facebook Like Button on my Blog(The one that says - Like this Facebook Fan Page Dedicated to this Blog)

The Facebook generated the HTML/Java code to add just after the body tag...but that did not help at all. The Blog is on eBlogger(by google).


And also i wanted people to give their opinions on it. Although the content is not 100% original but some of it really is.

This is the Blog Address: Tech Magnet


Also i created a QR code for the blog
*4.bp.blogspot.com/-i4-aKXDvBJo/T2mOY6jzD5I/AAAAAAAAAKo/OynUpeTOiO8/s1600/Capture.JPG


P.S. - I used to be a Tech maniac....but made a mistake and filled civil engg instead of computers sciences....so lost all touch of technology for 4 years....now i want to make a comeback to the tech world again!..Pl help!

 

[Vyom]

The Facebook generated the HTML/Java code to add just after the body tag...but that did not help at all. The Blog is on eBlogger(by google).

The page at facebook not only generates the code to place just after the body tag, but also the code which is to put in the HTML of the blog template, so that the plugin appear on the same.

So, have you added the code (something similar to below) at an appropriate place in the body tag, so that the like button may appear on the blog?

<div class="fb-like" data-href="*themoviemind.blogspot.in" data-send="true" data-width="450" data-show-faces="true"></div>

 

[s.shekhar90]

Hi Vyom
thanks for the quick reply, i also noticed that it is actually a two step process.

This actually creates another problem - I know only the basic HTML which is taught in school. So i am not able to put it in the right spot(it always pops up at the wrong place & not where i want to put it)

So is there any other way by which i can place it exactly where i want on the page???
or is there a way by which i can get a widget or something that can be directly imported on the layout page?

 

[Vyom]

Here's a step by step guide after following which you will get the like button on your blog using the IFRAME code.

1. Goto the following page and enter the address of blog in "URL to like" textbox: *developers.facebook.com/docs/reference/plugins/like/
2. Uncheck the Send button. This is important or you wont get the IFRAME code, that we need.
3. Click "Get Code" button.
4. Click IFRAME tab. And copy the code under it.

(Next 3 steps you might know, but just for record.)

5. Goto the Template of your blog from this address: *draft.blogger.com/home
6. Click "Edit HTML" button, and click Proceed.
7. Check mark, "Expand Widget Templates"

Now, we will put this code at the appropriate place in the Template of your blog.

8. Copy the entire code from the Big text box into a text editor like, "Notepad++" (so that it's easier to edit the code.)
9. Now, Ctrl + F, the code, "data:authors". This is the code for the widget for the "About Me" section of your blog. We will place the like button below this, like you can see on my blog: themoviemind.blogspot.com
10. Find the Closing div tag () for this widget. And paste the IFRAME code just above this line.

I have attached a pic for your reference.

Spoiler

*i.imgur.com/LVPGU.png

After adding the IFRAME code, copy and paste the whole code back to the template text box and click "Preview". You should see a like button below the About Me box on your blog. I hope you do!

 

[Whistler81]

I know only the basic HTML which is taught in school.

If that's the case then I think you have a pretty awesome blog. Well done.

 

[s.shekhar90]

Well thanks again vyom
-> the step by step guide was very helpful....i noticed that you have used the same on your blog.....but this i frame tag was too wide and it extends the width of the page that makes a horizontal scroll bar appear on the blog...yours too....well you would already know that but still i found the remedy - the text on the right of the like button does not take more than 200 pixels so you can reduce the "width = 450 pixels" to 200pix or whatever ...it would remove the horizontal scroll bar.

gr8 blog you have btw....i like movies too!

So the like button was successfully installed.
But there is one little shortcoming-- i.e. The LIKE button does not link to my facebook fan page- so that if someone presses like button the likes increase on the linked facebook page

On Facebook
"Can I link the Like button to my Facebook page?

Yes. Simply specify the URL of your Facebook page in the href parameter of the button."

As suggested i specified my facebook page url but that doesnt help at all.
This is the facebook page address: Tech Magnet | Facebook

 

[s.shekhar90]

If that's the case then I think you have a pretty awesome blog. Well done.

Thanks a lot whisler, your appreciation and critics are always welcome!

 

[s.shekhar90]

Well figured it out both the facebook like button as well as the facebook like box now successfully work.....thanks to all who helped!