Adding ads in specific locations using Pockets Plugin

pwolfe

Hi, I would like to place ads in my forum using the Pockets Plugin, but I am having problems configuring the plugin's settings to have an ad show up in only SPECIFIC discussions. I attempted selecting "Given Indexes" and putting the discussion number in the box but that didn't work.

Could someone offer a clear explanation on how to do this?

vrijvlinder

you only have a few choices. look in the plugin and see $location

the possible locations are in the Head, before the Content, in-between discussions , in-between comments, after the Content and in the Foot.

As far as I know you can't pick specific discussions. You can however hide it from discussions you don't want it to appear in. Using CSS.

pwolfe

Thanks for the reply. Is there another way to do it without using the Pockets plugin?

Or is there another plugin that has this capability?

vrijvlinder

Apt ads is a plugin made for ads may be that can work better for this.

But it is also general in that you can't specify per discussion.

pwolfe

I see how with Apt Ads you can add rotating ads, but it would be nice to have more control over what appears on each individual discussion page.

I tried another plugin called "Category Ads" (by @hgtonight) which allows you to add ads to individual categories. An ad appears on the right hand column, but no other locations. On the plugin's info page (http://vanillaforums.org/addon/categoryads-plugin) it says users can add ads to discussion panels as well, but I had difficulty finding that feature in the plugin's settings after I installed it.

hgtonight

The way Category Ads works is by rotating ads in the panel (sometimes called the sidebar) based on the category shown. So it shows ads on the discussion and category page.

I would be happy to modify it (or write a new plugin) for a donation if we can nail down how you want it to work.

vrijvlinder

@pwolfe

I figured out a way to add things to specific discussions using jquery . The only this will be that you will need to add the discussions by hand as you go along or figure a way to change them out easier. I tested this on my install and it works to be able to add pretty much any html to the Discussion. You will need to find the class name of each discussion. In my example below that is the class name of that particular discussion.

<script type="text/javascript"> $(document).ready(function() {
       $("li.Item.Comment.FirstComment.NillaBlog.NillaBlog2#Discussion_7").append('<span class="Emoticon Emoticonpirate"><span>:ar!</span></span>');

});
</script>

pwolfe

@vrijvlinder

Sorry I am a bit new to this. How do I find the class name for each discussion or what code I should substitute for "li.Item.Comment.FirstComment.NillaBlog.NillaBlog2#Discussion_7" in my forums?

vrijvlinder

You need to use a web inspector like firebug, and right click on the area of the discussion you want to target and inspect the element. Find the li.Item that has that discussion, it will have the number of the discussion like mine above. This part you need to do on your own I can't guess what it is.

Once you have that put the js code into your master . you will need to add a line with each discussion number as you want to add more than one ad.

This is not a perfect solution but it works to add extra content to specific discussions.

You might also need to write some css rules for the content so give the content an id or a class so you can later add css to it .

jens1seo

I did it cheap and simple, I have a custom theme that has custom css and I added the ads in to the theme sidebar....But this wont work if you are trying to place different ads on specific category pages...so vrivlinder are you saying if I added your code above it will work? Nice!

x00

Well I sent a PM, if people are interested in doing it the Apt Ads way they can contact me. The philosophy is versatility, through pattern matching / querying. It may not do everything yet but it is versatile, in that it is adaptable, so if you change strategy you can run campaigns differently.

I did it cheap and simple, I have a custom theme and added the ads in to the theme sidebar....But this wont work if you are trying to place different ads on specific category pages...

Apt Ads can have different ads on specific category pages. You set up a placement that matches each of of these category matches and position, then add ads to the placement.

jens1seo

@hgtonight Jezus write the plugin, and charge a fee there are plenty of us willing to pay to have that option. Are you kidding? Why do you think we are busting our humps over building a forum?? Making monetizing our sites easier is a priority for forum owners.

hgtonight

@jens1seo I already wrote a plugin called Category Ads that places a rotating ad in the side panel on the categories and discussion page. Each ad is only displayed in the category chosen. Check it out and see if it does what you need.

If you want to add an ad (or multiple ads that rotate) that is specific to a discussion, it will require a little development time. I am up for making it if someone wants to sponsor it. This way, the sponsor gets what they want and I get a single person to talk to about the requirements.

Also, Apt Ads is pretty nice. You can do a lot with it. Take some time and see if that will do what you need.

jens1seo

Thanks I'm going to install and give it a go! Since my forum is new this might do the job for now but I can see down the road as the traffic picks up so will my advertisement needs....

pwolfe

@vrijvlinder said:
pwolfe

I figured out a way to add things to specific discussions using jquery . The only this will be that you will need to add the discussions by hand as you go along or figure a way to change them out easier. I tested this on my install and it works to be able to add pretty much any html to the Discussion. You will need to find the class name of each discussion. In my example below that is the class name of that particular discussion.

<script type="text/javascript"> $(document).ready(function() {
       $("li.Item.Comment.FirstComment.NillaBlog.NillaBlog2#Discussion_7").append('<span class="Emoticon Emoticonpirate"><span>:ar!</span></span>');
 
});
</script>

Where in the "default.master.tpl" file should I place the code after I have found it in Firebug?

I tried putting it in the content DIV section but got a BONK error when I tested it.

vrijvlinder

no , it goes in the head section of the tpl

between literal tags{literal}<script type="text/javascript"> script here </script>{/literal}

pwolfe

Great. Thanks... that bit of code makes it work now.

That allows ads to appear BELOW the first comment/question in the discussion, but is there a way to have the ad appear ABOVE the comment instead? Or possibly ABOVE the discussion title?

vrijvlinder

if you want it before then use .prepend instead of .append in the jquery but to make it go where the title is you will need to use css.

to make room for it and to move it . this is approximate you must add a class or id to whatever you are appending or prepending so you can create a css rule.

body.Vanilla.Discussion.Index .HeadingTabs .SubTab {
top: -50px;
position: relative;
line-height: 8;
}

.myobject{
position:absolute;
top:-300px;
}

pwolfe

Sorry, I'm a beginner with customizing the CSS code. Could you please clarify how I could add a CSS class to the following code in my "default.master.tpl" file?

For instance, what text would I put in to replace the "???" in the code below to match it with the code (as you referenced above) in my "custom.css" file?

{literal}
$(document).ready(function() { $("LI#Discussion_1.Item.Comment.FirstComment").append('<<span class="???">>AD DEMO 1<</span>>-- '); });
{/literal}

vrijvlinder

It would greatly help you if you did some reading up on css.
You can add a name of anything to make an id or a class. Sometimes you can latch on an existing class so the style applies to it as well. once you added the class to the html object then you create a css rule for it. The css rule goes inside the custom.css file of your theme.

.poop is class="poop"

#poop is id="poop"

span with class    span.poop

span with id    span#poop


css

span.poop{
background:brown;
}

span#poop{
background:pink;
}

pwolfe

Thanks for the "poop" demo. After some experimentation it works pretty well, but I'm thinking the ad placement looks good enough by simply changing the property to ".prepend" instead of using ".append". It allows the ad to show right below the title of the post. Seems to work well enough that way and there is less tweaking required with the CSS alignment etc.