Facebook Open Graph Widget

Adds a sidebar widget to Facebook pages so that users can use Facebook to “Like” a page, post or blog.

The plugin takes care of adding the Facebook header information.

In order to add this widget to Facebook you must be a member of Facebook. The widget will not appear unless you set your
Facebook ID in the widget options. Your Facebook id is the long number that Facebook uses to identify you, or you can use your unique username if you have one. If you can’t find your user id, try looking in your photos. I found mine in the url to the albumns.

You have to include an image for the Facebook page. This should be the web address of an image or icon that you use to describe your page and it is subject to the Facebook rules for size and format.

The widget will allow a user to either “like” your website home page, or the individual pages in your website. You can select if you want just the main page to be liked. This makes it easier to administer your facebook pages. If you want individaul pages and posts to be liked and treated as separate Facebook pages then select posts and Pages.

You can optionally include your geocode information and your contact information. I would be careful with your email address as it is in plain text for the spambots to harvest. If you need your users to contact you, and you have a good spam filter, you should include this information.

Includes styling settings. You can specify width, height and color scheme. You can use recommend instead of like and change the font. Use the dark color scheme if you have a dark background on your site. If you want a small button select button count and don’t display faces.

Download

Latest version: Download Facebook Open Graph Widget v0.9 [zip]

Installation

  1. Download the plugin.
  2. Upload the plugin to your wp-content/plugins directory.
  3. Activate the plugin.
  4. Using the widgets control, drage the dwidget to your sidebar.
  5. Enter your facebook ID, the URL of your image and any other information that you may need.
  6. Save your work.
  7. Go to one of your pages and if the widget displays, try to “like” the page and see if it works.
  8. Go to BlogsEye.com and like the site to recieve updates about my widgets on Facebook, and report issues.

FAQ

Changelog

0.9

  • Added styling for customizing css

0.8

  • Fixed (again) issue in showing faces. Added units to box sizing. Fixed widget title.

0.7

  • Fixed issue in showing faces

0.6

  • Added styling parameters

0.5

  • initial release of working code. I need comments and recommendations for improvements. Please report any bugs.
8 Comments

8 Responses to “Facebook Open Graph Widget”

  1. Adrian says:

    Your plugin is great! But I might have a problem. I set the like button for individual pages but seems to work only for my whole blog. Maybe you have any idea how to fix? Before i was able to “like” individual pages without any problems.

  2. movies says:

    Thanks very nice pluging.
    Miley.

  3. Mas says:

    How come there’s absolutely NO CSS tags for me to work with? The widget title is just a text that’s outside of the actual element that contains the iframe, and has no tags, no id or anything… I thought your widget would work for my client but Not like that…

  4. Keith says:

    I made the changes and fixed abug that contributed to your problem. There are three classes available for custom styling, plus the before and after tags are working again.

    Thanks for pointing this out.

    The WordPress repository should show a new version any minute now if you still want to try using this.

    Keith

  5. Mas says:

    Thanks for the quick update. If you don’t mind, can you put the h3 widget-title in the same list element as the iframe because right now, the title container and the iframe container are totally separate…

  6. Mas says:

    Found the problem: line 244 of the code the tag containing iframe should be div and not li…

  7. ramesh says:

    Hi,
    Tnks for the plugin.
    A small problem I am facing is that the site image which I have fed into the widget parameters does not get displayed in facebook.
    I checked the code in the editor and my image URL does not reflect anywhere in the code.
    Can you pls help me??
    Ramesh

  8. Keith says:

    Facebook has some limitations on size and format for images. It could be your image is too large. You may have to use the Facebook edit page options to reset the image. Also the URL that put in the field must include http:// and the whole path to the image or Facebook can’t find it.

    Keith

Leave a Reply