Customizing SMF > Tips and Tricks

[Tip] Social Media Icons in Profile Field Tutorial

(1/30) > >>

~DS~:
You don't need Profile Fields and Icons ModIt'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):


--- Code: ---<a href="www.facebook.com/{INPUT}"target="_blank"><img class="section" src="www.yoursitehere/images/facebook.png" title="Facebook" /></a>
--- End code ---
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.


--- Code: ---  <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>
 
--- End code ---

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.

--- Code: ---<a href="http://twitter.com/{INPUT}"target="_blank"><img class="section" src="www.yoursitehere/images/twitter.png" alt="{INPUT}" width="18" height="18" />
--- End code ---

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!

~DS~:
Would also work if you are giving full url.

--- Code: ---<a href="{INPUT}"><img src="{DEFAULT_IMAGES_URL}/facebook.png" alt="{INPUT}" /></a>
--- End code ---

:
I like this :)

~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.

:
If they're properly written it should work.

Navigation

[0] Message Index

[#] Next page

Go to full version