Simple Machines Community Forum

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:





Enjoy!

Would also work if you are giving full url.
<a href="{INPUT}"><img src="{DEFAULT_IMAGES_URL}/facebook.png" alt="{INPUT}" /></a>

I like this :)

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.

Thanks a lot

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?

Zitat von: stevescotton in April 22, 2010, 05:04:00 VORMITTAG
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


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

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.

Thanks for that, will give it a go :D

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

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.

yes, thats what i meant. Themes css ?

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

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

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?

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

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

Zitat von: Utech22 in Mai 03, 2010, 11:38:28 NACHMITTAGS
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.   

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

Zitat von: Afro in Mai 05, 2010, 02:59:23 NACHMITTAGS
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.

Zitat von: Arantor in April 22, 2010, 05:34:51 NACHMITTAGS
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?

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.

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

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

Zitat von: Dismal Shadow in Mai 11, 2010, 10:11:28 NACHMITTAGS

ZitatShow 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

Are you using SimplePortal by any chances?

yeah using simpleportal

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

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

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

Try the code fixed provided by [SiNaN] please. :)

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

Thank you for the great info try the code fixed provided by SiNaN please... :)

Any way I can add this to SMF 1.1?

You can try installing the Custom Profile Fields mod for 1.1.x.

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/image.php?img=profilg3pw.jpg)

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?

Zitat von: steeveo in Mai 29, 2010, 04:22:52 VORMITTAG
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

Zitat von: divecall in Mai 25, 2010, 07:44:12 NACHMITTAGS
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?

I´m using SMF 2 RC 2 - you have an idea ?

This is great! Thanks for posting this :D

woow, awesome,
thanks for sharing!

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?

Looks nice.

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?

Zitat von: IDunc in Juni 29, 2010, 12:03:24 VORMITTAG
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...

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.

Zitat von: IDunc in Juli 04, 2010, 11:54:39 NACHMITTAGS
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.

Awsome ;)

Good work!

This is great!
thanks!

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.

Zitat von: Delita Heiral in Juli 05, 2010, 12:08:17 VORMITTAG

Zitat von: IDunc in Juli 04, 2010, 11:54:39 NACHMITTAGS
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:

Code Auswählen Erweitern

<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

Zitat von: PurpleCrow in Juli 14, 2010, 12:47:55 NACHMITTAGS

Zitat von: Delita Heiral in Juli 05, 2010, 12:08:17 VORMITTAG

Zitat von: IDunc in Juli 04, 2010, 11:54:39 NACHMITTAGS
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:

Code Auswählen Erweitern

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

Sorry, should have removed my post - they just appeared!

Thanks again for the fantastic tip/trick!

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 ?

Zitat von: wizzard1 in Juli 21, 2010, 07:40:23 VORMITTAG
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:

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

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.

Thank you for sharing. Will add in my first post.

Updated first post with Twitter Hovercard. :)

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.

Zitat von: theguise in Juli 26, 2010, 04:33:18 NACHMITTAGS
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.

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. 

thanks for the information...well said ;)

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.

Zitat von: Dismal Shadow in April 03, 2010, 02:30:40 VORMITTAG
Go to Admin> Features and Options> Profile Field> New Field

I can't find this.

Zitat von: willman349 in September 25, 2010, 11:12:40 VORMITTAG

Zitat von: Dismal Shadow in April 03, 2010, 02:30:40 VORMITTAG
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

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.

Zitat von: Dismal Shadow in April 03, 2010, 02:30:40 VORMITTAG
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.

Code Auswählen Erweitern

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

Code Auswählen Erweitern

<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 :(

Zitat von: hcfwesker in November 30, 2010, 09:52:44 VORMITTAG
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

Zitat von: Sakae in Dezember 01, 2010, 11:29:48 VORMITTAG

Zitat von: Dismal Shadow in April 03, 2010, 02:30:40 VORMITTAG
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.

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

Thank you, Dismal :)

Seem to work for me with the same API, are you using custom theme?

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?

It doesn't show the hovercard, are you sure you are putting the code in the custom theme file? (index.template.php)

Zitat von: Dismal Shadow in Dezember 02, 2010, 10:01:45 NACHMITTAGS
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.

Zitat von: Sakae in Dezember 02, 2010, 10:20:47 NACHMITTAGS

Zitat von: Dismal Shadow in Dezember 02, 2010, 10:01:45 NACHMITTAGS
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

No, I'm using the SAME code on BOTH index.template.php'S (default AND custom themes!)

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.

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.

Zitat von: Iomega0318 in Mai 23, 2011, 07:03:54 VORMITTAG
**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...

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

Zitat von: ~V~ in Mai 24, 2011, 03:45:44 NACHMITTAGS

Zitat von: Iomega0318 in Mai 23, 2011, 07:03:54 VORMITTAG
**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?

Zitat von: Iomega0318 in Mai 25, 2011, 06:23:12 NACHMITTAGS

Zitat von: ~V~ in Mai 24, 2011, 03:45:44 NACHMITTAGS

Zitat von: Iomega0318 in Mai 23, 2011, 07:03:54 VORMITTAG
**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?

Zitat von: hcfwesker in Mai 25, 2011, 01:51:37 VORMITTAG
~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.

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




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




I hope that explained it better.

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.

Zitat von: ~V~ in Mai 25, 2011, 11:22:56 NACHMITTAGS

Zitat von: Iomega0318 in Mai 25, 2011, 06:23:12 NACHMITTAGS

Zitat von: ~V~ in Mai 24, 2011, 03:45:44 NACHMITTAGS

Zitat von: Iomega0318 in Mai 23, 2011, 07:03:54 VORMITTAG
**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 :).

Zitat von: ~V~ in Mai 26, 2011, 05:47:46 NACHMITTAGS
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.

This tutorial should work in 2.0. :)

Probably did it wrong but my links are showing as text and not images.

They are also in the wrong place.

Zitat von: Brack1 in August 27, 2011, 10:49:33 VORMITTAG
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?

How ya mean?

Think I see what ya mean.

As text I shoulda said.

Zitat von: Brack1 in August 28, 2011, 12:34:58 NACHMITTAGS
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.

Zitat von: ~DS~ in August 30, 2011, 08:05:59 NACHMITTAGS

Zitat von: Brack1 in August 28, 2011, 12:34:58 NACHMITTAGS
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.

Link?

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.

Zitat von: Brack1 in August 30, 2011, 08:21:37 NACHMITTAGS
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>

Nothing shows at all.

Did you add anything in your profile? If you are trying to add FB, use the ID instead of the ful FB url.

Zitat von: ~DS~ in August 30, 2011, 09:03:32 NACHMITTAGS
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?

Zitat von: Brack1 in August 30, 2011, 09:06:50 NACHMITTAGS

Zitat von: ~DS~ in August 30, 2011, 09:03:32 NACHMITTAGS
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?

Both images are in my theme/images folder.

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

Zitat von: ~DS~ in August 30, 2011, 09:14:23 NACHMITTAGS

ZitatCreate 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?

Whatever suits you. :)

which one is the api. consumer key or consumer secret

Consumer key

thanks. if i download the twiiter tweets in your profile it wont mess each other up

Zitat von: Monkey50 in September 01, 2011, 12:00:30 NACHMITTAGS
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.

you know where it says Show Enclosed Within Text (Optional) is that where i put the code

Yes

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

Public, where the root of SMF is.

ok thanks

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>

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

thats what i am asking where do i put the api

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

what line is it on. theres lots of them lol

Zitat von: Monkey50 in September 02, 2011, 05:09:59 VORMITTAG
what line is it on. theres lots of them lol

What line? Just put it before the </head> where the <body> is.

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

Awesome tutorial!

thanks for the tips!!

where do i find the index.template.php is it in the admin/themes and layout/modify themes/my theme/index.template.php

Zitat von: Monkey50 in September 06, 2011, 06:45:01 VORMITTAG
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

FTP is that with notepad++ or from my hostsite

Zitat von: Monkey50 in September 06, 2011, 08:11:11 VORMITTAG
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)

thanks. i got filezilla not long ago just trying to work it out.

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.

i have done all that but i made the folder and the pictures are not working

Hello,

Is it possible also to be added Google+?

Cheers,

Zitat von: Monkey50 in September 20, 2011, 01:16:14 NACHMITTAGS
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. 

Zitat von: ddabcd277 in September 21, 2011, 08:08:41 VORMITTAGIs 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.

is this right then src="http//mysitehere/index.php/images/facebook.png" title="Facebook" /></a>

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>

What did you input in the profile?

Zitat von: ddabcd277 in September 21, 2011, 08:08:41 VORMITTAG
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]

Zitat von: Monkey50 in September 23, 2011, 10:40:30 VORMITTAG
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>

Zitat von: ~DS~ in September 23, 2011, 03:01:35 NACHMITTAGS
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!

It depends on your Facebook's Secure Browsing. :)

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.

Thank  I do it ;d I update work fix  ;D trick

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

How would this work with deviantart, where your Gallery is a subdomain of deviant ie http:\\fredboggs.deviantart.com/Gallery

Zitat von: Kreator in Januar 01, 2012, 08:35:46 VORMITTAG
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. 

thanks hcfwesker! I figured it out in the End, I pinched the logo from Deviantart and cut it down a Little

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.

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

Add ;sa=news to the RSS feed.

Thank you sooooooooo much. I lov this post :D

Though its old post but this helped me in getting social media icons to my posts.