Log in to check your private messages 
Username: Password:   
  howtodoit.myfastforum.org
  Walkthough guides for myfreeforum phpbb 2 forums
Index  FAQ  Search  Memberlist  Usergroups  Profile

Text
Text
Friends
MYFF Support Forum
HOWTODOIT (PHPbb3)
portalogy
CGArts
ANNOUNCEMENTS
Complete List of templates Available
Please Read First Before Editing your template
Permissions
Admin Index
Sticky Articles
Latest Posts
Friends

Start | Stop
Bebo/Myspace/Facebook/Xfire Link Buttons
Jump to:  
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » Add-on`s for your forum
Author Message
Please Register and Login to this forum to stop seeing this advertising.







Add Comment
Show Comments
Posted:

Symon
Guide Legend
Guide Legend



Joined: 11 Jun 2006
Posts: 911


Location: Berkshire,England
FLAGS
Add Comment
Show Comments
PostPosted: Wed Oct 03, 2007 4:05 pm  Reply with quote

Please remember to use the Editor account before making any template changes, If you have not made an editor account yet please read HERE

Second you must have all ready a template you can edit.

If you have not done this please read HOWTODOIT

First of all please upload these images to your template, you only need to upload the ones you wish to use. Many thanks to Nick(nr) for the designs of the buttons.

Upload buttons. just right click on each button and save as.
DO NOT change the names. Now Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Now look at the middle in the area marked Upload Image (make sure the filename does not contain spaces, brackets etc) Click on browse and upload the images from where you saved them on your PC








For this guide we will use Facebook as the example. For the others follow the Guide and make the edits as explained in the tips section at the end of the guide.


1.Go to your forum's Administration Panel ----- 2. General --- Profile Fields

Now add FACEBOOK And click Add Custom Profile Field

You will now see this screen


Fill out the details as shown in the image. (Of course you can edit to suit your forum.) The Link And Image Link are given below.

You can use the spoiler below if you can not view the picture correctly, Or you wish to confirm what each section should be.

Spoiler:



Field name = FACEBOOK (do not change)
Displayed title = Facebook (you can add extra text to guide your members in what to enter, see tips at end of guide)
Topic display position = None (leave as none)
Automatic Entry = Yes (leave as Yes)
Automatic Display = No (leave as No)
Required = No (leave as no)
Display at user registration
= Yes ( this is your choice do you want new members to be able to add these details form the start. if yes leave yes if no then change to no.)
Visibility = All (leave as All)
Access = User (leave As User)
Type = Text (leave as text)
Default = Blank ( Do not put anything in this box)
Link = See the rest of the guide as to what to put here as each one will be different.
Maximum characters = 120 (Leave as it is )
Character width = 12 (leave as it is)
Display as image = See the rest of the guide as to what to put here as each one will be different.
Style = width: 200px (leave as it is)




Link

Code:
http://www.facebook.com/profile.php?id={FACEBOOK}



Display as image

As long as you have uploaded the images above to your template then you can use the code below.

Code:
/templates/****/images/facebook.jpg


*** = the name of your template for example mine would be

Code:
/templates/myff_farnboroughinvincibles1/images/facebook.jpg


Now click submit

Now you have several places these buttons can appear I will list the main 3.

(A) In profile view


(B) In view topic Left


(C) In topic View At The Bottom



Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit


Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find the correct file

For view (A)

profile_view_body.tpl

You should now see the code like this

Code:
 
    <tr>
                       <td valign="top" align="right" nowrap="nowrap"><span class="genmed">{L_INTERESTS}:</span></td>
                       <td> <b><span class="genmed">{INTERESTS}</span></b></td>
                     </tr>
    


So if you wanted it to appear after interests you would add

Code:
<tr>
        <td valign="top" align="right" nowrap="nowrap"><span class="gen">Join Me On:</span></td>
        <td> <b><span class="gen">{FACEBOOK_IMG}</span></b></td>
      </tr>


Just below it so it may look like this.

Code:
<tr>
                       <td valign="top" align="right" nowrap="nowrap"><span class="genmed">{L_INTERESTS}:</span></td>
                       <td> <b><span class="genmed">{INTERESTS}</span></b></td>
                     </tr>

<tr>
        <td valign="top" align="right" nowrap="nowrap"><span class="gen">Join Me On:</span></td>
        <td> <b><span class="gen">{FACEBOOK_IMG}</span></b></td>
      </tr>


For view (B)

Goto viewtopic_body.tpl

Now place where you wish it to be for my example if you wish it to be after location then find


Code:
{postrow.POSTER_FROM} <br />


And after place this code



Code:
{postrow.FACEBOOK_IMG} <br />


So it may look like this.

Code:
<td class="post_post_details" align="left">
                        {postrow.POSTER_JOINED}<br />
                        {postrow.POSTER_POSTS}<br />
                        {postrow.POSTER_FROM}<br />{postrow.FACEBOOK_IMG}<br />


For view (C)

Goto viewtopic_body.tpl

Find this bit of code or similar

Code:

         <tr>
            <td valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}


And place after

Code:
{postrow.FACEBOOK_IMG}


So it may look like this

Code:
<tr>
            <td valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}{postrow.FACEBOOK_IMG}<script language="JavaScript" type="text/javascript">


Ok all that done you should be set up, so how do they enter their details ? And What do they enter.

If you goto to your profile you should see something like this.(depending on which ones you have added)



Bebo = Enter your login name

Myspace = Enter your name

Xfire = Enter your name

Facebook = Enter Your ID Number

To find your ID number on facebook goto facebook and sign in , now click on your profile button, now look at your address bar you will see something like this.



You need to note down that number only for example
Code:
743538511
and enter that instead of a name.

You can tell your members about this by editing the profile field of FaceBook and where it says Displayed title change that to something like

FaceBook, please enter your Id number And not your name.

Which gives you something like this.





Tips

1. Only when someone enters information in their profile will the buttons appear. So for example if someone has a facebook and a myspace, but not bebo, and they enter their details for those two then only those two buttons will show up.

3. To add more buttons
Repeat STEP 1 again but this time call it MYSPACE Or XFIRE Or BEBO

All details will be the same except for the link and imagine link.

Link

Code:
http://www.facebook.com/profile.php?id={FACEBOOK}


Code:
http://www.myspace.com/{MYSPACE}


Code:
http://www.bebo.com/{BEBO}


Code:
http://www.xfire.com/profile/{XFIRE}


Code:
http://steamcommunity.com/id/{STEAM}



Image Links


Facebook
Code:
/templates/****/images/facebook.jpg


bebo
Code:
/templates/****/images/bebo.jpg


Myspace
Code:
/templates/****/images/myspace.jpg


Xfire
Code:
/templates/****/images/xfire.jpg


Steam
Code:
/templates/****/images/steam.jpg



So now you need to enter the addition codes to your template

For view (A)

profile_view_body.tpl

You should now see the code like this


Code:
<tr>
        <td valign="top" align="right" nowrap="nowrap"><span class="gen">Join Me On:</span></td>
        <td> <b><span class="gen">{FACEBOOK_IMG}</span></b></td>
      </tr>


So now add one or all of these

Code:
{FACEBOOK_IMG}
{MYSPACE_IMG}
{BEBO_IMG}
{XFIRE_IMG}
{STEAM_IMG}


So if you entered all 4 it could look like this

Code:
<tr>
                       <td valign="top" align="right" nowrap="nowrap"><span class="genmed">{L_INTERESTS}:</span></td>
                       <td> <b><span class="genmed">{INTERESTS}</span></b></td>
                     </tr>

<tr>
        <td valign="top" align="right" nowrap="nowrap"><span class="gen">Join Me On:</span></td>
        <td> <b><span class="gen">{FACEBOOK_IMG} {MYSPACE_IMG} {BEBO_IMG} {XFIRE_IMG} {STEAM_IMG}</span></b></td>
      </tr>


For view (B)

Goto viewtopic_body.tpl

You should see a code like this.

Code:
<td class="post_post_details" align="left">
                        {postrow.POSTER_JOINED}<br />
                        {postrow.POSTER_POSTS}<br />
                        {postrow.POSTER_FROM}<br />{postrow.FACEBOOK_IMG}<br />


Now just add one or how many you want of these.

Code:
{postrow.FACEBOOK_IMG}
{postrow.MYSPACE_IMG}
{postrow.BEBO_IMG}
{postrow.XFIRE_IMG}


So if you entered all 5 it could look like this

Code:
<td class="post_post_details" align="left">
                        {postrow.POSTER_JOINED}<br />
                        {postrow.POSTER_POSTS}<br />
                        {postrow.POSTER_FROM}<br />{postrow.FACEBOOK_IMG} {postrow.MYSPACE_IMG} {postrow.BEBO_IMG} {postrow.XFIRE_IMG} {postrow.STEAM_IMG}<br />



For view (C)

Goto viewtopic_body.tpl

Find this bit of code or similar

Code:
<tr>
            <td valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}{postrow.FACEBOOK_IMG}<script language="JavaScript" type="text/javascript">


Now just add one or how many you want of these.

Code:
{postrow.FACEBOOK_IMG}
{postrow.MYSPACE_IMG}
{postrow.BEBO_IMG}
{postrow.XFIRE_IMG}
{postrow.STEAM_IMG}


So if you entered all 5 it could look like this

Code:
<tr>
            <td valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}{postrow.FACEBOOK_IMG} {postrow.MYSPACE_IMG} {postrow.BEBO_IMG} {postrow.XFIRE_IMG} {postrow.STEAM_IMG} <script language="JavaScript" type="text/javascript">


4. If you allow your members a choice of templates and you have made your own buttons matching each template theme, and wish to use them, then do the following.


Go back to admin panel --2. General -- profile fields.

Now open up each one you wish to edit and int he box named Display as image just put in the name of the image for example instead of,

Code:
/templates/myff_farnboroughinvincibles1/images/facebook.jpg


You only need to put in

Code:
facebook.jpg


Please note
This will only work if you have uploaded the images to each template AND given it the SAME name and it is done in the same format.
So if you have red , blue, pink buttons, for your 3 templates then upload each button to the correct template red to red pink to pink etc, but make sure that ALL of them have the same name and done in same format, for example facebook.jpg

And Thats HOWTODOIT

View user's profile Send private message Visit poster's website FACEBOOKSTEAM
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » Add-on`s for your forum


 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

HOWTODOIT was designed and built by Symon Field
Creator Of ☆ ☆ FunnyWorld
HOWTODOIT© Symon Field 2006,2007,2008

Powered by phpBB Group © 2001,2005.
 
Create your own free forum | Buy a domain to use with your forum