Jørn Wildt
Dealing with Zikula and other interesting stuff
Adding an Adsense Button to Xinha in Pagesetter
-
- rank:
- 12
- registered:
- March 2009
- Status:
- offline
- last visit:
- Posts:
- 0
It's not so difficult to add a button to show inline ads on your pagesetter publication.
Why do this? Well basically because it's something i was asked for... In any case, here's the method:
1. Create a button, we will call it 'google.gif' (i just used google's old favicon).
2. Place the button where buttons for Xinha menus are supposed to be (i.e. modules/pagesetter/guppy/xinha/images/google.gif)
Adding buttons to Xinha is a bit complex... Luckily for us Jorn here made it simple:
3. Locate and open the file guppy.js (which is at modules/pagesetter/gupppy/guppy.js)
4. Navigate to line 503 where you will find the button register for pagebreak.
5. Copy from the followin: and paste under line 516:
Code
xinha_config.registerButton({
id : "googlead",
tooltip : "Insert googlead",
image : "modules/pagesetter/guppy/xinha/images/google.gif",
textMode : false,
action:
function(editor, id)
{
editor.insertHTML('googleadcodegoeshere');
}
});
xinha_config.toolbar[xinha_config.toolbar.length-1].push("googlead");
6. (EDITED: This comment system butchered the post)Replace googleadcodegoeshere with your javascript to show googleads. Please be mindful of adding \n and a '+ (yes with the plus sign) at the end of every line, except the final one and a ' to the beginning of the next (this is in order to concatenate the code just as Google Adsense provided it, the \n is a line break needed for it to pick up the parameters). All this you can deduct by looking at your own google ad code.
7. Save said file and upload it (If you didn't backup the original is not my fault)
8. Watch the shiny new button on your Xinha toolbar.
Now, you know google rules about adsense, right? no more than 3 blocks per page... But since you might be running one on a block and one either in centerblocks or at the footer message you only get to press the button once.
I had to encase it in a black bordered div (style border: 1px solid black as parameters in the div tag, commenting system does not allow them), so i could see if its there (it shows as a rather small square, about 6 pixels i believe). When you publish your piece, the ad will show.
I floated it to the left too (float:left inside the style parameter), but you can float it wherever it suits your design.
Maybe you want to make another one that floats the add to the right (repeat this process but be sure to change wherever it says googlead, because it won't work if you repeat names), or maybe you do not want it floating at all (if it's a traditional horizontal banner) in which case you would just have to omit said declaration on the style parameter of the div tag.
It would be cool if somebody knew how to adapt it so it shows the placeholder based on the parameters given by Adsense or if it had a popup where you could paste the Ad code from Adsense, it parsed it and inserted the proper code (if you are going to do this, please respect the linebreaks, as they are crucial to get the ads going -bonus points to whoever does this-).
Now, ads will show only if you have the proper settings to the script and div tags (allowing them to be shown with parameters) but since this poses a security risk, i would suggest you make sure your comments are safe from this tags or you don't show comment tags at all (like we do, we are going to use the twitter script that lets you use that as comments -http://chirrup.angryamoeba.co.uk/ in case you are interested-).
Well, there it is... I hope you find it useful. I posted this so i won't forget it.
P.S.: i wish there was a way to present this codes without them having to actually parse as html (i know the security implications, but there must be a way to render code useless to show it to people, right?).
edited by: whiskey, Jun 22, 2008 - 11:01 AM