Extension : WP Facebook Applications

Si vous devez créer des onglets sur les pages Facebook que vous administrez, que ce soit pour une seule page ou pour des dizaines, cette extension pourra vous aider : WP Facebook Applications ajoute un nouveau menu à votre blog WordPress, dans lequel vous pouvez facilement créer de nouvelles tabs.

Comment créer un onglet sur votre page Facebook ?

Afin de mettre en place un onglet sur votre page, suivez les étapes suivantes :

  1. Après avoir téléchargé et activé l’extension, rendez-vous dans le nouveau menu qui s’affiche sur la gauche de votre panneau d’administration WordPress.
  2. Dans le Menu FB Applications, cliquez sur “Add new”.
  3. Dans la nouvelle page qui s’affiche, jetez un coup d’oeil aux instructions situées sous le panneau de création de contenu.
  4. Rendez-vous sur Facebook pour créer une application, directement sur cette page : http://www.facebook.com/developers/createapp.php
  5. Une fois que vous avez donné un nom à votre application, rendez-vous dans l’onglet Web Site.
  6. Dans cet onglet, renseignez l’URL et le domaine de votre site.
  7. Au dessus de ces données, vous trouverez votre Application ID et votre Application secret. Copiez ces deux valeurs dans les espaces prévus dans l’interface d’administration de votre blog.
  8. Si vous souhaitez que vos fans puissent commenter dans votre onglet Facebook, renseignez le nombre de commentaires que vous souhaitez voir s’afficher. SI vous souhaitez pas intégrer ce formulaire de commentaires, laissez cet espace vide.
  9. Uploadez ensuite l’image que vous souhaitez que les utilisateurs non fans de votre page voient. Définissez cette image comme Image à la Une.
  10. Vous pouvez désormais créer le contenu que vous souhaitez que vos fans voient. Il peut s’agir de texte, de photos, de vidéos… A vous de voir !
  11. Publiez cette page.
  12. Copiez l’URL de la page, et allez le coller dans les paramètres de réglage de votre application Facebook, dans l’onglet Facebook Integration, dans l’espace Tab URL.

Et voilà ! Sauvegardez vos réglages, votre application est maintenant créée, il vous suffit de l’ajouter à votre page !

J’espère que tout est clair ! Si vous avez des questions ou des remarques, n’hésitez pas !

Télécharger l’extension

Suivre le développement du plugin sur Github

52 thoughts on “Extension : WP Facebook Applications

  1. the non-image does not align to the very top, so I always have a 1cm blue line at the top … how can I fix that?

    and how can I get rid of that blue background? could not find it in the css ..

    Thanks

    • As far as I can tell by looking at the code source of your page, you did not precise an application ID when creating the page. That field is empty, thus Facebook cannot work out the fan/non-fan difference.

      • Thank you for your timely response. I remember now a strange ‘bug’ when I first created the page. I had inputed the ID and seeing the information disappear when I updated the pages. I think that was on the chrome browser. So I tried again on Firefox (not sure if that made any real deference, but I seem to have the pages working now.

        Thanks again for your help!

        • I am happy I could help! The next version of the plugin should be ready this week, with a few bugfixes and some new features. I will make sure I test it on Chrome and try to reproduce your issue. Thanks for taking the time to report it to me!

      • I worked a little more with it this morning and it doesn’t seem to be a browser issue. Seemingly randomly the App ID and secret don’t load into the respective fields when I open the page to edit. I am trying to reproduce the bug now. If I can find it I will let you know.

  2. Hi Jeremy!

    Thanks for your nice plugin but I got the following error:

    Fatal error: Cannot redeclare class FacebookApiException in /home/…./public_html/travel/wp-content/plugins/wp-facebook-applications/lib/facebook.php on line 107

    Could you please advise me what’s the trouble and how to fix this?

    • It seems you already have an active Facebook plugin on your site, and that causes conflict. To solve that issue, I suggest you open the template.php file in my plugin, in remove the following line:

      That should do it.

  3. Hi Jeremy! I removed the code but it’s still the same! I also try to remove the but now you can check! The background image of my website also disappear! I’m sorry!

    • Well, I don’t know how I can help you more. It seems there is a plugin that is conflicting with mine, but I don’t know which one. All I can advise you is to try to deactivate any other Facecbook plugin you might have on your blog, and try again, see if deactivating one of them solves the issue.

      If you find out, let me know, I would be interesting in, in order to solve the conflict in my plugin later on.

      U.I.: The background image can’t be used here, since it will be in a small 520px large iFrame on Facebook, you have to use the Featured Image functionality instead, provided by my plugin.

  4. HI Jeremy!

    Thank you very much for your kind support and time! I’m sorry that I cannot help you anything as I’m just novice in programming! I wish I could as the plugin is very nice!
    I have just found an application on Facebook which helps me with the landing page!

    Thanks!

    • I had a look at your link, and this is not my plugin, not even WordPress; you are using something else to display that tab, so I am afraid I can’t help you here.

    • Well, it seems we figured out the problem, the tab works as expected for the example you provided.

      As per the HTTPS issue, unfortunately there is nothing my plugin can do about that: before you can add an https address in the field provided by Facebook, you need to buy an SSL certificate for your domain.

      Once you did that and configured it on your host, you will be able to access your domain with https and consequently you will be able to add that URL into the Facebook app field.

  5. Hi Jeremy,

    Thanks for the plugin. I have everything setup but i am getting an error at the top of my pages. The error is:

    Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /home/sfintern/public_html/fbpg/wp-content/plugins/wp-facebook-applications/template.php:6) in /home/sfintern/public_html/fbpg/wp-content/plugins/wp-facebook-applications/lib/facebook.php on line 36

    Here are the links to the page I have setup to test right now:

    http://www.facebook.com/pages/SF-Internet-Solutions/239539919403223?sk=app_239829286100610

    http://sfinternetsolutions.com/fbpg/?werewp_fbapp=4

    Let me know if you have any ideas on how to fix this. Thanks,

  6. I have just released a new version of the plugin, with numerous bug fixes including the issue @BadBarry and @Ashley had.

    Let me know if that works better once the update reaches your WordPress installations! :)

    Oh and by the way: I am currently working on an updated version of the plugin for the New Timeline pages!

  7. Hi! I do also like this plugin a lot!
    But I’m having some problems with
    1) the height
    2) app id/app secret/comments
    3) like button + open graph warnings

    1) Regarding height: It’s not showing the whole page (and no scroll bars)
    I saw the scroll bars in the beginning, but lately no…
    Therefore the page gets “cut off”.

    2) Regarding app id/secret and comments. From time to time this information is removed, and I can’t figure out when it’s happening. I’ll have to check every now and then to re-enter it.

    3)When I do the Facebook debug for these links I get problems with the open graph and like box (even though I haven’t activated the open graph yet).
    Any suggestions?

    Like Button Warnings That Should Be Fixed

    Like Button Tag Missing: og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
    Like Button Tag Missing: og:type is missing. The og:type meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
    Like Button Tag Missing: og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.
    Open Graph Warnings That Should Be Fixed

    Inferred Property: The ‘og:url’ property should be explicitly provided, even if a value can be inferred from other tags.
    Inferred Property: The ‘og:title’ property should be explicitly provided, even if a value can be inferred from other tags.
    Inferred Property: The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.
    Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.

    My page: http://www.facebook.com/sarasjodincom
    Some of the wordpress fb tab’s:
    http://www.sarasjodin.com/fbtabs/free-offer/
    http://www.sarasjodin.com/fbtabs/visuals/
    http://www.sarasjodin.com/fbtabs/creativity-news-feed/

    Here is an article about the scroll bar “in general”.
    http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

    • Thanks for your feedback!

      Unfortunately, my plugin is not ready for the new timeline version of Facebook pages yet. I am currently working on an update, and will release it soon.

      1) That problem is specific to the Timeline version of Facebook pages. It will be fixed when I release the next version of my plugin.
      2) This problem should be related to your WordPress installation.
      3) These pages are only displayed within your Facebook page. They consequently do not need any Open Graph meta data.

      • Hi again!

        Sounds good.

        The only doubt I have is for my problem #2. It’s not the app id/app secrets / comments numbers who are removed from Facebook but from the plugin setting page in WordPress. From time to time when I save (even though I can see the app id/secrets/comment numbers before saving) they are removed the next time I check the fields.

        Good luck! Let me know if you need help debbugging.

        Sara

  8. Hello Jeremy,

    I am using ‘WordPress HTTPS’ to work the HTTPS element of the fanpage (the website is on shared hosting and does not have a certificate, but there is a ‘common’ shared URL that can be used for all websites on that server).

    I need to be able to specify that the application page uses SSL, but there is no option to do this on the App page.

    Is there a way around this please?

    Thanks,

    Paul :)

  9. Hi Jeremy :)
    I’ve created my App in Facebook, and on my site.. but I don’t see how or where to designate which of my pages the App Page should be displayed on… so when I go through my page n Facebook – it is not appearing in any.

    I do see the app in the App Developer areas and I do have the URLs set.. but i think im missing a step somewhere, and i don’t know what it could be.

    Any help would be appreciated
    Thanks!
    grace

    • In your Facebook Page settings (under Edit Page > More, at the top of your Facebook Page), you will find a list of your applications. You will then be able to add your applications to your Page from there.

  10. Hi Jeremy, I managed to get this working and displaying on FB – required creating an access link with the ID and url.. :)

    Question now though- how the heck do we get the page height to acknowledge the height set in the app settings – or actually behave fluidly – so that it does not cut off the height of the page being displayed?

    My App page is 1979px high – but only 810 high is displayed in FB.

  11. Ahh yes – never a dull moment : /
    i see that it SHOULD acknowledge the choice of fluid or the height ive set – but it just doesnt.

    So there is no area within the Applications plugin to control scrollbars or overflow when those choices don’t work?… i guess i’m back to the research and drawing board again.
    Thanks

Leave a Reply