Blogs Eye

Adding a Facebook Like button to your web page

I finished my Facebook Like widget. All the good names were taken and I had to use the name Facebook Open Graph Widget. At last look there were more than a dozen plugins that do just about the same thing. Mine, of course, is the best of the lot.

You can also roll your own.

Step 1 is to open the web page so you can change the headers. If you are using WordPress, then this is the header.php file in you theme. Just before the </head> tag add the following:

<meta property="og:title" content="Blogs Eye" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.blogseye.com/"/>
<meta property="og:site_name" content="Blogs Eye" />
<meta property="fb:admins" content="kpgraham" />
<meta property="og:description" content="First you dream, then you die" />
<meta property="og:image" content="http://www.cthreepo.com/images/ship1.gif" />

These are my tags. You would change the url, title, description , image and the fb:admins meta has your facebook id. You are not kpgraham!

Save the file and then go to this page to get your facebook button code.  http://developers.facebook.com/docs/reference/plugins/like

Copy the code that the facebook form creates and paste that in your webpage somewhere. In WordPress that will be sidebar.php or at the bottom of a page or the footer.php file. If you are using wordpress you can use a text widget to paste the code into your sidebar.

Easy stuff – that’s why there are so many plugins and widgets that appeared this weekend in the WordPress repository.


8 Responses to “Adding a Facebook Like button to your web page”

  1. Chris Lemon says:

    Aw, shoot…it pulled out the HTML. Anyhow, here’s what gets added to other widgets:

    before_title = [h2 class="widgettitle"]
    after_title = [/h2]

  2. Chris Lemon says:

    Well, now I’m not sure. I have installed other widgets that also seem to use the before_title and after_title calls, and they seem to be working…in my case the before_title correctly adds and after_title adds . But your widget isn’t adding any of that. It shouldn’t have anything to do with the actual Facebook code…this is all before the iframe.

  3. Chris Lemon says:

    Wait, I think I see. Your widget does seem to call ‘before_title’ and ‘after_title'; it’s just that those aren’t defined in my theme (F2), I guess. How tiresome, I thought they were. I guess I’m going to have to figure out if I can hack it in there, with my exceptionally limited CSS skills. Sigh.

  4. Chris Lemon says:

    (In fact, pay my site a visit at http://fredsmythe.com/ and you’ll see what I mean. I’ll leave it like that for a while, even though I don’t like how it looks.

    • Keith says:

      Part of the problem is that the Facebook button is so badly styled.

      I installed this plugin and then went to like all of the pages that I wanted to create as facebook pages. I then unsinstalled it and installed a “Fan” button for each page. The fan button is ugly, too, but it has more stuff like posts and better pictures.

      Until Facebook makes some options and styling stuff for the Like pages I am not sure that I’ll use them.

  5. Chris Lemon says:

    I’m liking this widget, but I, too, have an issue: the Widget Title is not showing up in the same typeface as the rest of my widgets. Isn’t there a way to render this that figures out what font the theme is using for other widgets and use that? Right now I have to use no title at all or else it looks horrible, and I’d love to have something like “LIKE US ON FACEBOOK…” or something.

  6. adrian says:

    I just installed your Facebook Open Graph Widget. It works fine. Only one problem. The Widget is a bit to big for the sidebar. I use standard layout in my wordpress installation and have no idea, how to change the width of the sidebar.

Leave a Reply

Login Forum
Info