Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: ~DS~ on April 03, 2010, 02:30:40 AM

Title: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on April 03, 2010, 02:30:40 AM
You don't need Profile Fields and Icons Mod
It's really simple to do this without a mod. This will only work on SMF 2.0 RC2 or above. 2.0 Gold/Final and custom themes tested!

Make backup of your index.template.php before processing.

Go to Admin> Features and Options> Profile Field> New Field

Name: (Name anything you want, e.g. Twitter, Facebook, Buzz, Myspace, Blog etc...)

Description: (Your facebook ID or whatever you want to describe)

Profile Section: (Select "Forum Profile")

Show on Topic View: (This is important if you want the icon to appear)

Choose Placement: With Icon

Show Enclosed Within Text (Optional):

<a href="www.facebook.com/{INPUT}"target="_blank"><img class="section" src="www.yoursitehere/images/facebook.png" title="Facebook" /></a>
Replace www.facebook.com/ with any url and facebook.png with any image.

Field Type: Text

Privacy: User can see this field, owner can edit it.

Active: (Make sure it's ticked to activate)

Create a image folder to the root of your SMF installation so that it doesn't conflict images with other themes or mods.
Upload any images to the image folder you created.

Now go to profile and input your Facebook ID, you don't need to put in www.facebook.com/ since the path was set in the code.






Exclusively for TWITTER only: @Anywhere Twitter Hovercard

This method will automatically integrate Twitter seamlessly into your site with @ in it with hovercard and show on topic profile with the image. Also auto-linkification of Twitter usernames

Thanks theguise for his tip.

1. Register for an application on Twitter Developer at Twitter @Anywhere. (http://dev.twitter.com/)

2. It will give you a code to use, but this is the one that you want to use for this feature. Place it before the </head> in your "index.template.php" file. Input your own Consumer Key.

  <script src="http://platform.twitter.com/anywhere.js?id=YOUR Consumer Key&amp;v=1"></script>
  <script type="text/javascript">

  twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
     });
     });

     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });

  </script>


3.  Now create a profile field with icons, asking the user just to input their Twitter Username.  And for the "Show Enclosed Within Text" option place this image code.
<a href="http://twitter.com/{INPUT}"target="_blank"><img class="section" src="www.yoursitehere/images/twitter.png" alt="{INPUT}" width="18" height="18" />

You're finished. Now, if one of your members inputs their Twitter Username in the applicable field when editing their profile or registering, you can place your cursor over the Twitter image in topic view and it will display their Twitter Hovercard, pretty neat feature. Remember to change the width and height values in your <img> statement.

The Result:

(http://i30.tinypic.com/29excg.png)

(http://i30.tinypic.com/mtxrb.png)

Enjoy!
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: ~DS~ on April 03, 2010, 07:39:55 AM
Would also work if you are giving full url.
<a href="{INPUT}"><img src="{DEFAULT_IMAGES_URL}/facebook.png" alt="{INPUT}" /></a>
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: Arantor on April 03, 2010, 05:11:23 PM
I like this :)
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: ~DS~ on April 03, 2010, 08:19:11 PM
Want more mini icons for your social needs?
http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/

@Arantor, Thanks, however I am unsure about custom themes.

Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: Arantor on April 03, 2010, 08:25:08 PM
If they're properly written it should work.
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: vijay bhaskar on April 06, 2010, 07:53:48 AM
Thanks a lot
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: stevescotton on April 22, 2010, 05:04:00 AM
I'd like to do this on my forum, but I'm worried about viruses and what not being transfered from these social networking sites and wrecking the forum.

Any takes on this?
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: ~DS~ on April 22, 2010, 05:31:54 PM
Quote from: stevescotton on April 22, 2010, 05:04:00 AM
I'd like to do this on my forum, but I'm worried about viruses and what not being transfered from these social networking sites and wrecking the forum.

Any takes on this?
There is no harm in this tutorial, you just have to put in the right url and explain the details clearly in the description something like this:
This is your Youtube username.
You can find it in the url:
http://www.youtube.com/user/username

Quote<a href="http://www.youtube.com/user/{INPUT}"><img src="{DEFAULT_IMAGES_URL}/youtube.png" alt="{INPUT}" /></a>
(notice the bold url?)

Most website url don't use username so it should be something like this:
This is your Youtube profile. Put in the full url link.

<a href="{INPUT}"><img src="{DEFAULT_IMAGES_URL}/youtube.png" alt="{INPUT}" /></a> (Notice I comment out the url?)

There you have it, if it transfered to the wrong url, you can always come back and fix it in the profile field.

Hope that clears up.  :)

Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: Arantor on April 22, 2010, 05:34:51 PM
I'd check what the options are for FB usernames and have it check it's valid with a regular expression just to be sure.
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: stevescotton on April 22, 2010, 05:46:16 PM
Thanks for that, will give it a go :D
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: frenki on April 27, 2010, 02:16:45 PM
is it possible to place it near other icons, such as mail,profile,pm ? what would i need to change for that 
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Arantor on April 27, 2010, 03:17:38 PM
You mean to put them in a line with them as opposed to the line above them? Could be quite significant depending on the theme.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: frenki on April 27, 2010, 04:09:05 PM
yes, thats what i meant. Themes css ?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Arantor on April 27, 2010, 04:33:42 PM
No, not necessarily. More likely a major change to Display.template.php and possibly the custom field loader.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Liam. on April 27, 2010, 06:00:08 PM
This method is a hell of alot easier than doing it any other way through hardcoding.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: GazOutEast on April 29, 2010, 05:35:38 PM
When upgrading SMF - e.g. from RC2 to RC3 to Final (and so on) - will this retain the settings or is the site owner going to have to re-add the custom record each time for each social icon?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Arantor on April 29, 2010, 05:50:05 PM
It should actually be retained since it's just using a core feature in SMF.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Utech22 on May 03, 2010, 11:38:28 PM
Re: Go to Admin> Features and Options> Profile Field> New Field

I am using SMF 2.0 RC2 and RC3
but I do not see Profile Field> New Field
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 03, 2010, 11:48:38 PM
Quote from: Utech22 on May 03, 2010, 11:38:28 PM
Re: Go to Admin> Features and Options> Profile Field> New Field

I am using SMF 2.0 RC2 and RC3
but I do not see Profile Field> New Field
First activate Advance Profile Profile in the Core Feature.   
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Afro on May 05, 2010, 02:59:23 PM
Looks pretty cool.
What if you want to add tweetmeme icon ?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 05, 2010, 03:02:40 PM
Quote from: Afro on May 05, 2010, 02:59:23 PM
Looks pretty cool.
What if you want to add tweetmeme icon ?
You can add any social medias to your profile, just put the icons in the image folder and path to it in the profile.
Title: Re: [Tip] Twitter and Facebook Icons in Profile Field Tutorial
Post by: ~DS~ on May 09, 2010, 04:55:59 AM
Quote from: Arantor on April 22, 2010, 05:34:51 PM
I'd check what the options are for FB usernames and have it check it's valid with a regular expression just to be sure.
I am curious about regular expression to valid for social medias with username how?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Arantor on May 09, 2010, 05:23:53 AM
Right now, users can put anything. Literally.

Means that in theory they can add in Javascript into the page and do whatever the hell they want. That's the price of allowing just arbitrary input.

Regular expressions allow you to state what is allowed to be used, what characters are permitted and so on, so I'd be interested to know what characters are allowed in usernames for the sites so that bad input can be filtered out.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: nfn13187 on May 11, 2010, 08:50:23 PM
ok so I did this prior to reading the thread well sorta.....my new icons for facebook & myspace show up on the actual profile but not on the viewtopic page and everything seems how it should be I think maybe one of the following mods has changed something and is why it's not showing up the mods that are near where the icons should be are "skype integration", "advanced reputation" & "referral mod" ? any clue what file I would need to start looking in and what I'd even begin to be looking for?

*edited part*

I've tried un-installing some of the other mods to see if they are what's interfering with not much luck still.   I did this on another forum I have for a different site with hardly any mods to it except the simpleportal and it worked as intended there so has to be something I've installed that changed code somewhere to make it not work so kinda clueless where to even start looking  to what would affect that area.  I"m using the default 2.0 rc3 theme
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 11, 2010, 10:11:28 PM
QuoteShow on Topic View: (This is important if you want the icon to appear)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: nfn13187 on May 11, 2010, 10:39:42 PM
Quote from: Dismal Shadow on May 11, 2010, 10:11:28 PM
QuoteShow on Topic View: (This is important if you want the icon to appear)

it's checked still not working I'm tyring to move stuff over and redo most of it without mods and use same db atm to try and get it working in case something in the code got written over
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 11, 2010, 11:03:40 PM
Are you using SimplePortal by any chances?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: nfn13187 on May 11, 2010, 11:10:45 PM
yeah using simpleportal
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 11, 2010, 11:13:22 PM
So that's why it's not showing on your topic profile, other members can see yours, you cannot see your own so it's a SP bug.
http://www.simplemachines.org/community/index.php?topic=378770.msg2607095#msg2607095
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: nfn13187 on May 11, 2010, 11:15:03 PM
using simple portal on my other site that this works on also just not on my main site which leads me to believe something I've installed altered the code for the viewtopic page
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: nfn13187 on May 11, 2010, 11:17:05 PM
weird yeah I just noticed I can see it when I log out so yeah you're right but its weird it let me see it while logged in on my other board earlier
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 11, 2010, 11:18:46 PM
Try the code fixed provided by [SiNaN] please. :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: nfn13187 on May 11, 2010, 11:26:09 PM
yep works after I changed that one line of code :) thanks now to try to figure out my next code probelm for my banner ad thing that breaks the top part of the last post it puts its ad in
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Viresh21 on May 15, 2010, 02:13:13 AM
Thank you for the great info try the code fixed provided by SiNaN please... :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: businesslounge on May 19, 2010, 09:59:37 AM
Any way I can add this to SMF 1.1?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Arantor on May 19, 2010, 10:09:37 AM
You can try installing the Custom Profile Fields mod for 1.1.x.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: divecall on May 25, 2010, 07:44:12 PM
I have a little Problem with another custom Profil-field.

Looks like there ist a <br> missing.

How i can put the "Twitter" and "Facebook" icon in another Line ?
(Only one member use this in my Forum, so i dont know, if this happend bei all members profils.)

Any Idea ?

(http://www.abload.de/thumb/profilg3pw.jpg) (http://www.abload.de/image.php?img=profilg3pw.jpg)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: steeveo on May 29, 2010, 04:22:52 AM
I'm new to SMF, I have a forum but I'm no programmer of IT tech.  In the first post of this thread you mention "Upload any images to the default theme".  How do I do this, or is it something more technical than adding them through the forum's admin centre?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 29, 2010, 08:16:38 AM
Quote from: steeveo on May 29, 2010, 04:22:52 AM
I'm new to SMF, I have a forum but I'm no programmer of IT tech.  In the first post of this thread you mention "Upload any images to the default theme".  How do I do this, or is it something more technical than adding them through the forum's admin centre?
You need to upload images via FTP to www.yourforum.com/Themes/default/images
Quote from: divecall on May 25, 2010, 07:44:12 PM
I have a little Problem with another custom Profil-field.

Looks like there ist a <br> missing.

How i can put the "Twitter" and "Facebook" icon in another Line ?
(Only one member use this in my Forum, so i dont know, if this happend bei all members profils.)

Any Idea ?
I am not sure why it looks that way, should not have happen since I test many icons and they are in the same line.
Please do tell, what SMF version, how are you adding those code?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: divecall on May 29, 2010, 06:04:10 PM
I´m using SMF 2 RC 2 - you have an idea ?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: PurpleCrow on May 31, 2010, 07:52:29 AM
This is great! Thanks for posting this :D
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ukhalik2 on May 31, 2010, 03:31:48 PM
woow, awesome,
thanks for sharing!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: IDunc on June 25, 2010, 09:42:21 PM
Is there a way that users can choose a number from a selection dropdown thing, and that number converts to an image on the forum profile view? Like, have multiple images for one fields?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: lol222 on June 28, 2010, 12:05:57 AM
Looks nice.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: IDunc on June 29, 2010, 12:03:24 AM
Is there a way that users can choose a number from a selection dropdown thing, and that number converts to an image on the forum profile view? Like, have multiple images for one fields?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on June 29, 2010, 12:59:12 AM
Quote from: IDunc on June 29, 2010, 12:03:24 AM
Is there a way that users can choose a number from a selection dropdown thing, and that number converts to an image on the forum profile view? Like, have multiple images for one fields?
I am not sure what you mean...
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on July 05, 2010, 12:08:17 AM
Quote from: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Try this:

<img src="{DEFAULT_IMAGES_URL}/prestige/{INPUT}.gif" alt="{INPUT}" /></a>

Create a prestige folder, put all the prestige icons (all must be either gif or png files, you can't have both) replace .gif with .png if you are using png icons. Put the folder in the image folder of the default theme. Now name to 1st prestige in the select box (where 1st prestige is the name of the icon i.e.  1st prestige.png) There you go.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: lucas-ruroken on July 06, 2010, 12:30:52 PM
Awsome ;)

Good work!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: theSaRk on July 07, 2010, 06:24:43 AM
This is great!
thanks!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: arjem06 on July 10, 2010, 06:44:49 AM
Wow, that was a nice information that I got from this site. Hope the other people could visit this forum also so that they can get and give some ideas and great information. Who have a myspace account here, guys? Hope we can know one another much better, just visit my space account.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: PurpleCrow on July 14, 2010, 12:47:55 PM
Quote from: Delita Heiral on July 05, 2010, 12:08:17 AM
Quote from: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Try this:

<img src="{DEFAULT_IMAGES_URL}/prestige/{INPUT}.gif" alt="{INPUT}" /></a>

Create a prestige folder, put all the prestige icons (all must be either gif or png files, you can't have both) replace .gif with .png if you are using png icons. Put the folder in the image folder of the default theme. Now name to 1st prestige in the select box (where 1st prestige is the name of the icon i.e.  1st prestige.png) There you go.

I've done this on my forum and it works great however, even with the "Show on Topic View" box checked it doesnt appear in the postbits... Any idea why?

Here's a link to a random post - http://itsahomething.com/forum/index.php/topic,3.msg4.html#new
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on July 14, 2010, 01:16:49 PM
Quote from: PurpleCrow on July 14, 2010, 12:47:55 PM
Quote from: Delita Heiral on July 05, 2010, 12:08:17 AM
Quote from: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Try this:

<img src="{DEFAULT_IMAGES_URL}/prestige/{INPUT}.gif" alt="{INPUT}" /></a>

Create a prestige folder, put all the prestige icons (all must be either gif or png files, you can't have both) replace .gif with .png if you are using png icons. Put the folder in the image folder of the default theme. Now name to 1st prestige in the select box (where 1st prestige is the name of the icon i.e.  1st prestige.png) There you go.

I've done this on my forum and it works great however, even with the "Show on Topic View" box checked it doesnt appear in the postbits... Any idea why?

Here's a link to a random post - http://itsahomething.com/forum/index.php/topic,3.msg4.html#new (http://itsahomething.com/forum/index.php/topic,3.msg4.html#new)
What are you trying to show? I can see the moods there...
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: PurpleCrow on July 14, 2010, 01:29:21 PM
Sorry, should have removed my post - they just appeared!

Thanks again for the fantastic tip/trick!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: wizzard1 on July 21, 2010, 07:40:23 AM
tried it out for facebook but when i enter my facebook user name it doesnt come up
somehow you need to input something else there
is there anything to do about that ?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on July 25, 2010, 08:26:16 PM
Quote from: wizzard1 on July 21, 2010, 07:40:23 AM
tried it out for facebook but when i enter my facebook user name it doesnt come up
somehow you need to input something else there
is there anything to do about that ?
Where doesn't it come up?

Did you tick the box:
QuoteShow on Topic View: (This is important if you want the icon to appear)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial ---Twitter Hovercards
Post by: theguise on July 26, 2010, 11:43:00 AM
Sorry, wouldn't let me post this as a new topic. Another neat feature you can add in topic view profile fields for twitter is the ability to have the Twitter Hovercard appear when someone mouses over the twitter icon.  It's pretty easy to do this.

1. Register for an application on Twitter Developer at Twitter @Anywhere (http://dev.twitter.com/anywhere).

2. It will give you a code to use, but this is the one that you want to use for this feature.  Place it somewhere in your "index.template.php" file, but somewhere where the rest of the heading codes are.  Just remember to input your own developer id.
echo '
<script src="http://platform.twitter.com/anywhere.js?id=YOUR DEVELOPER ID&amp;v=1">
  </script>
<script type="text/javascript">

  twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
    });

  });

</script>'


3.  Now create a profile field with icons, asking the user just to input their Twitter Username.  And for the "Show Enclosed Within Text" option place this image code.
<img class="section" src="http://PATH TO YOUR IMAGE/twitter.png" alt="@{INPUT}" width="18" height="18" />

You're finished.  Now, if one of your members inputs their Twitter Username in the applicable field when editing their profile or registering, you can place your cursor over the Twitter image in topic view and it will display their Twitter Hovercard, pretty neat feature.  I'm not allowed to attach images so you'll have to find your own twitter image, just remember to change the width and height values in your <img> statement.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on July 26, 2010, 03:07:18 PM
Thank you for sharing. Will add in my first post.

Updated first post with Twitter Hovercard. :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: theguise on July 26, 2010, 04:33:18 PM
oops forgot to add: When the twitter application process asks for your Callback URL I found it best to leave out the "www." It was giving me an error when I had originally input this, upon changing it to http://mysite.com it worked. 

P.S. you can delete this post after you read it, but just thought you may want to include it as a note possibly.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on July 26, 2010, 04:44:23 PM
Quote from: theguise on July 26, 2010, 04:33:18 PM
oops forgot to add: When the twitter application process asks for your Callback URL I found it best to leave out the "www." It was giving me an error when I had originally input this, upon changing it to http://mysite.com it worked. 

P.S. you can delete this post after you read it, but just thought you may want to include it as a note possibly.
Thanks. :)
I wonder what Application Website is...? The url of our forum or..?

And no I can't delete it, only the moderators can.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: theguise on July 26, 2010, 05:06:50 PM
I don't feel like this really matters, I'm guessing they just want a registry of where it's being used.  But, I would put your base domain down.  I wish facebook would allow the same offsite tools since they use the hovercard as well. 
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: davyj on July 27, 2010, 04:15:12 AM
thanks for the information...well said ;)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: makecashonline on August 08, 2010, 02:10:16 AM
I have tried this code this really work. Now, my profile is showing the icon and lot very nice all i ahve to say its superb.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: willman349 on September 25, 2010, 11:12:40 AM
Quote from: Dismal Shadow on April 03, 2010, 02:30:40 AM
Go to Admin> Features and Options> Profile Field> New Field
I can't find this.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Oya on September 25, 2010, 12:54:46 PM
Quote from: willman349 on September 25, 2010, 11:12:40 AM
Quote from: Dismal Shadow on April 03, 2010, 02:30:40 AM
Go to Admin> Features and Options> Profile Field> New Field
I can't find this.

using 2.0?

if so admin > core features > advanced profile fields - turn it on

if using 1.1 you need the profile fields mod tho im not sure that'll do it all
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on November 30, 2010, 09:52:44 AM
This would be even better if smf had made it where the profile fields weren't displayed in alphabetical order.  Really annoying they did that.

Great tips, bud.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Sakae on December 01, 2010, 11:29:48 AM
Quote from: Dismal Shadow on April 03, 2010, 02:30:40 AM
Exclusively for TWITTER only: Twitter Hovercard

This method will automatically integrate Twitter seamlessly into your site with @ in it with hovercard and also show on topic profile with the image.

Thanks theguise for his tip.

1. Register for an application on Twitter Developer at Twitter @Anywhere. (http://dev.twitter.com/)

2. It will give you a code to use, but this is the one that you want to use for this feature. Place it before the </head> in your "index.template.php" file. Input your own developer ID.

  <script src="http://platform.twitter.com/anywhere.js?id=YOUR DEVELOPER ID&amp;v=1">
  </script>
<script type="text/javascript">

  twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
     });
     });
  </script>
 
      <script src="http://platform.twitter.com/anywhere.js?id=YOUR DEVELOPER ID&amp;v=1">
  </script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>
  </head>


3.  Now create a profile field with icons, asking the user just to input their Twitter Username.  And for the "Show Enclosed Within Text" option place this image code.
<a href="http://twitter.com/{INPUT}"><img class="section" src="{DEFAULT_IMAGES_URL}/twitter.png" alt="@{INPUT}" width="18" height="18" />

You're finished. Now, if one of your members inputs their Twitter Username in the applicable field when editing their profile or registering, you can place your cursor over the Twitter image in topic view and it will display their Twitter Hovercard, pretty neat feature. Remember to change the width and height values in your <img> statement.

The Result:

[IMG]http://i30.tinypic.com/29excg.png

[IMG]http://i30.tinypic.com/mtxrb.png


I have not yet test with custom theme, if anyone know please do share. Enjoy!

Does it still works? Twitter changed apps IDs recently (read here (http://dev.twitter.com/announcements))...

I can't make it work on my custom theme. Not showing the hovercard :(
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on December 01, 2010, 11:54:30 PM
Quote from: hcfwesker on November 30, 2010, 09:52:44 AM
This would be even better if smf had made it where the profile fields weren't displayed in alphabetical order.  Really annoying they did that.

Great tips, bud.
http://custom.simplemachines.org/mods/index.php?mod=1328
Quote from: Sakae on December 01, 2010, 11:29:48 AM
Quote from: Dismal Shadow on April 03, 2010, 02:30:40 AM
Exclusively for TWITTER only: Twitter Hovercard

This method will automatically integrate Twitter seamlessly into your site with @ in it with hovercard and also show on topic profile with the image.

Thanks theguise for his tip.

1. Register for an application on Twitter Developer at Twitter @Anywhere. (http://dev.twitter.com/)

2. It will give you a code to use, but this is the one that you want to use for this feature. Place it before the </head> in your "index.template.php" file. Input your own developer ID.

  <script src="http://platform.twitter.com/anywhere.js?id=YOUR DEVELOPER ID&amp;v=1">
  </script>
<script type="text/javascript">

  twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
     });
     });
  </script>
 
      <script src="http://platform.twitter.com/anywhere.js?id=YOUR DEVELOPER ID&amp;v=1">
  </script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>
  </head>


3.  Now create a profile field with icons, asking the user just to input their Twitter Username.  And for the "Show Enclosed Within Text" option place this image code.
<a href="http://twitter.com/{INPUT}"><img class="section" src="{DEFAULT_IMAGES_URL}/twitter.png" alt="@{INPUT}" width="18" height="18" />

You're finished. Now, if one of your members inputs their Twitter Username in the applicable field when editing their profile or registering, you can place your cursor over the Twitter image in topic view and it will display their Twitter Hovercard, pretty neat feature. Remember to change the width and height values in your <img> statement.

The Result:

[IMG]http://i30.tinypic.com/29excg.png

[IMG]http://i30.tinypic.com/mtxrb.png


I have not yet test with custom theme, if anyone know please do share. Enjoy!

Does it still works? Twitter changed apps IDs recently (read here (http://dev.twitter.com/announcements))...

I can't make it work on my custom theme. Not showing the hovercard :(
I will have a look at this when I have time. :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Sakae on December 02, 2010, 08:30:23 AM
Thank you, Dismal :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on December 02, 2010, 09:21:03 AM
Seem to work for me with the same API, are you using custom theme?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Sakae on December 02, 2010, 05:02:54 PM
Hey! It's working now! Perhaps I should wait Twitter authorize it or something?

But I still have a problem... It's opening a popup Twitter error saying "The client identifier was missing or unknown".

Check by yourself seeing my profile (Sakae) on this topic http://www.tigrelog.com.br/index.php?topic=6447 (http://www.tigrelog.com.br/index.php?topic=6447) - Use login/password provided on my signature.

--
Update #1: Perhaps I'm giving wrong ID? I'm using: dev.twitter.com/apps/553893/... Is that correct?
---
Update #2: Ok, I was using wrong ID. Now I'm using API Key and got almost working. Now it's telling me to link my Twitter acount to my SMF on a popup. I think I'm getting there. Problem is: Say it is loading, but I don't think it is. 2 minutes loading?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on December 02, 2010, 10:01:45 PM
It doesn't show the hovercard, are you sure you are putting the code in the custom theme file? (index.template.php)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Sakae on December 02, 2010, 10:20:47 PM
Quote from: Dismal Shadow on December 02, 2010, 10:01:45 PM
It doesn't show the hovercard, are you sure you are putting the code in the custom theme file? (index.template.php)

It's working great on default theme now. Time heals everything, apparently...lol.

Why doesn't work on custom theme? Sure I'm using exactly same code on both index.template.php's.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on December 02, 2010, 10:22:01 PM
Quote from: Sakae on December 02, 2010, 10:20:47 PM
Quote from: Dismal Shadow on December 02, 2010, 10:01:45 PM
It doesn't show the hovercard, are you sure you are putting the code in the custom theme file? (index.template.php)

It's working great on default theme now. Time heals everything, apparently...lol.

Why doesn't work on custom theme? Sure I'm using exactly same code on both index.template.php's.
That's because there is another index.template.php in the custom theme, that's why it isn't showing. :P
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Sakae on December 02, 2010, 10:28:38 PM
No, I'm using the SAME code on BOTH index.template.php'S (default AND custom themes!)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 11, 2011, 07:55:12 AM
Updated first post.

- Tested with RC5 and custom themes.
- Added target="_blank to open in new tab.
- Removed duplicate of the API Key in the script.
- Change the location of the image path to avoid overwrite of the images in themes from some mods. You need to create a new image folder and correct the path.

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Iomega0318 on May 23, 2011, 07:03:54 AM
Very nice, I actually just figured this out on my own lol..
but I love the Twitter hover feature, great job!


**EDIT**
Just a heads up, alt="blah", for links does not show up in Chrome.
You have to use, title="blah", adding both in works fine.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 24, 2011, 03:45:44 PM
Quote from: Iomega0318 on May 23, 2011, 07:03:54 AM
**EDIT**
Just a heads up, alt="blah", for links does not show up in Chrome.
You have to use, title="blah", adding both in works fine.
alt is for opening links in a new window...
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on May 25, 2011, 01:51:37 AM
~V~  , this is great, but the "Show with Icons" we use for something a little different.  see Brawler Info Box  http://www.brawldomain.com/AASMF2/profile/hcfwesker/   ( i don't want any other custom fields in that box)

I been trying to use the option "Standard (with title)".  Now, i made edits so the title doesn't show in the post profile, but you know how the "With Icons" option stacks each one side by side  ( unless you include a <br  > in there) ....  Well, with the "standard (with title) option, each once lines up on top of one another.   see facebook and youtube icons in my post profile   http://www.brawldomain.com/AASMF2/index.php?topic=33.msg148#msg148

what kind of edit needs to be made so they appear side by side like the "With Icons" option, like the IM buttons?

Hope you can help, thanx , bud. :)

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Iomega0318 on May 25, 2011, 06:23:12 PM
Quote from: ~V~ on May 24, 2011, 03:45:44 PM
Quote from: Iomega0318 on May 23, 2011, 07:03:54 AM
**EDIT**
Just a heads up, alt="blah", for links does not show up in Chrome.
You have to use, title="blah", adding both in works fine.
alt is for opening links in a new window...
I thought "target" was the new window, shouldn't "alt" be what is shown when you hover over an image?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 25, 2011, 11:22:56 PM
Quote from: Iomega0318 on May 25, 2011, 06:23:12 PM
Quote from: ~V~ on May 24, 2011, 03:45:44 PM
Quote from: Iomega0318 on May 23, 2011, 07:03:54 AM
**EDIT**
Just a heads up, alt="blah", for links does not show up in Chrome.
You have to use, title="blah", adding both in works fine.
alt is for opening links in a new window...
I thought "target" was the new window, shouldn't "alt" be what is shown when you hover over an image?
My bad. You are right.

You want it to show a link when hovering? Is that what you meant?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 25, 2011, 11:30:38 PM
Quote from: hcfwesker on May 25, 2011, 01:51:37 AM
~V~  , this is great, but the "Show with Icons" we use for something a little different.  see Brawler Info Box  http://www.brawldomain.com/AASMF2/profile/hcfwesker/   ( i don't want any other custom fields in that box)

I been trying to use the option "Standard (with title)".  Now, i made edits so the title doesn't show in the post profile, but you know how the "With Icons" option stacks each one side by side  ( unless you include a <br  > in there) ....  Well, with the "standard (with title) option, each once lines up on top of one another.   see facebook and youtube icons in my post profile   http://www.brawldomain.com/AASMF2/index.php?topic=33.msg148#msg148

what kind of edit needs to be made so they appear side by side like the "With Icons" option, like the IM buttons?

Hope you can help, thanx , bud. :)


It seem you changed it back to icons. Please provide a screenshot.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on May 26, 2011, 05:23:25 PM
No, I just edited it so the (Standard with title) option CPF's would be shown directly under the IM icons.  you'll see, the "Peach" image in my profile is assigned "with Icons".  And when i show the 2nd image demo, when using "with icons" for my social site images, they are labeled under the Peach image.

How they're shown stacked on top one another in image #1 ; I'd like for them to be stacked side by side, like in image #2 ( but that only happens when selecting the option "with Icons" ... but I need it to do the same when using (Standard with title) option.

Image when assigned the option (Standard with title)   -- stacks on top each other

(http://i51.tinypic.com/r6xvrd.jpg)


Image when assigned the option (With Icons)  -- stacks side by side

(http://i52.tinypic.com/2czscxv.jpg)


I hope that explained it better.

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on May 26, 2011, 05:47:46 PM
That's how it is in SMF.  With Icons it will stacks side by side. For standard, it would require some modify to the file.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Iomega0318 on May 26, 2011, 08:41:43 PM
Quote from: ~V~ on May 25, 2011, 11:22:56 PM
Quote from: Iomega0318 on May 25, 2011, 06:23:12 PM
Quote from: ~V~ on May 24, 2011, 03:45:44 PM
Quote from: Iomega0318 on May 23, 2011, 07:03:54 AM
**EDIT**
Just a heads up, alt="blah", for links does not show up in Chrome.
You have to use, title="blah", adding both in works fine.
alt is for opening links in a new window...
I thought "target" was the new window, shouldn't "alt" be what is shown when you hover over an image?
My bad. You are right.

You want it to show a link when hovering? Is that what you meant?
Nah was just letting you know since you had it in your link, plus I wanted to make the text hovering over it kinda match what is shown on all the other little icons :).
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on May 26, 2011, 09:02:31 PM
Quote from: ~V~ on May 26, 2011, 05:47:46 PM
That's how it is in SMF.  With Icons it will stacks side by side. For standard, it would require some modify to the file.

I understand that.  Was hoping you'd know how the edits would go.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on June 19, 2011, 10:54:07 AM
This tutorial should work in 2.0. :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 27, 2011, 10:49:33 AM
Probably did it wrong but my links are showing as text and not images.

They are also in the wrong place.

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 28, 2011, 11:53:27 AM
Quote from: Brack1 on August 27, 2011, 10:49:33 AM
Probably did it wrong but my links are showing as text and not images.

They are also in the wrong place.


How are you inputing the field?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 28, 2011, 12:34:58 PM
How ya mean?

Think I see what ya mean.

As text I shoulda said.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 08:05:59 PM
Quote from: Brack1 on August 28, 2011, 12:34:58 PM
How ya mean?

Think I see what ya mean.

As text I shoulda said.
No, I mean how did you input in the field box? What code did you use exactly? If it's showing text make sure "Choose Placement: With Icon" is there.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 30, 2011, 08:10:19 PM
Quote from: ~DS~ on August 30, 2011, 08:05:59 PM
Quote from: Brack1 on August 28, 2011, 12:34:58 PM
How ya mean?

Think I see what ya mean.

As text I shoulda said.
No, I mean how did you input in the field box? What code did you use exactly? If it's showing text make sure "Choose Placement: With Icon" is there.

It's there.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 08:15:19 PM
Link?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 30, 2011, 08:21:37 PM
www.miltonkeynesaware.co.cc

<a href="www.facebook.com/{INPUT}"target="_blank"><img class="section" src="www.forumname/facebook.png" alt="{INPUT}" /></a>

Is what my Show Enclosed Within Text (Optional): has within it.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 08:31:06 PM
Quote from: Brack1 on August 30, 2011, 08:21:37 PM
www.miltonkeynesaware.co.cc

<a href="www.facebook.com/{INPUT}"target="_blank"><img class="section" src="www.forumname/facebook.png" alt="{INPUT}" /></a>

Is what my Show Enclosed Within Text (Optional): has within it.
Can you try:
<a href="http://www.facebook.com/{INPUT}"target="_blank"><img class="section" src="www.forumname/facebook.png" title="Facebook" /></a>
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 30, 2011, 08:56:27 PM
Nothing shows at all.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 09:03:32 PM
Did you add anything in your profile? If you are trying to add FB, use the ID instead of the ful FB url.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 30, 2011, 09:06:50 PM
Quote from: ~DS~ on August 30, 2011, 09:03:32 PM
Did you add anything in your profile? If you are trying to add FB, use the ID instead of the ful FB url.

Call me an old fossil but what do ya mean ID?

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 09:08:19 PM
Quote from: Brack1 on August 30, 2011, 09:06:50 PM
Quote from: ~DS~ on August 30, 2011, 09:03:32 PM
Did you add anything in your profile? If you are trying to add FB, use the ID instead of the ful FB url.

Call me an old fossil but what do ya mean ID?


It's your username or ID after the FB url. www.facebook.com/Brack1

Did you upload the icons?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 30, 2011, 09:12:48 PM
Both images are in my theme/images folder.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 09:14:23 PM
QuoteCreate a image folder to the root of your SMF installation so that it doesn't conflict images with other themes or mods.
Upload any images to the image folder you created.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: TheListener on August 30, 2011, 09:16:23 PM
Quote from: ~DS~ on August 30, 2011, 09:14:23 PM
QuoteCreate a image folder to the root of your SMF installation so that it doesn't conflict images with other themes or mods.
Upload any images to the image folder you created.

Had an idea that may be it.

Can this one be called images or is a different name better?

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on August 30, 2011, 09:17:21 PM
Whatever suits you. :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 11:39:37 AM
which one is the api. consumer key or consumer secret
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 01, 2011, 11:57:42 AM
Consumer key
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 12:00:30 PM
thanks. if i download the twiiter tweets in your profile it wont mess each other up
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 01, 2011, 12:02:09 PM
Quote from: Monkey50 on September 01, 2011, 12:00:30 PM
thanks. if i download the twiiter tweets in your profile it wont mess each other up
I have no idea, haven't tested that mod.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 12:41:21 PM
you know where it says Show Enclosed Within Text (Optional) is that where i put the code
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 01, 2011, 01:21:04 PM
Yes
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 01:26:37 PM
last thing the Create a image folder to the root of your SMF installation so that it doesn't conflict images with other themes or mods.
Upload any images to the image folder you created.    would that be public/theme or public/   and make my own folder
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 01, 2011, 01:33:15 PM
Public, where the root of SMF is.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 01:39:46 PM
ok thanks
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 02:25:31 PM
where do i put my api

twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
     });
     });

     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });

  </script>
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 01, 2011, 03:06:05 PM
Quote2. It will give you a code to use, but this is the one that you want to use for this feature. Place it before the </head> in your "index.template.php" file. Input your own Consumer Key.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 01, 2011, 03:11:03 PM
thats what i am asking where do i put the api
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 01, 2011, 03:12:37 PM
Quote<script src="http://platform.twitter.com/anywhere.js?id=YOUR Consumer Key&amp;v=1"></script>
  <script type="text/javascript">

  twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
     });
     });

     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });

  </script>
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 02, 2011, 05:09:59 AM
what line is it on. theres lots of them lol
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 02, 2011, 08:04:12 AM
Quote from: Monkey50 on September 02, 2011, 05:09:59 AM
what line is it on. theres lots of them lol
What line? Just put it before the </head> where the <body> is.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 02, 2011, 09:01:36 AM
where would i find the index.templete.php on the forum by Themes and Layout Settings and then Edit Theme the css then index.templete.php
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Account Abandoned on September 04, 2011, 02:19:22 AM
Awesome tutorial!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: thomaswinter on September 06, 2011, 05:49:51 AM
thanks for the tips!!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 06, 2011, 06:45:01 AM
where do i find the index.template.php is it in the admin/themes and layout/modify themes/my theme/index.template.php
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 06, 2011, 07:03:24 AM
Quote from: Monkey50 on September 06, 2011, 06:45:01 AM
where do i find the index.template.php is it in the admin/themes and layout/modify themes/my theme/index.template.php
Haven't tried that. I usually edit my files via FTP
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 06, 2011, 08:11:11 AM
FTP is that with notepad++ or from my hostsite
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 06, 2011, 08:29:15 AM
Quote from: Monkey50 on September 06, 2011, 08:11:11 AM
FTP is that with notepad++ or from my hostsite
Yeah, you will need notepad++ to edit files. Download the file (index.template.php) using any FTP client. (I use Filezilla) Edit it with notepad++, save and upload it back to the server.

How do I use FTP? / What is FTP? (http://wiki.simplemachines.org/smf/How_do_I_use_FTP)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 06, 2011, 08:40:10 AM
thanks. i got filezilla not long ago just trying to work it out.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 08, 2011, 04:42:21 AM
in the head bit theres head lots of writing head again then below the last head is body which part do i put the writing.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 20, 2011, 01:16:14 PM
i have done all that but i made the folder and the pictures are not working
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ddabcd277 on September 21, 2011, 08:08:41 AM
Hello,

Is it possible also to be added Google+?

Cheers,
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on September 23, 2011, 12:04:48 AM
Quote from: Monkey50 on September 20, 2011, 01:16:14 PM
i have done all that but i made the folder and the pictures are not working

make sure the ENTIRE image path you used for your profile fields are correct and link to the image folder you used. 

Quote from: ddabcd277 on September 21, 2011, 08:08:41 AMIs it possible also to be added Google+?

Cheers,

I haven't tried that, but i'm pretty sure you can add almost any social media network for members to add to their profiles with this method.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 23, 2011, 10:40:30 AM
is this right then src="http//mysitehere/index.php/images/facebook.png" title="Facebook" /></a>
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Rain Forest on September 23, 2011, 01:51:51 PM
When I click on the icon at topic. It keeps telling me I'm going to: http://mywebsiteblabla.com/forum/www.facebook.com/heremyfacebookaccount

How can I remove the ''http://mywebsiteblabla.com/forum/'' part?

I'm using your part..

<a href="www.facebook.com/{INPUT}"target="_blank"><img class="section" src="http://mywebsiteblabla/images/facebook.png" title="Facebook" /></a>
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 23, 2011, 03:01:35 PM
What did you input in the profile?
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 23, 2011, 03:02:29 PM
Quote from: ddabcd277 on September 21, 2011, 08:08:41 AM
Hello,

Is it possible also to be added Google+?

Cheers,
I use this way:
<a href="{INPUT}"target="_blank"><img class="section" src="http://mysite.org/community/images/gplus.png" title="Google+" /></a>[/cpde]
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 23, 2011, 03:03:59 PM
Quote from: Monkey50 on September 23, 2011, 10:40:30 AM
is this right then src="http//mysitehere/index.php/images/facebook.png" title="Facebook" /></a>

<a href="{INPUT}"target="_blank"><img class="section" src="http://mysitehere.org/images/gplus.png" title="Any Social Here" /></a>
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Rain Forest on September 23, 2011, 03:11:28 PM
Quote from: ~DS~ on September 23, 2011, 03:01:35 PM
What did you input in the profile?

Just my username at Facebook. ..

I fixed it!
I replaced:

<a href="www.facebook.com/{INPUT}"target="_blank"><img class="section" src="http://Mywebsiteblabla.nl/images/facebook.png" title="Facebook" /></a>

With:
<a href="http://facebook.com/{INPUT}"target="_blank"><img class="section" src="http://Mywebsiteblabla.nl/images/facebook.png" title="Facebook" /></a>

So the www. should be http:// :)

Thanks for this tip!
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~DS~ on September 23, 2011, 03:15:13 PM
It depends on your Facebook's Secure Browsing. :)
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Monkey50 on September 24, 2011, 10:33:14 AM
how would i know where my path to my images are. and where it says my site is that my sites full name including http or www.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~Dragon~ on October 19, 2011, 01:29:36 AM
Thank  I do it ;d I update work fix  ;D trick
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: ~Dragon~ on October 19, 2011, 04:42:33 AM
I final hard work 3 hours trick on struggle  :o  I am hard work trick fix


trick<a href="http://www.facebook.com/{INPUT}"><img src="url" title="Facebook" /></a>

<img src="url" title="Facebook" /></a>


simply 


edit basic
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Kreator on January 01, 2012, 08:35:46 AM
How would this work with deviantart, where your Gallery is a subdomain of deviant ie http:\\fredboggs.deviantart.com/Gallery
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on January 01, 2012, 04:17:03 PM
Quote from: Kreator on January 01, 2012, 08:35:46 AM
How would this work with deviantart, where your Gallery is a subdomain of deviant ie http:\\fredboggs.deviantart.com/Gallery

We use DeviantArt for this, so I can share my code with you.   

Members only need to put their DeviantArt name, not their entire link

Show Enclosed Within Text (Optional):
<a href="http://{INPUT}.deviantart.com"><img src="{DEFAULT_IMAGES_URL}/deviantart.png" title="{INPUT}" /></a>

http://www.brawldomain.com/Themes/default/images/deviantart.png  this is the icon image we have, if you'd like to use that as well. 

Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Kreator on January 02, 2012, 05:49:38 AM
thanks hcfwesker! I figured it out in the End, I pinched the logo from Deviantart and cut it down a Little
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: hcfwesker on January 30, 2012, 05:27:42 PM
This has been released as a MOD for SMF 2.0 - 2.0.2 :  http://www.simplemachines.org/community/index.php?topic=467074.msg3264200#msg3264200

So far only available social network sites in the MOD are Facebook, MySpace, Twitter, Youtube, DevianArt.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: PureLoneWolf on July 11, 2012, 05:01:41 AM
Sorry to resurrect an old thread, but I followed the instructions here and it worked beautifully across my site for twitter hovercards.

That said, people have a tendency, in the forums and shoutbox, to specify @something when they want to refer to a user.  This leads to hovercards that aren't actually for the right people being displayed.

Is there a way to restrict the hovercard so that it only works on the profile icons?  Not the entire site?

Thanks
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: Arantor on July 25, 2012, 05:14:07 AM
Add ;sa=news to the RSS feed.
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: gerzok on July 27, 2012, 07:43:22 PM
Thank you sooooooooo much. I lov this post :D
Title: Re: [Tip] Social Media Icons in Profile Field Tutorial
Post by: savya_sathe on April 01, 2015, 03:53:39 AM
Though its old post but this helped me in getting social media icons to my posts.