TheCrow

Editing the index_body

Code:

<div id="affiliate_box">
 <div id="affiliate_title">Affiliates</div>
 <a href="FORUM_URL" target="_blank"><img src="FORUM_LOGO" /></a>
</div>


Code:

<a href="FORUM_URL" target="_blank"><img src="FORUM_LOGO" /></a>

CSS Code

Code:

#affiliate_box {
 text-align:center;
 background:#EEE;
 border:1px solid #CCC;
 margin:6px 0;
 padding:3px;
}

#affiliate_title {
 color:#666;
 font-size:14px;
 font-weight:bold;
 border-bottom:1px solid #CCC;
 margin-bottom:6px;
 padding-bottom:3px;
}

Installation

Introduction

Code:

www.instagram.com/luffy

Code:

luffy

Field Creation

• Name : Instagram (color of your choice)
  
• Description : Optional
  
• URL icon :
  

  Code:

  https://i.servimg.com/u/f60/19/06/26/04/insta310.png

  
  (NOTE! This image url is necessary for our code.)
  
• Necessarily filled ? Your decision
  
• Display : Tick both Profiles and Messages (if you want the field to be shown on the profiles and in the messages)
  
• Display type : Text
  
• Who can modify the profile field value ? Tick both Moderators and Member himself (You can tick whatever you want)
  
• Display this field for users that are at least : Your choice
  
• Type : Web address
  
• Default content : (leave blank)
  

Javascript Code

• Title * : Instagram field addition
  
• Placement : In all the pages
  
• Javascript Code * : Copy and paste this code in your field:
  
  

  Code:

  /* ------------------------------------------------------------------------

**************** COPYRIGHTS 2018, LUFFY - FORUMOTION.COM ****************

- Please do not try to post a new tutorial using this code to your forum.
- This code is written by Luffy for Forumotion.com forums only.
- Please ask your questions at https://help.forumotion.com
- Please do not remove these comments.
- Tutorial Link: /t156778-add-instagram-as-contact-field-to-your-forum
--------------------------------------------------------------------------- */

$(function(){
 
 if(/\/?u(\d+)contact$/.test(location.pathname)) {
   $('dl#field_id1 dd a').attr('title','View the user\'s Instagram account');
   if ($('dl#field_id1 dd a[href*="http://"]')){
     var ifgr_instagram_src = $('dl#field_id1 dd a').attr('href').slice(7);
   }
   if ($('dl#field_id1 dd a[href*="https://"]')){
     var ifgr_instagram_src = $('dl#field_id1 dd a').attr('href').slice(8);
   }
   $('dl#field_id1 dd a').attr('href', 'https://www.instagram.com/' + ifgr_instagram_src);
 }
 
 if (/t(\d+)/.test(window.location.pathname)) {
   $('a[title*="website"]').has('img[src*="https://i.servimg.com/u/f60/19/06/26/04/insta310.png"]').addClass('InstagramPage');
   $('a.InstagramPage').attr('title','View the user\'s Instagram account');
   if ($('a.InstagramPage[href*="http://"]')){
     var ifgr_instagram_src2 = $('a.InstagramPage').attr('href').slice(7);
   }
   if ($('a.InstagramPage[href*="https://"]')){
     var ifgr_instagram_src2 = $('a.InstagramPage').attr('href').slice(8);
   }
   $('a.InstagramPage').attr('href', 'https://www.instagram.com/' + ifgr_instagram_src2);
 }
 
});

  
  
  

Information

1. If you have created an other field in the Contact fields before then you have to check on the field id to correctly execute the code. This field id is used in the first section of the javascript where it says
   

   Code:

   $('dl#field_id1 dd a')

   
   of which the
   

   Code:

   dl#field_id1

   
   is the field id. If you have an other id, all you have to do is replace it with yours and you will be fine. Note that this part is SIX times in the first part.
   

   How to check my field's id:

   Step 1: Press Right Click on the Instagram picture you just created and then click Inspect Element
   
   Then a new window will open where you have to see what field_id is written above the marked part that is shown
   
   Then you replace that field id number in your javascript.

   
   
2. Then based on your language you should be able to see what it says on your website field on hover. (Example: the default website field says: "Visit poster's website". Now based on your language this text differs. This part, we need it for this part of the code:
   

   Code:

   $('a[title*="website"]')

   
   where you have to replace the word website with the word your forum has for the website field.
   
3. Next up, right after the above code you will see this part
   

   Code:

   .has('img[src*="https://i.servimg.com/u/f60/19/06/26/04/insta310.png"]')

   
   which has the image url I mentioned above. Now if you change the image url to something else, you will have to add the exact url in this code and specifically replace the url
   

   Code:

   https://i.servimg.com/u/f60/19/06/26/04/insta310.png

   
   with your new Instagram image url.
   
4. Finally if you want to change the text Visit the user's Instagram account that appears when you hover your contact field then all you have to do is change this part
   

   Code:

   .attr('title','View the user\'s Instagram account');

   
   and more specifically the
   

   Code:

   View the user\'s Instagram account

   
   BE CAREFUL If you will use the
   

   Code:

   '

   
   or the
   

   Code:

   "

   
   symbols you have to add the escape slash
   

   Code:

   \

   
   before it or nothing will work as shown above.
   

Result