Current Post

Social Graph Protocol Plugin For WordPress

By: Adam Losier on in Plugins - 22 Comments

The Social Graph Protocol plugin for WordPress is a little thing I put together way back in August of 2011 I did various updates to the software but haven’t touched up on it in about nine months. It used to be hosted at my old domain bizzylabs.com, however I let that domain expire and have decided to put some new life into the project.

Overview

The Social Graph Protocol plugin is a simple and easy way that enables you to incorporate your websites content into the Open Graph. It basically works by including meta tags into your websites code, from there Facebook will see your posts and pages as Facebook Pages. The easiest way to think of it is when a user comes to your site and clicks a like button on your content, a connection is created between you and that user. From there your webpage has the chance to appear in that users “Likes and Interests” section of their Facebook profile.

Additionally your webpages content can also show up in places that Facebook pages show up, for example the search box on Facebook. So basically you install this plugin, insert a couple details such as a description of your website, a screenshot of your website (optional) and your Facebook user id and after that every time a user clicks like on your content Facebook puts that post or page into that users Facebook profile for there friends to see and enables your website to be searched right inside of Facebook.

Check out the little example photo below, it should help give you a little bit of a visual representation of what will happen if you have this plugin installed and a user clicks a “Like or Recommend” button on your website.

Open Graph Protocol

Where To Get It and How To Install It

Well if you want to download it and upload it to your servers manually than you can go to the Social Graph Protocol page on WordPress.org and easily download it from there.

However the easiest way to install it is to jump into your WordPress administration panel, go to Plugins, click the “Add New” link near the top of the page and do a search for “Social Graph Protocol”, it should show up as the first result and will be by bizzyLabs or Adam Losier, both are me because I used to run www.bizzylabs.com but recently decided I may as well stop hiding and start getting my name out there.

After you’ve found it simply click the install now button, click ok to verify, then click “Activate Plugin” and you’ve successfully installed the plugin. Easy Enough.

Setting It Up After Installation

I’m going to break this into two parts, the first part I’m going to go over some of the basic plugin settings and the second part I’m going to cover a bit about the individual post and page settings. But for this first part, after you’ve installed the Social Graph Protocol plugin, simply find the link labeled “Social Graph” from your left hand tool bar in your WordPress administration panel.

Once there you’ll be presented with four different settings that I discuss below, within the plugin I’ve also added help documentation to the page so you can reference this material right inside the plugin. All you need to do is click the little “Help” link in the top right when your in the plugin settings page.

Site Description: This is where you’ll want to add a short one or two sentence description of your website in general. Keep this short and to the point, I would suggest keeping it under 150 characters, basically no longer than a Tweet and your in the sweet spot. Additionally this is actually an optional setting, it’s not 100% required because if it’s missing the plugin will automatically fill it in with your websites “Tagline” located in the Settings of your WordPress administration panel.

Site Image: This is an optional feature, basically it’s a good thing to have because it provides anyone looking at it on Facebook a visual representation of your website, you can create a screenshot of your site using Photoshop or some other editing program and then upload it to WordPress using the “Media” tab. However your image MUST be at least 50 px by 50 px (actually a minimum of 200 px by 200 px is preferred), have a maximum aspect ratio of 3:1 and can only be a PNG, JPEG or GIF.

Facebook UIDs: This setting requires a comma-separated list of either user Facebook user ids and/or Facebook platform application ids (Only use the ids of people or applications you trust to administer your websites content). Obtaining your Facebook user id requires you to visit the Facebook Insights page and to click the green “Insights for your Website” button that will then generate a popup window with something that will look like “<meta property=”fb:admins” content=”498456415648456” />” I’ve highlighted the part of the code that contains your Facebook user id. Just take that number and use it for this setting.

Disable Namespaces: In order for this to work our software needs to add code to your websites html tag, sometimes people will hard code the xmlns:og and xmlns:fb namespaces into your websites theme. To determine if these entries already exist simply visit your website, right click your mouse and select view source. Near the top of this document find the tag that starts with <html if this tag contains the words xmlns:og and xmlns:fb then you can put a check-mark in this box (P.S. Do this before you activate the plugin). If it does not then you can leave this field unchecked and the software will automatically add the required tags to your theme.

Post and Page Specific Settings

After you’ve got all that worked out you’ll notice now that on your posts and pages edit screens additional options below the post editor, take a look at the screenshot below to see what I mean.

Social Graph Protocol Settings

You’ll notice six different sections under the new meta box generated by my plugin. They are General Settings, Location Settings, Personal/Business Settings, Video Settings, Audio Settings, and Product Settings.

You don’t have to fill out every single section for each post you make, in fact you don’t have to fill out anything if you don’t want to and everything will still work fine, however by filling out certain details pertaining to your specific post or page it will increase the effectiveness of the plugin.

For instance lets say I’m writing just a general post about the television show “Gold Rush” under the general settings I could change the Type parameter to display as “Tv Show” instead of the default “Article”, this lets Facebook know that what I’m writing is going to be about a particular television show. If you don’t know which option to select, simply leave it as “Article”. Additionally you can fill out an optional Title, Description, or image URL for this post. For this example I would not fill out anything else.

Another example is if I’m writing a post about a particular restaurant I can then set the “Type” parameter under the general settings to “Restaurant” and I can fill out some addition information about that restaurant if I want to for instance I can enter in some location settings, where in the real world does this restaurant reside, its longitude and latitude, city, street address, country, ect… I can even take it one step more and enter in some values under the “Personal/Business” settings, I can enter in the companies email address, phone and fax number.

By now I think you get the point, you don’t have to fill out all the additional options for every post, actually I would highly suggest you don’t fill them all out for every post, only fill out the information strictly related to the topic at hand.

Frequently Asked Questions

Before I activated your plugin I checked the HTML source code for the xmlns:og and xmlns:fb namespaces and didn’t see them so I left the “Disabled Namespace” option unselected and re-checked after the plugin was activated but the xmlns:og and xmlns:fb namespaces were still not there. How do I fix This?

Sometimes theme authors will not include the WordPress language_attributes() function inside the html tag of your theme, what you need to do is to go into Appearance -> Editor in your WordPress administration panel and from the list on the right hand side click the “Header” or “header.php” link. This will open up that file in the editor. After that near the top locate the tag that starts with <html and make sure it looks like the code below.

<html <?php language_attributes(); ?>>

It’s ok if it’s not exactly the same, you basically just need to make sure the part of it is in-between the opening and closing brackets.

I’ve added your plugin to my site is there anything else I need to do to get my content on Facebook?

Actually there is, you have to have the Facebook “Like”, “Recommend” or “Connect” button somewhere on your website on each post/page. In order for Facebook to pick up your content you have to have this plugin installed and a Facebook user has to visit your website and essentially like or recommend the post/page or main site. Only then will the content be displayed on Facebook. Additionally Facebook may not always add your content to a users “Likes” or “Interests” section, Facebook reserves the right to do to this at their own discretion but without the plugin or the like buttons you can rest assured they’ll never index your content.

Are there any additional benefits to having my content part of the Open Graph?

Well there is one and that is better statistics, each piece of content Facebook pics up will act like a Facebook page, enabling you to go into your Facebook Insights and see specific demographics about the users who like your content, things like there age and gender. Below is a screenshot that show’s some of the additional insights you can get by using this plugin.

Facebook Insights Demographics

Final Notes

I’m going to be making various updates to the plugins soon, removing some of the old bizzyLabs references and updating the links, I’ll eventually bring back additional language support and fix up some known bugs but if you have any features you would like to see me implement, any issues with the plugin, or any thoughts you might have regarding this plugin, then by all means feel free to leave them in the comments below and I’ll get back to you as soon as I can.

22 Comments

    • AUDIOMIND
    • Reader
    • November 26, 2012 at 7:38 pm

    Getting this error?
    “Fatal error: Call to undefined method stdClass::add_help_tab() in /…/wp-content/plugins/social-graph-protocol/index.php on line 53″

    Please advise. Thanks!

      • Adam Losier
      • Staff
      • November 26, 2012 at 9:15 pm

      What version of WordPress are you running?

  • On the configuration pannel, how can I select the image?

      • Adam Losier
      • Staff
      • November 28, 2012 at 12:39 am

      @Jamie – There is no current way to select the image you have to copy and paste the image URL. I’m working on making it a one click upload and select deal in a future release.

    • Michael
    • Reader
    • November 28, 2012 at 7:59 pm

    This is probably one of the best WP open graph plugins I have seen…. But as an amateur web creator my problem is that in order to have good Facebook connectivity I need a couple of plugins….so of course I run into the problem of having multiple OG tags. Is it possible to use this plugin while also using the Facebook social plugins like the “like box”?

      • Adam Losier
      • Staff
      • November 28, 2012 at 8:33 pm

      @Michael – Yes it’s recommended that you use this Plugin with other Facebook social plugins (especially the one’s that include a like or recommend box on your site). However if you use another plugin and it generates duplicate OG tags, please let us know which plugin your using along side ours so that we can debug and remove any duplications of the OG tags.

    • Michael
    • Reader
    • November 28, 2012 at 8:43 pm

    Thank you for the quick response. I am using Facebook’s WP plugin. I am getting multiple OG:url values.

      • Adam Losier
      • Staff
      • November 28, 2012 at 8:59 pm

      Thanks for letting us know,

      I’ll attempt to dive into the issue later tonight and hopefully get a fix out for it soon. If you see any other issues with our plugin please let us know it’s always great to get feedback from the people using our software so that we are able to improve upon them and fix any bugs that may have been found.

      Thanks Again.

    • Michael
    • Reader
    • November 28, 2012 at 9:40 pm

    Thanks, as a dirty fix I went into your plugin and commented out this line: $og->url = get_permalink(); under ‘title of this post’….

    I know it is probably not the best way to do it, but now everything is working great and I only get a couple of minor warnings in Facebook’s debug page.

      • Adam Losier
      • Staff
      • December 1, 2012 at 9:48 pm

      Updated the plugin to solve your issue, however its not a 100% sure fire fix, you may still encounter this issue with other future social plugins you use along side this one, if you do find any more duplicate issues after using a different plugin just let me know and I’ll make it compatible with those plugins as well.

      I’m going to go through a bunch of social plugins in the coming weeks and check compatibilities on my own as well.

    • Jon
    • Reader
    • December 1, 2012 at 12:11 pm

    I appear to be getting duplicate xmlns og tags on my page?

    I’m trying to get it to show a video in the feed as per this article http://www.socialmediaexaminer.com/how-to-triple-your-youtube-video-views-with-facebook/
    I’ve tried this with the recommend button I have that appears after each blog – just appeared like any other item in my feed. Naturally I can’t check the ‘like us’ feed as I already like the page.

    I’m using ‘Facebook Like Box Widget’ with floating sidebar option.

    Any suggestions greatly appreciated?

      • Adam Losier
      • Staff
      • December 1, 2012 at 6:53 pm

      Hi Jon,

      In your WordPress Admin Panel under the Social Graph menu there is a check-box option called disable namespaces, if you are getting duplicate xmlns og tags on your site make sure this option is checked it will remove the xmlns og tags our plugin inserts, if after you click this and there is still a duplicate xmlns og tags then it is being caused by another plugin your using. Attempt to disable one of the other social plugins you may be using, chances are your using two other social plugins that both place the xmlns og tag on your site.

      In a future release I’m going to be removing the xmlns og option from the list because our plugin will automatically detect the existence of this value and not include a duplicate if it already exists. But for now you have to do it manually.

      Now if your attempting to get a video in your feed as per the article you’ve linked to then on a post or page under the Video options in the Social Graph Protocol box (should be under your post/page content box) you’ll need to enter in the YouTube URL, along with it’s width, height, and enter in “application/shockwave-flash” for the type parameter and after that it should work. I will run some additional tests myself though and make sure it’s working the way it should be and update it in an upcoming release if I find any issues.

      Hope this helps you out for now, I’m always working hard to make sure this plugin performs well and in the future I’ll be including more social options into the plugin, Things like giving you the option to add a Facebook like and recommend button on your site as well as some other aspects so that all the only social plugin you’ll need to use is ours but it’ll take some time to get all these features implemented.

    • Jon
    • Reader
    • December 4, 2012 at 2:41 pm

    Thanks Adam, Not sure if it’s working but made sure all the settings were as per instructions.

    I’ll let you know ho I get on.

    Jon

    • Jon
    • Reader
    • December 7, 2012 at 11:55 am

    Hi Adam

    An update: I posted a couple of blog items yesterday to my FB page, in doing so it created a link with an image which included the small white ‘play video’ triangle, except it randomly selected static images from the overall blog page rather than the specific video I wanted it to. On clicking with the link or the image link it went to the blog posting.

    my setting are:
    Video: http://youtube.googleapis.com/v/xwqCBZSSv58
    Video Height: 315
    Video Width: 500
    Video Type: application/x-shockwave-flash

    could I just have the direct link to the youtube video or is the googleapis bit important to make it work? Any other thoughts? Thanks Jon

      • Adam Losier
      • Staff
      • December 7, 2012 at 9:55 pm

      Hi Jon,

      First the images issue is something I’m aware of I think its a bug and I’ve noticed it pop up here and there I’ll be releasing a fix for that when I can find the time to do it up, hopefully in this next week. As for using the Google API link vs the regular YouTube links in the Video section, definitely go with the Google API link as your doing.

      The reason for this is because the Facebook Open Graph doesn’t recognize the regular YouTube URLs as a video it recognizes them as a webpage however using the Google API link it recognizes it as being a video. If you use the YouTube links when a user shares or likes the post it will appear as an image instead of a playable video inside the users news feed.

      I’m planning on doing some major upgrades to the plugin and I’m going to create a series of posts about how to correctly utilize all the features but that is something I’m planning for a little in the long term. For now I just want to fix up a few bugs and make sure its nice and stable before expanding upon the project but once I launch a new website I’m working on I’ll have much more time to dedicate to this plugin.

    • Marko
    • Reader
    • February 12, 2013 at 8:33 am

    I am using this plugin and like it very much but couple of days ago it stopped showing the right image. Instead of featured image, now it shows several images.
    Description is still intact but the images are all messed up.

    If I uninstall plugin I get error “had type ‘article’ and cannot be changed to an object of type ‘website’ to avoid data corruption of existing actions”,
    please help.

    • Hi Marko,

      It sounds like there is a conflict with another open graph plugin you may be using, could you provide me a list of any other Facebook or social related plugins that you might be using so that I can attempt to re-create your error on my end. I’m going to be doing some major overhauls to the plugin (hopefully soon) and your feedback would be grateful.

      I know a few people made some suggestions on the images and video end of things but I’ll look through the code and try to determine where about’s your issue might be coming from and hopefully help you out.

    • Marko
    • Reader
    • February 12, 2013 at 8:53 pm

    Hi Adam,
    thank you for your reply. The plugins I’m using are:
    Fast Secure Contact Form
    Digg Digg
    Social Graph Protocol

    And that’s all, I’m not using any other plugin. I’ve tried deactivating one by one but it didn’t help. Also, facebook debugger with your plugin shows no errors. But when I deactivate it, then I get “cannot be changed og type” error, even when I try some other OG plugin.

    • Ok that should be enough information on the error for me to debug it in my code. Unfortunately I cannot give you a time-frame for a fix as I’m in the middle of re-writing most of it but I’ll see what I can do. If I patch it I’ll put it up on the plugin site so it’ll show in your own WordPress admin panel that there is an update.

    • vloo
    • Reader
    • May 1, 2013 at 5:39 pm

    Hey, Adam,

    Why don’t ya try replacing line 237 in index.php with this:

    include_once( plugin_dir_path(__FILE__) . ‘includes/meta-box.php’ );

    Using plugin_dir_path() should make the plugin safer for WordPress instances where plugins dir is moved in another place for some reason (which some security experts suggest).

    • Hi Vloo,

      Thank’s for the suggestion I’ll have to do a test on that for the release of version 2.0.0 this next version is going to be a big one, lots of changes coming, I’m almost done, just got to write some descriptions and do a bunch of field tests before I release the update, hopefully next week sometime I’ll release Version 2.0.0

      Edit: Although it shouldn’t matter since its relative to the plugin directory as long as they don’t change the file structure inside the plugin directory it should still include the file correctly, but I’ll run a test either way just to make sure.

    • Smognogue
    • Reader
    • May 12, 2013 at 7:07 am

    What nice answer

Come join the conversation!

We'd love to hear what you think.

Your email address will not be published. Required fields are marked *