New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova  
uCoz Support Forum by uCozers » uCoz » Additional Features » Friends Feature (using module "Blog") (sml[tutorial])
Friends Feature (using module "Blog")
Was this tutorial useful?
1.Yes[ 9 ][81.82%]
2.I don't care[ 0 ][0.00%]
3.No[ 2 ][18.18%]
Poll has expired - Friday, 2011 October 14, 3:36 AM
Answers total: 11
jackassDate: Thursday, 2010 October 14, 3:36 AM | Message # 1
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
uCoz is planing in future to add this feature, so when it will be ready I suggest you to switch on it, but now you can use this one, its not perfect, but it helps to find your friend fast.

If you are using module "Blog" than this is not for you! We will need to use Blog to add this feature on your profile page!
You must follow all 8 steps, it's very important, if you skip one step, I guess I will see a post with question: "Help me, I did all what was in tutorial and it didn't work!"


Ok, let's start! smile

1. step.

Go to your sites CP and install module "Blog"

2. step.

Go to Main » Blog » Module settings and set Fields of a new entry form: like it is in screenshot


+ Enable capability to search entries of a particular user: Save it!

3. step.
Go to Main » Users » User groups » Set permissions for all groups and check following:

Add new entries (All users can add friends)
Remove own entries (Users can remove friends)

And uncheck:
Pre-moerate new entries (must be verified) (so that user don't need to wait for admins to moderate his friends
Edit own entries (No need to edit friend!)

4. step.
Go to Main » Customize design » Editing templates >> Blog >> Page of the entries archive and replace all code with this:

Code


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>$TITLE_BAR$ - $SITE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<style>
   #puzadpn {display:none;}
   </style>
   </head>

<body>
   <table style="width: 100%;"><tr><td>
$BODY$
</td></tr>
<tr><td>
<center>
$POWERED_BY$
</center>
</td></tr>
   </table>
<!-- Friends -->

<script type="text/javascript">
if('$PAGE_ID$' == 'add') {
if(document.getElementById('blM16')) document.getElementById('blM16').style.display = 'none'; // Это чтоб не было Страницы добавления
document.getElementById('blF1').value = parent.document.getElementById('favik2').innerHTML; // Имя пользователя $TITLE$
document.getElementById('blF12').value = parent.document.getElementById('favik3').innerHTML; // ID пользователя $OTHER2$
document.getElementById('blF13').value = parent.document.getElementById('favik3').innerHTML; // Логин $OTHER3$
document.getElementById('blF11').value = parent.window.location.href; // Ссылка пользователя $OTHER1$
document.getElementById('doSmbBt').click();
alert('This user is now in your friends list!'); // Это алерт
}
</script>
</body>

</html>

5. step.
Go to Main » Customize design » Editing templates >> Blog >> Appearance of entries and replace all code with this:

Code


<div class="u-friends" style="width: 33%; float: left;">

<!-- Friends -->

<style>
.mbord {border: 1px solid #DAE1E8;padding: 5px 5px 5px 5px;background: #FFFFFF;}
.mbord:hover {border: 1px solid #C2CFDB;padding: 5px 5px 5px 5px;background: #FFFFFF;}
#photo {width:5px;}
.photo {
text-decoration:none;
color:black;
border-bottom: 1px solid #DCDCDC;
   border-top: 1px solid #DCDCDC;
   border-left: 1px solid #DCDCDC;
   border-right: 1px solid #DCDCDC;
background: #ffffff;
padding: 5px 5px 5px 5px;
text-align:left;
}
.photo:hover {
background: #FFFFFF;
color:#374547;
border-bottom: 1px solid #3787B5;
   border-top: 1px solid #3787B5;
   border-left: 1px solid #3787B5;
   border-right: 1px solid #3787B5;
text-decoration:none;
}
.avatar2 img { width: 100px; height: auto; }
#ava$ID$ img {width: 100px; height: auto;}
.proava {
text-decoration:none;
background: #ffffff;
display: block;
border: 1px solid #FFFFFF;
color:black;
padding: 4px 4px 4px 4px;
text-align:left;
}
.proava:hover {
background: transparent url('/');
border: 1px solid #1C436E;
color: #000000;
   font-weight: bold;
padding: 4px 4px 4px 4px;
text-decoration:none;
}
</style>

<style>
   .vibfr {display:block;padding-bottom: 3px;padding-top: 3px;border-bottom: 1px solid #DAE1E8;}
   .vibfr:hover {display:block;padding-bottom: 3px;padding-top: 3px;background: #EEF2F4;border-bottom: 1px solid #DAE1E8;}
</style>
<div class="mbord">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="padding-left: 10px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td colspan="2">
<div colspan="2" style="padding-bottom: 2px;" align="left">
   <!-- Username and link -->
   <b><a href="$OTHER1$">$TITLE$</a></b> $MODER_PANEL$ <span id="sta$ID$"></span>
   <!-- Username and link -->
</div>
</td>
</tr>
<tr>
<td valign="top">
<div style="border-top: 1px solid rgb(218, 226, 232); padding-top: 1px; padding-bottom: 1px;" align="center">
<div class="photo">
<div class="avatar2">
   <!-- Avatars -->
<span id="ava$ID$"></span>
   <!-- Avatars -->
</div></div>
</div></td>
<td align="right" valign="top" width="150">
<div style="border-top: 1px solid rgb(218, 226, 232); padding-top: 10px; padding-bottom: 10px;" align="left">
<a href="/index/8-$OTHER2$" class="proava">Profile</a>
<a href="/index/14-$OTHER2$-0-1" class="proava">Send PM</a>
<a href="/blog/0-1-0-0-17-$OTHER2$" class="proava">His friends</a>

</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
<script>$('#ava$ID$').load('$OTHER1$ #avatar');</script>
<script>$('#sta$ID$').load('$OTHER1$ #status');</script>
</div>

6. step.
Go to Main » Customize design » Editing templates >> Users >> User personal page and add this code where you want button "Add to friends list" to appear!

Code


<!-- Friends -->
<?if(!$_IS_OWN_PROFILE$)?>
<td>
   <!-- to add -->
   <span id="favik"></span>
   <span id="favik2" style="display:none;">$_USERNAME$</span>
   <span id="favik3" style="display: none;">$_USER_ID$</span>
   <span id="favik4" style="display: none;">$_USERNAME$</span>

   <script language="JavaScript">
function add_fr() {
if(document.getElementById('favik')) document.getElementById('favik').innerHTML = '<iframe style="width:1px;height:1px;" frameborder="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="/blog/0-0-0-0-1"></iframe>';
}
</script>
   <!-- to add/ -->
     
<div onmouseover="this.className='MmenuOver';" class="MmenuOut" onmouseout="this.className='MmenuOut'">
<!-- button -->
<a href="javascript://" onClick="add_fr();"><img alt="Add to friends list" src="/profile_user/icons/add_friend.png" height="16px"></a>
   <!-- button/ -->
   </div>
</td>
<?endif?>
   <!-- Friends/ -->

/profile_user/icons/add_friend.png Change to your image

7. step.
Where you want friends list with avatar and all other things to appear you will need to add this code:

Code


   <!-- Friends -->
<?if($_BLOG_ENTRIES$>0)?> <hr>
   <center><a href="javascript:openLayerA('ID','/blog/0-0-0-0-17-$_USER_ID$','My Friends','900','700','auto')"><?if($_IS_OWN_PROFILE$)?>My Friends<?else?>His Friends<?endif?></a></center>
<?endif?>
     
<hr>

<table style="width: 100%;">
   <?if($_BLOG_ENTRIES$>0)?>
   <tr><td>
   <div style="overflow:auto; height:150px;width:100%;">
   <span id="friends"></span>
   <script type="text/javascript">$.get('/blog/0-0-0-0-17-$_USER_ID$', function(photo){$('#friends').append($('div.u-friends:lt(100)', photo))});</script>
   </div>
   </td></tr>
   <?endif?>
<!-- Friends -->


How you can see, I used one of my tutorials "How to make informer without informer" in this tutorial to make this feature better looking. smile

8. step.
Now if you want to see all your friends avatars in your friends list to show up you will need to remake your avatar code in profile page
By default it is:

Code
<?if($_AVATAR$)?>$_AVATAR$

<?endif?>

Now you will need to make it like this:
Code
<span id="avatar"><?if($_AVATAR$)?>$_AVATAR$<?else?><img src="/images/noavatar.png" border="0"><?endif?></span>

/images/noavatar.png you will need to replace with your image!



Thats all!

I'am author of this tutorial I made a big changes to this codes
Source of default codes forucoz.com
This tutorial in Latvian language you can find here!


If I will see this tutorials copy on other sites without my permission your site will be reported for Copyright Violations

Tutorial Copyright By uCozers
Attachments: 9420620.png(5.4 Kb)


 
kostovaDate: Thursday, 2010 October 14, 4:41 AM | Message # 2
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
It would be great to have an approval from friend requests. But it's still nice. Great job!
You should add the "Add this person to friends list" in the forum as well.

By the way, in my profile it says "HIDEN" in the email field when it should say "HIDDEN".

 
jackassDate: Thursday, 2010 October 14, 2:43 PM | Message # 3
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
Quote (kostova)
You should add the "Add this person to friends list" in the forum as well.

Good idea, I will try to do it later
Quote (kostova)
By the way, in my profile it says "HIDEN" in the email field when it should say "HIDDEN".

Fixed smile


 
PistolDate: Thursday, 2010 October 14, 5:20 PM | Message # 4
Font size: A | A |
Lieutenant
Group: uCozer
Message: 60
[ ]
Offline
uhu wink
 
jackassDate: Friday, 2010 October 15, 1:41 AM | Message # 5
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
Quote (kostova)
You should add the "Add this person to friends list" in the forum as well.

Not working!

If in one thread is more than one post, than there is 1< user names and 1< avatars so this script is taking first user name and avatars from all posts.


 
kostovaDate: Saturday, 2010 October 16, 7:35 AM | Message # 6
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
Not sure what you mean. But I'll take a look at it soon to see if I can make it work.
 
njustedDate: Saturday, 2010 October 23, 10:49 PM | Message # 7
Font size: A | A |
Private
Group: User
Message: 12
[ ]
Offline
It works! Thank you so much!!! biggrin
 
13053121k0Date: Tuesday, 2010 November 23, 12:00 PM | Message # 8
Font size: A | A |
Private
Group: User
Message: 5
[ ]
Offline
if the other user that you will add wont get a notification or some sort. then it shouldn't be add a friend. it should be something like follow. just my opinion.
 
SirDarknightDate: Saturday, 2011 April 02, 10:08 AM | Message # 9
Font size: A | A |
Lieutenant
Group: uCozer
Message: 61
[ ]
Offline
OK. Any Kind Person Can Fix My Code Below ?

Code
http://pastebin.com/ugUK5krP

It Looks Messing :

Attachments: 2159999.png(20.3 Kb)


Please Give Me Some Reputation or Award If My Post Helps You
 
kostovaDate: Saturday, 2011 April 02, 8:50 PM | Message # 10
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
With the new update, there could be a different way of doing this :]
 
jackassDate: Saturday, 2011 April 02, 8:55 PM | Message # 11
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
kostova, you ar talking about PHP?

SirDarknight, it's looks fine. looks like you don't have default avatar!

My opinion is that it was looking messy at from beginning biggrin


 
SirDarknightDate: Sunday, 2011 April 03, 5:43 AM | Message # 12
Font size: A | A |
Lieutenant
Group: uCozer
Message: 61
[ ]
Offline
jackass, Haha. You didn't get it. See This : http://www.gaminglife.tk/index/8-0-runakter

Please Give Me Some Reputation or Award If My Post Helps You
 
jackassDate: Sunday, 2011 April 03, 3:54 PM | Message # 13
Font size: A | A |
Major general
Group: Administrator
Message: 433
[ ]
Offline
Quote (SirDarknight)
jackass, Haha. You didn't get it. See This : http://www.gaminglife.tk/index/8-0-runakter

I don't see anything biggrin

PS. nice profile design! wink


 
dinukap4Date: Sunday, 2011 May 15, 7:58 AM | Message # 14
Font size: A | A |
Private
Group: User
Message: 18
[ ]
Offline
al right it worked really well thanks!!
 
uCoz Support Forum by uCozers » uCoz » Additional Features » Friends Feature (using module "Blog") (sml[tutorial])
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2019 To TOP
Refresh Smileys Manager