News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

[Tip] Social Media Icons in Profile Field Tutorial

Started by ~DS~, April 03, 2010, 02:30:40 AM

Previous topic - Next topic

~DS~

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.

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:





Enjoy!
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

~DS~

Would also work if you are giving full url.
<a href="{INPUT}"><img src="{DEFAULT_IMAGES_URL}/facebook.png" alt="{INPUT}" /></a>
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Arantor


~DS~

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.

"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Arantor



stevescotton

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?

~DS~

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.  :)

"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Arantor

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.


frenki

is it possible to place it near other icons, such as mail,profile,pm ? what would i need to change for that 

Arantor

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.

frenki


Arantor

No, not necessarily. More likely a major change to Display.template.php and possibly the custom field loader.

Liam.

This method is a hell of alot easier than doing it any other way through hardcoding.

GazOutEast

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?
I have 20:20 vision - I can see anything bigger than 20" x 20"

Arantor

It should actually be retained since it's just using a core feature in SMF.

Utech22

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

~DS~

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.   
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Afro

Looks pretty cool.
What if you want to add tweetmeme icon ?

Advertisement: