PluXml.org

Blog ou CMS à l'Xml

Intégrer un bouton Flattr(Edit)

Sur certains blogs, il est possible de retrouver un bouton Flattr mais cette fonctionnalité n'est pas disponible nativement avec PluXML. Cette page vous permettra d'ajouter un bouton à votre blog mais aussi automatiquement lors de chaque ajout d'article.

Créer un bouton unique pour tout le blog(Edit)

Une fois inscrit sur Flattr, il vous est possible d'ajouter une "chose" (thing) Flattr. Depuis le site, complétez le formulaire permettant cela : https://flattr.com/submit

Une fois cela fait, votre chose Flattr est ajoutée au site mais n'est encore pas disponible depuis votre blog. Pour cela, il va falloir modifier quelques fichiers.

Modification du fichier header.php(Edit)

Ce fichier (situé dans /themes/default/) contient l'élément <head> de vos pages HTML. C'est donc dans ce fichier qu'il faut insérer le code suivant :

	<link rel="alternate" type="application/rss+xml" title="Rss commentaires" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
	

<script type="text/javascript">
/* <![CDATA[ */
    (function() {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
        
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
        
        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */
</script>
	
</head>

Ce script permet à vos pages de charger l'API Flattr pour pouvoir ensuite afficher votre bouton.

Modification du fichier sidebar.php(Edit)

Si vous voulez que votre bouton Flattr se situe dans le sidebar de votre blog, il faut modifier le fichier /themes/default/sidebar.php. Il vous suffit ensuite de rajouter une div (à la position qu'il vous semble le mieux) :

<div class="item-6">
        <h2>Bouton Flattr</h2>
        <ul>
            <li class="FlattrLi"><a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="<<URL indiqué lors de l'ajout de la chose sur Flattr>>"></a></li>
        </ul>
    </div>

La class "FlattrLi" est une classe permettant de modifier le style d'affichage du bouton (elle est facultative).

Modification du fichier style.css(Edit)

Afin d'ajouter le style pour les éléments de la classe "item-6" et "FlattrLi", nous devons modifier le fichier CSS :

#sidebar .item-6 li, #sidebar .item-1 li, #sidebar .item-2 li, #sidebar .item-3 li, #sidebar .item-5 li{padding: 0 10px;}
#sidebar .item-6 li a, #sidebar .item-1 li a, #sidebar .item-2 li a, #sidebar .item-3 li a, #sidebar .item-5 li a{padding: 6px 0;} 

Puis ajouter les lignes suivantes :

.FlattrLi { text-align : center; }
.FlattrButton { margin-top : 5px; }
#sidebar .item-6 h2 { background : #88B648 url("img/favicon.png") no-repeat 6px; } 

Vous pourrez ensuite modifier comme bon vous semble l'icône attribuée à la sidebar. En ce qui me concerne, j'ai gardé l'icône de PluXML.

Désormais, sur toutes les pages de votre blog, vous aurez votre bouton Flattr accessible à tous vos visiteurs.

Créer un bouton pour chaque article(Edit)

Méthode simple (utilisant l'API JavaScript)(Edit)

Avec cette méthode, à chaque ajout d'article, un bouton sera crée à côté de celui-ci. Cependant, votre ajout ne sera pas visible depuis Flattr tant que personne n'a cliqué sur votre bouton. Par contre, cela aura un effet sur tous vos articles même s'ils ont été ajouté avant la modification.

Pour cette méthode, il vous faut modifier le fichier /themes/default/article.php et y ajouter le code suivant (personnellement, je l'ai insérer entre l'affichage de la date et de l'article) :

<a class="FlattrButton" style="display:none;"
    title="<?php $plxShow->artTitle(''); ?>"
    rev="flattr;uid:<<Votre UID Flattr>>;category:text;tags:<?php $plxShow->artTagsFlattr(); ?>;language:fr_FR;"
    href="<?php $plxShow->artUrl(); ?>">

    <?php $plxShow->artChapoFlattr(); ?>

</a>

J'ai ajouté deux fonctions PHP permettant d'afficher les tags et le chapô (en description) de l'article. Il faut pour cela aller dans le fichier /core/lib/class.plx.show.php et ajouter les fonctions suivantes :

/**
	* Méthode qui affiche le chapô ou une phrase générique dans le but d'être
	* utilisée durant l'affichage du bouton Flattr
	*
	* @return stdout
	* @scope article
	* @author Pico51
	**/
	public function artChapoFlattr() {
	    if($this->plxMotor->plxRecord_arts->f('chapo') == true)
	        echo $this->plxMotor->plxRecord_arts->f('chapo');
	    else
	        echo "Cet article ne contient pas de description.";
	}
	
	
	/**
	* Méthode qui affiche les tags dans le but d'être
	* utilisée durant l'affichage du bouton Flattr
	*
	* @return stdout
	* @scope article
	* @author Pico51
	**/
	public function artTagsFlattr() {
	    echo $this->plxMotor->plxRecord_arts->f('tags');
	}

Désormais, chacun de vos articles doivent posséder un bouton Flattr.

Méthode complexe (utilisant l'API REST)(Edit)

Cet API permet d'interagir avec les éléments du site de Flattr depuis votre blog. Les fichiers permettant son utilisation sont téléchargeables ici : http://files.spip.org/spip-zone/flattr.zip (ATTENTION : le développement de l'API étant toujours en cours, il se peut que le lien ne soit plus disponible, vérifier sur le site de Flattr à l'adresse suivante : https://flattr.com/support/api ). Cette archive contient des exemples d'utilisation de l'API ainsi que les fichiers nécessaires à son fonctionnement.

Ajout d'une application Flattr(Edit)

Avant de pouvoir utiliser l'API, il faut ajouter une application à votre compte Flattr à cette adresse : https://flattr.com/apps/new. Renseignez ensuite les informations demandées et en adresse de callback : http://VOTRE_URL/core/flattr/callback.php. Une fois ceci fait, vous pouvez récupérer les variables KEY et SECRET et les renseignées dans le fichier config.php que vous avez précédemment téléchargé.

Ajout des fichiers Flattr(Edit)

Il vous faut ensuite ajouter les bibliothèques Flattr. Pour cela, ajouter un dossier flattr dans /core/lib/ et insérez-y les fichiers flattr_rest.php et oauth.php. Créez également un fichier flattr_init.php (il nous permettra d'appeler les bibliothèques et de créer les variables nécessaires à l'utilisation de l'API) et entrez le code suivant :

<?php
session_start();

// Our configuration, edit it to set your API credentials
require_once('../flattr/config.php');

// OAuth library
require_once('../lib/flattr/oauth.php');

// Flattr REST library
require_once('../lib/flattr/flattr_rest.php');

function loadToken()
{
	return array($_SESSION['flattr_access_token'], $_SESSION['flattr_access_token_secret']);
}

// Load token
if(isset($_SESSION['flattr_access_token']) && isset($_SESSION['flattr_access_token_secret']))
{
    list($token, $token_secret) = loadToken();

    // Setup a new client
    $flattr = new Flattr_Rest(APP_KEY, APP_SECRET, $token, $token_secret);
}
else
{
    $flattr = new Flattr_Rest(APP_KEY, APP_SECRET);
}

// Did we succeed?
if ( $flattr->error() )
{
    die( 'Error ' . $flattr->error() );
}

?>

Ensuite, dans le dossier /core/, créez un dossier flattr et insérez les fichiers callback.php et config.php (il m'a semblé plus logique de les insérer ici). Attention, dans le fichier config.php, supprimez le code HTML et dans le fichier callback.php, remplacez les "require_once" par ceux-ci :

// Our configuration, edit it to set your API credentials
require_once('config.php');

// OAuth library
require_once('../lib/flattr/oauth.php');

// Flattr REST library
require_once('../lib/flattr/flattr_rest.php');

Modification des pages d'administration(Edit)

Afin que les pages d'admin puissent utiliser l'API, il vous faut modifier des fichiers dans le dossier /admin/. Tout d'abord, dans top.php, il faut inclure la bibliothèque :

<?php if(!defined('PLX_ROOT')) exit; ?>

<?php
// On déclare la variable $flattr et on fait les vérifs nécessaires
require_once('../lib/flattr/flattr_init.php');
?>

Ensuite, dans la div "subheader", il faut ajouter le code suivant (en ce qui me concerne, je l'ai placé tout à la fin) :

			<div>
			<?php
			    if(isset($_SESSION['flattr_access_token']) && isset($_SESSION['flattr_access_token_secret'])) // Connecté
			    {
			        $me = $flattr->getUserInfo();
			?>
			        Flattr : Authentifié en tant que <?php echo $me['username'] ?>.
			<?php
			    }
			    else // Non connecté
			    {
			        $token = $flattr->getRequestToken(CALLBACK_URL);
			        $_SESSION['flattr_request_token'] = $token;
			?>
			        Flattr : Vous n'êtes pas authentifié. <a href="<?php echo $flattr->getAuthorizeUrl($token, 'read,readextended,click,publish') ?>">S'authentifier.</a>
			<?php
		        }
			?>
			</div>

Ce code permet d'indiquer si l'on est connecté à Flattr ou non, et si ce n'est pas le cas, on a un lien permettant cela. Pour faire simple, j'ai préféré une authentification à Flattr de manière différé, rien ne vous empêche de modifier le code afin de le faire en même temps que l'authentification à votre compte PluXML.

Ensuite, il faut modifier le fichier preprend.php afin d'inclure la bibliothèque lors de l'ajout d'un article :

 //...
include_once(PLX_CORE.'lib/class.plx.medias.php');

require_once('../lib/flattr/flattr_init.php');

# Echappement des caractères
// ...

Puis, dans le fichier article.php :

$plxAdmin->editArticle($_POST,$_POST['artId'], $flattr); // Ligne 27

On ajoute l'attribut $flattr à la fonction. Désormais, il faut modifier cette fonction qui se situe dans le fichier /core/lib/class.plx.admin.php :

public function editArticle($content, &$id, $flattr) {

        $ajout = false; // variable permettant de savoir s'il s'agit d'un ajout
        
		# Détermine le numero de fichier si besoin est
		if($id == '0000' OR $id == '')
		{
			$id = $this->nextIdArticle();
			$ajout = true;
		}
/*
...
*/
# On va mettre à jour notre fichier
		if(plxUtils::write($xml,$filename)) {
			# mise à jour de la liste des tags
			$this->aTags[$id] = array('tags'=>trim($content['tags']), 'date'=>$time, 'active'=>intval(!in_array('draft', $content['catId'])));
			$this->editTags();
			
			// Ajout du thing Flattr
		    if($ajout)
		    {
		        // Vérification de la connexion à Flattr
		        if(isset($_SESSION['flattr_access_token']) && isset($_SESSION['flattr_access_token_secret']))
		        {
		            $lid = intval($id);
		            $url = '<Votre URL>/index.php?article'.$lid.'/'.$content['url'];
		            @$flattr->submitThing($url, $content['title'], 'text', $content['chapo'], $content['tags'], 'fr_FR');
		        }
		        else
		        {
		            // Si l'on est pas connecté
		            // Message d'erreur ou rien (à voir)
		        }
		    }
		    else
		    {
		        // TODO : édition d'un article
		    }
			
			if($content['artId'] == '0000' OR $content['artId'] == '')
				return plxMsg::Info('Article créé avec succès');
			else
				return plxMsg::Info('Article mis à jour avec succès');
		} else {
			return plxMsg::Error('Erreur lors de la sauvegarde de l\'article');
		}
	}

Pensez à modifier le champ "<Votre URL>".

Comme vous pouvez le constater, ce code ne permet de gérer que l'ajout de l'article pour le moment.

Désormais, lors de l'ajout d'un article, une chose Flattr devrait être ajoutée automatiquement au site.

Ajout d'un bouton à chaque article(Edit)

Revenez maintenant à la racine de votre blog pour modifier le fichier article.php :

<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>		
		
		<br /><p class="ArtFlattr">
		<a class="FlattrButton" style="display:none;"
            rev="flattr;button:compact;"
            href="<?php $plxShow->artUrl(); ?>">
        </a></p>
		<div class="post"><?php $plxShow->artContent(false); ?></div>

Désormais les articles que vous ajouterai contiendront un bouton Flattr et ils seront directement publiés sur le site.