Building Layout plugins

Building Layout plugins for SocialAds

Layout Plugins let you create your own styles in which Ads can be displayed on your site. By Default we already provide you with 5 layout plugins. Think of Layout plugins as templates for your Ad Display. The main file of the template, layout.php defines how the various template elements viz. the Ad Title, Ad Image/ Video etc are placed with respect to one another.

With the help of this documentation you can easily create your own styles of display. Besides these docs, we recommend you look at the layout plugins that come bundles with SocialAds. The type of these plugins is socialadslayout

Plugin File Structure

  1. plug_yourpluginname.xml(file)

  2. plug_yourpluginname.php(file)

  3. plug_yourpluginname(folder)

  4. This folder contains 3 files

  5. a. layout.php(file)

  6. This is the file in which the layout html resides.

  7. b. layout.css(file)

  8. This should contain all the css elements that style your layout html

  9. c. layout.png(file)

  10. This can be a screenshot or representative image of the layout that is used to show a preview to the user in Ad Creation.

  11. This image should be 100 X 84 pixels, saved as a .png file & be named exactly as layout.png

For the Purpose of explaining how you develop a Layout plugin, we are taking the example of the  "Social Ads - Layout 1" plugin included in our Package. It is named as "plug_layout1" .


<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="plugin" group="socialadslayout" method="upgrade">
	<name>Social Ads - Layout 1</name>
	<creationDate>12th May 2014</creationDate>
	<authorEmail>[email protected]</authorEmail>
	<copyright>(c) Techjoomla</copyright>
	<license> GNU/GPL</license>
	<description>plugin for the layouts</description>
		<filename plugin="plug_layout1">plug_layout1.php</filename>
	<!-- parameters for Joomla 3.0.x -->
		<param name="layout_type" type="text" default="Text And Image" label="Layout" description="Enter Type Of Layout" />

	<!-- Fields for Joomla 1.6.x and onwards -->
	<config name="params">
			<fields name="params">
				<fieldset name="basic">
					<field name="layout_type" type="text" default="Text And Media" label="Layout" description="Enter Type Of Layout" />


This is simply the entry file. You don’t need to change anything here.



The layout.php file is the main file that you need to change to match your needs. All the Ad elements are available in thiel file in the variable $addata.The elements available are :

$addata->ad_title , $addata->ad_body, $addata->ignore, $addata->link, $addata->ad_image.

The variable $ht has the html to display for the ad. You can change this as needed.

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
/*layout for Image & text ads only (ie. title & img & decrip)
this will be the default layout for the module/zone
if( $addata->ignore !='')
$ht .= '<span class="ad_ignore_button_span" style="display:none;"><img title="'.JText::_('COM_SOCIALADS_CLK_IGN').'" class="ad_ignore_button layout1_ad_ignore_button" src="'.JUri::root(true) . '/media/com_sa/images/cross.gif" alt="" onclick="'.$addata->ignore.'" /></span>';

// $ht.='<div class="ad_prev_wrap layout1_ad_prev_wrap well well-small">';
$ht.='<div class="ad_prev_wrap layout1_ad_prev_wrap">';
/*Ad title starts here...*/
	$ht .= '<!--div for preview ad-title-->
		<div class="layout1_ad_prev_first">';
			$ht.='<a class="preview-title preview-title-lnk layout1_ad_prev_anchor" href="'.$addata->link.'" target="_blank">';
					$ht .= ''.$addata->ad_title;
		$ht.= '</div>';
/*Ad title ends here*/

/*Ad image starts here...*/
$ht.='<!--div for preview ad-image-->
	<div class="layout1_ad_prev_second">';
		$ht.='<a '.$upload_area.' href="'.$addata->link.' " target="_blank">';
			//$ht.= '<img class="layout1_ad_prev_img" alt="" src="'.JUri::Root().$addata->ad_image.'" border="0" />';
			//changed in 2.7.5 beta 2

	$ht.= '</div>';
/*Ad image ends here*/

/*Ad description starts here...*/
	$ht .= '<!--div for preview ad-descrip-->
			<div class="preview-bodytext layout1_ad_prev_third">';
				$ht .=''. $addata->ad_body;
	$ht .='</div>';
/*Ad description ends here*/
$ht .='</div>';
echo $ht;