News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[Tip] Social Media Icons in Profile Field Tutorial

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

Previous topic - Next topic

theguise

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. 

davyj


makecashonline

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.

willman349


Oya

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

hcfwesker

#65
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.

Sakae

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.

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

I can't make it work on my custom theme. Not showing the hovercard :(
http://www.tigrelog.com.br
l: simple p: machines

~DS~

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.

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

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

Sakae

http://www.tigrelog.com.br
l: simple p: machines

~DS~

Seem to work for me with the same API, are you using custom theme?
"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

Sakae

#70
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 - 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?
http://www.tigrelog.com.br
l: simple p: machines

~DS~

It doesn't show the hovercard, are you sure you are putting the code in the custom theme file? (index.template.php)
"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

Sakae

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.
http://www.tigrelog.com.br
l: simple p: machines

~DS~

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
"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

Sakae

No, I'm using the SAME code on BOTH index.template.php'S (default AND custom themes!)
http://www.tigrelog.com.br
l: simple p: machines

~DS~

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.

"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

Iomega0318

#76
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.
UOFreeshards.net
UOFreeshards.net 2.1 Aplha Test Site
"I believe in Christianity as I believe in the sun...
not because I see it but because by it I see everything else."
C.S. Lewis

Heed what I say, for it shall be mentioned only once.

~DS~

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

hcfwesker

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


Iomega0318

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?
UOFreeshards.net
UOFreeshards.net 2.1 Aplha Test Site
"I believe in Christianity as I believe in the sun...
not because I see it but because by it I see everything else."
C.S. Lewis

Heed what I say, for it shall be mentioned only once.

Advertisement: