Posted By

Tracy_D on 01/05/09


Tagged

kickapps


Versions (?)

Add Widgets to Your KickApps Member Profile Pages


 / Published in: JavaScript
 

With these two snippets I am creating a new div tags within the profile container element, below the right column element on a KickApps member profile page. Where it says HTML GOES HERE you can past any widget or HTML that you want to add to your profile pages.

I've personally used CSS to re-style my profile pages. I've made the container element wider and floated both columns to the left. My new div tag also floats to the left so that it appears to be a third column on the page. But, you could also use CSS to position the new div tag below the right column.

The second snippet uses Ka.Info.PROFILENAME to put user-specific widgets on the profile page. So, if you want your widget to only include media from that specific member, use the second snippet. Remember to replace the widget code with your own and note the two spots where the memberName variable gets added to the mediaParameters.

  1. <!-- Add Profile Widget -->
  2. <script type="text/javascript">
  3. function addProfileElement(){
  4. if($('ka_profilePage')){
  5. /* add a new <div> to the page */
  6. var newDiv = document.createElement('div');
  7. newDiv.id = 'profile_extraDiv';
  8. $('ka_profileRight').parentNode.appendChild(newDiv);
  9. /* add HTML to the new <div> */
  10. $('profile_extraDiv').innerHTML = 'HTML GOES HERE';
  11. }
  12. }
  13. Ka.addDOMLoadEvent(addProfileElement);
  14. </script>
  15.  
  16.  
  17.  
  18. <!-- Add Member Specific Profile Widget -->
  19. <script type="text/javascript">
  20. function addProfileElement(){
  21. if($('ka_profilePage')){
  22. // add a new <div> to the page
  23. var newDiv = document.createElement('div');
  24. newDiv.id = 'profile_extraDiv';
  25. var memberName = Ka.Info.PROFILENAME;
  26. $('ka_profileRight').parentNode.appendChild(newDiv);
  27. // add HTML to the new <div>
  28. $('profile_extraDiv').innerHTML = '<div id="myPhoto_module"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" type="application/x-shockwave-flash" width="270" height="257" id="kickWidget_78592_90524" align="middle"><param name="movie" value="http://serve.a-widget.com/service/getWidgetSwf.kickAction"/><param name="FlashVars" value="affiliateSiteId=78592&widgetId=90524&width=270&height=257&mediaParameters=members%3D' + memberName + '"/><param name="wmode" value="transparent"/><param name="allowFullScreen" value="true"/><param name="menu" value="false"/><param name="allowScriptAccess" value="always"/><embed src="http://serve.a-widget.com/service/getWidgetSwf.kickAction" name="kickWidget_78592_90524" width="270" height="257" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" align="middle" allowScriptAccess="always" alt="KickApps Widget" allowFullScreen="true" FlashVars="affiliateSiteId=78592&widgetId=90524&width=270&height=257&mediaParameters=members%3D' + memberName + '"/></object></div>';
  29. }
  30. }
  31. Ka.addDOMLoadEvent(addProfileElement);
  32. </script>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: uptrax on January 14, 2009

Thanks I was looking for this! Whether by means of this script is the ability to add select menu (but not for categories) on any Kickapps page? I will be very grateful for all the tips and examples.

Regards, Matthew

Posted By: hillsbrothers70 on April 15, 2009

Tracy_D,

I have been trying to use the code above to place an audio player widget on the member profile pages. I am able to get the widget on the page but I can't seem to get it in a specific spot on the page. I was able to put it to the left side of the page like I wanted it, but I can't get it to go up underneath the last item there. It stays to the left but at the bottom of the page. Here is the code. Please let me know what I'm doing wrong.

function addProfileElement(){

if($('ka_profilePage')){

// add a new to the page

var newDiv = document.createElement('div');

newDiv.id = 'profile_extraDiv';

var memberName = Ka.Info.PROFILENAME;

$('ka_profileLeft').parentNode.appendChild(newDiv);

// add HTML to the new

$('profile_extraDiv').innerHTML = '';

}

}

Ka.addDOMLoadEvent(addProfileElement);

This includes our widget code. The only code I copied and pasted over was from to with our player widget code. I noticed your code had myPhotoModule, so I switched it to kaProfileAudio. I'm not even sure if ka_ProfileAudio is supposed to be there. I used Firebug to inspect and that was what I was getting from it. I am totally and completely new at the CSS stuff.

Again, the changes I made DOES put the player on the page. However, the member's music does not load into the playlist of the player and I can't get the player moved up right underneath the last container in that column. It defaults to the bottom of the page.

Is there anything else in the code I'm supposed to change or possibly add or delete?

Thank you for your help, Jim

Posted By: hillsbrothers70 on April 15, 2009

Tracy_D,

I have been trying to use the code above to place an audio player widget on the member profile pages. I am able to get the widget on the page but I can't seem to get it in a specific spot on the page. I was able to put it to the left side of the page like I wanted it, but I can't get it to go up underneath the last item there. It stays to the left but at the bottom of the page. Here is the code. Please let me know what I'm doing wrong.

function addProfileElement(){

if($('ka_profilePage')){

// add a new to the page

var newDiv = document.createElement('div');

newDiv.id = 'profile_extraDiv';

var memberName = Ka.Info.PROFILENAME;

$('ka_profileLeft').parentNode.appendChild(newDiv);

// add HTML to the new

$('profile_extraDiv').innerHTML = '';

}

}

Ka.addDOMLoadEvent(addProfileElement);

This includes our widget code. The only code I copied and pasted over was from to with our player widget code. I noticed your code had myPhotoModule, so I switched it to kaProfileAudio. I'm not even sure if ka_ProfileAudio is supposed to be there. I used Firebug to inspect and that was what I was getting from it. I am totally and completely new at the CSS stuff.

Again, the changes I made DOES put the player on the page. However, the member's music does not load into the playlist of the player and I can't get the player moved up right underneath the last container in that column. It defaults to the bottom of the page.

Is there anything else in the code I'm supposed to change or possibly add or delete?

Thank you for your help, Jim

Posted By: hillsbrothers70 on April 15, 2009

Tracy_D,

I have been trying to use the code above to place an audio player widget on the member profile pages. I am able to get the widget on the page but I can't seem to get it in a specific spot on the page. I was able to put it to the left side of the page like I wanted it, but I can't get it to go up underneath the last item there. It stays to the left but at the bottom of the page. Here is the code. Please let me know what I'm doing wrong.

function addProfileElement(){

if($('ka_profilePage')){

// add a new to the page

var newDiv = document.createElement('div');

newDiv.id = 'profile_extraDiv';

var memberName = Ka.Info.PROFILENAME;

$('ka_profileLeft').parentNode.appendChild(newDiv);

// add HTML to the new

$('profile_extraDiv').innerHTML = '';

}

}

Ka.addDOMLoadEvent(addProfileElement);

This includes our widget code. The only code I copied and pasted over was from to with our player widget code. I noticed your code had myPhotoModule, so I switched it to kaProfileAudio. I'm not even sure if ka_ProfileAudio is supposed to be there. I used Firebug to inspect and that was what I was getting from it. I am totally and completely new at the CSS stuff.

Again, the changes I made DOES put the player on the page. However, the member's music does not load into the playlist of the player and I can't get the player moved up right underneath the last container in that column. It defaults to the bottom of the page.

Is there anything else in the code I'm supposed to change or possibly add or delete?

Thank you for your help, Jim

Posted By: hillsbrothers70 on April 15, 2009

Sorry about that. I was refreshing my screen and it sent it a couple more times. Didn't realize it would do that.

Posted By: hillsbrothers70 on April 15, 2009

Ok...just noticed that even if I set it to ka_profileRight, it still puts it to the left. Just another thing I need help with...hehe.

Posted By: hillsbrothers70 on April 15, 2009

Ah...just noticed that it's not posting the entire code in my previous posts...so you might not be able to help with that...I'll try reposting it.

Posted By: hillsbrothers70 on April 15, 2009

Here is the actual code...hopefully it will show up this time.

function addProfileElement(){ if($('ka_profilePage')){

// add a new to the page

var newDiv = document.createElement('div'); newDiv.id = 'profileextraDiv'; var memberName = Ka.Info.PROFILENAME; $('kaprofileRight').parentNode.appendChild(newDiv);

// add HTML to the new

$('profile_extraDiv').innerHTML = '';

}

}

Ka.addDOMLoadEvent(addProfileElement);

Thank you again.

Posted By: hillsbrothers70 on April 15, 2009

oops....I guess I need to comment the code or something, because it still isn't posting everything....sorry...new at this "posting" stuff, too.

Sorry

function addProfileElement(){ if($('ka_profilePage')){

// add a new to the page

var newDiv = document.createElement('div'); newDiv.id = 'profileextraDiv'; var memberName = Ka.Info.PROFILENAME; $('kaprofileRight').parentNode.appendChild(newDiv);

// add HTML to the new

$('profile_extraDiv').innerHTML = '';

}

}

Ka.addDOMLoadEvent(addProfileElement);

-->

Let's see if this works

Thanks again

Posted By: hillsbrothers70 on April 15, 2009

lol....new to CSS....I was using

Posted By: hillsbrothers70 on April 15, 2009

Never mind....if someone can contact me and I could email the code to you, that would be highly appreciated. I don't know why my post is only showing half of the code I typed.

Thanks....

You need to login to post a comment.