Ultime Notizie

martedì 21 aprile 2009

Facebook Connect su Wordpress

Per installare Facebook Connect sui blog di casa Wordpress è necessario eseguire i seguenti passaggi.

Fase preliminare

Copia di backup di files:

/wp-contents/themes/NOME_VOSTO_TEMA/comments.php
/wp-comments-post.php

Procedura

1. Vai su: http://www.facebook.com/developers/editapp.php
2. Completa tutti i campi facendo attenzione alla voce ADVANCED FIELDS, cliccala e inserisci nel campo CALLBACK URL l’indirizzo del tuo sito.
3. Al termine seleziona e copia la tua API KEY
4. Carica il file xd_receiver.htm nella root del tuo blog
5. Apri il file all’indirizzo /wp-content/themes/NOME-DEL-TUO-TEMA/comments.php
6. Scorri il file fino alla fine e aggiungi questo codice:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
    type="text/javascript"></script>
  <script type="text/javascript">
    FB_RequireFeatures(["XFBML"], function()
    {
      FB.Facebook.init("YOUR_APP_ID", "/xd_receiver.htm");

      FB.Facebook.get_sessionState().waitUntilReady(function()
      {
      if(FB.Facebook.apiClient.get_session().uid)
      {           
              document.getElementById('data-fb-side').style.display = 'block';
      }         FB.Facebook.apiClient.users_getInfo(FB.Facebook.apiClient.get_session().uid,'name,pic_small_with_logo', function(result, ex) {
          //Do something with result
            <? if(is_single()): ?>
            document.getElementById('author').value = result[0]['name'];
            document.getElementById('email').value = 'fb'+FB.Facebook.apiClient.get_session().uid;
            <? endif; ?>
              document.getElementById('data-fb-side').innerHTML = '<img src="'+result[0]['pic_small_with_logo']+'" /><br /><br />Ciao '+result[0]['name']+' !';
          });
      });
    });
  </script>


7. Trova questo codice: <form action=”<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”> e subito sotto incollare questo:

<div id="login-fb" class="white">
<fb:login-button size="medium" background="white" length="long">
</fb:login-button>
</div>
<div id='data-fb-side'>
</div>
 
8. Andate all’indirizzo http://developers.facebook.com/tools.php?feed
9. Cliccate sul nome della vostra applicazione
10. In “One Line Template” incollate:
{*actor*} commented on <a href=”{*post_url*}”>YOUR BLOG NAME</a>!
11. Ora in “Sample Template Data” sostituite il contenuto con il seguente:
{”post_url”:”http://”,”company”:”Facebook”, “city”:”Palo Alto”, “images”:[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}]}
12. Ora premete Next e successivamente Skip finchè il bottone non cambierà etichetta in Register Template Bundle
13. Cliccate su Register Template Bundle e quindi copiate l’ ID che verrà generato.
14. Ora aggiungete questo codice subito sotto <form action=”<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>:
<script type="text/javascript">
function sendform()
{
        document.getElementById("commentform").submit();
}
 
function fbsend()
{
    FB.Connect.showFeedDialog(REPLACE_ID, {"post_url":location.href}, null, null, null, FB.RequireConnect.promptConnect,function()
    {
        setTimeout(sendform,20);
    });
}
</script>

Attenzione ricordatevi di sostituire REPLACE_ID con il codice che avete appena generato!!!

15. Aggiungete questo codice subito dopo <input name=”submit” type=”submit” onclick=”fbsend();return false;”
16. Rimuovere name=”submit” dal tag input per il send della form.
17. Sostituisci  

<p><?php echo get_avatar( $comment, 32 ); ?><cite>  <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>

con

<p><?php if(!eregi('fb',$comment->comment_author_email)) { echo get_avatar( $comment, 32 ); comment_author_link();} else { echo "<fb:profile-pic uid='".str_replace('fb','',$comment->comment_author_email)."' facebook-logo='true'></fb:profile-pic> "; echo "<fb:name uid='".str_replace('fb','',$comment->comment_author_email)."' ></fb:name>";}?><cite> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>

18. Apri il file wp-comments-post.php, e muovi le linee da 35 a 38 dopo la linea 57

E il gioco è fatto! [fonte]
« PREV
NEXT »