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&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!
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?
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. :)
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
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.
Looks pretty cool.
What if you want to add tweetmeme icon ?
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.
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?
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
QuoteShow on Topic View: (This is important if you want the icon to appear)
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
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/thumb/profilg3pw.jpg) (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?
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?
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?
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...
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.
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.
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.
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
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...
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 ?
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)
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&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.
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.
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.
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.
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
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.
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&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&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 :(
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&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&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. :)
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)
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.
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
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.
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...
~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. :)
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?
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?
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.
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.
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.
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 :).
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.
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.
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?
How ya mean?
Think I see what ya mean.
As text I shoulda said.
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.
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.
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.
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>
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.
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?
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?
Both images are in my theme/images folder.
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.
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?
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
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.
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>
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.
thats what i am asking where do i put the api
Quote<script src="http://platform.twitter.com/anywhere.js?id=YOUR Consumer Key&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
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.
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
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
FTP is that with notepad++ or from my hostsite
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)
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,
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.
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?
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]
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>
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!
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
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.
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.