Add & Create Social Media Icons To Profiles

Started by hcfwesker, January 30, 2012, 10:06:52 AM

Previous topic - Next topic

Andrew Evenstar

I have a question. I am using 1.1.16 with the ultimate profile.

Is there anyway to have these icons show up on the users actual profile with the included information put into the users' fields? Under "Contact Information"

Has this already been addressed? I'll read through the pages but I wanted to ask first.

This mod is awesome, Thanks! I've already customized it. I removed myspace and I changed Linked In to Live Stream account.

hcfwesker

Yes, it can be added.  Most likely just add the same edits from Profile.template.php , to where you want it to show on ultimateprofile.template.php

</tr><tr>
<td colspan="2"><hr size="1" width="100%" class="hrcolor" /></td>
</tr><tr>
<td><b>', $txt['smi_facebook_title'], ': </b></td>
<td>', !empty($context['member']['options']['facebook']) ? '<a href="http://www.facebook.com/' . $context['member']['options']['facebook'] . '" target="_blank">' . $context['member']['options']['facebook'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_myspace_title'], ': </b></td>
<td>', !empty($context['member']['options']['myspace']) ? '<a href="http://www.myspace.com/' . $context['member']['options']['myspace'] . '" target="_blank">' . $context['member']['options']['myspace'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_twitter_title'], ': </b></td>
<td>', !empty($context['member']['options']['twitter']) ? '<a href="http://www.twitter.com/' . $context['member']['options']['twitter'] . '" target="_blank">' . $context['member']['options']['twitter'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_googleplus_title'], ': </b></td>
<td>', !empty($context['member']['options']['googleplus']) ? '<a href="https://plus.google.com/' . $context['member']['options']['googleplus'] . '" target="_blank">' . $context['member']['options']['googleplus'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_linkedin_title'], ': </b></td>
<td>', !empty($context['member']['options']['linkedin']) ? '<a href="' . $context['member']['options']['linkedin'] . '" target="_blank">' . $context['member']['options']['linkedin'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_youtube_title'], ': </b></td>
<td>', !empty($context['member']['options']['youtube']) ? '<a href="http://www.youtube.com/' . $context['member']['options']['youtube'] . '" target="_blank">' . $context['member']['options']['youtube'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_deviantart_title'], ': </b></td>
<td>', !empty($context['member']['options']['deviantart']) ? '<a href="http://' . $context['member']['options']['deviantart'] . '.deviantart.com/" target="_blank">' . $context['member']['options']['deviantart'] . '</a>'  : '', '</td>
</tr><tr>
<td colspan="2"><hr size="1" width="100%" class="hrcolor" /></td>


I just never got around to adding UltProfile edits for SMF1, it was a request from a member that didnt use UltProfile so i didn't make it a priority at the time to add the edits for SMf1

Andrew Evenstar

Quote from: hcfwesker on August 19, 2012, 01:59:56 AM
Yes, it can be added.  Most likely just add the same edits from Profile.template.php , to where you want it to show on ultimateprofile.template.php

</tr><tr>
<td colspan="2"><hr size="1" width="100%" class="hrcolor" /></td>
</tr><tr>
<td><b>', $txt['smi_facebook_title'], ': </b></td>
<td>', !empty($context['member']['options']['facebook']) ? '<a href="http://www.facebook.com/' . $context['member']['options']['facebook'] . '" target="_blank">' . $context['member']['options']['facebook'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_myspace_title'], ': </b></td>
<td>', !empty($context['member']['options']['myspace']) ? '<a href="http://www.myspace.com/' . $context['member']['options']['myspace'] . '" target="_blank">' . $context['member']['options']['myspace'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_twitter_title'], ': </b></td>
<td>', !empty($context['member']['options']['twitter']) ? '<a href="http://www.twitter.com/' . $context['member']['options']['twitter'] . '" target="_blank">' . $context['member']['options']['twitter'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_googleplus_title'], ': </b></td>
<td>', !empty($context['member']['options']['googleplus']) ? '<a href="https://plus.google.com/' . $context['member']['options']['googleplus'] . '" target="_blank">' . $context['member']['options']['googleplus'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_linkedin_title'], ': </b></td>
<td>', !empty($context['member']['options']['linkedin']) ? '<a href="' . $context['member']['options']['linkedin'] . '" target="_blank">' . $context['member']['options']['linkedin'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_youtube_title'], ': </b></td>
<td>', !empty($context['member']['options']['youtube']) ? '<a href="http://www.youtube.com/' . $context['member']['options']['youtube'] . '" target="_blank">' . $context['member']['options']['youtube'] . '</a>'  : '', '</td>
</tr><tr>
<td><b>', $txt['smi_deviantart_title'], ': </b></td>
<td>', !empty($context['member']['options']['deviantart']) ? '<a href="http://' . $context['member']['options']['deviantart'] . '.deviantart.com/" target="_blank">' . $context['member']['options']['deviantart'] . '</a>'  : '', '</td>
</tr><tr>
<td colspan="2"><hr size="1" width="100%" class="hrcolor" /></td>


I just never got around to adding UltProfile edits for SMF1, it was a request from a member that didnt use UltProfile so i didn't make it a priority at the time to add the edits for SMf1

Thanks I was able to place the info on the ultimate profile, but the information just shows up as text, and not the icons. Is it supposed to be like that? Is it easy to change? Thanks!

hcfwesker

Quote from: Andrew Evenstar on August 19, 2012, 05:23:36 AM

Thanks I was able to place the info on the ultimate profile, but the information just shows up as text, and not the icons. Is it supposed to be like that? Is it easy to change? Thanks!

Yes, because the code was for regular profiles that just shows text.  You can try this, but even if a member doesn't add info, it'll still show the icon.

echo '
<td><img src="' . $settings['images_url'] . '/smifacebook.png" alt="Facebook" border="0" /></a></td>
<td>', !empty($context['member']['options']['facebook']) ? '<a href="http://www.facebook.com/' . $context['member']['options']['facebook'] . '" target="_blank">' . $context['member']['options']['facebook'] . '</a>'  : '', '</td>
</tr><tr>
<td><img src="' . $settings['images_url'] . '/smimyspace.png" alt="MySpace" border="0" /></a></td>
<td>', !empty($context['member']['options']['myspace']) ? '<a href="http://www.myspace.com/' . $context['member']['options']['myspace'] . '" target="_blank">' . $context['member']['options']['myspace'] . '</a>'  : '', '</td>
</tr><tr>
<td><img src="' . $settings['images_url'] . '/smitwitter.png" alt="Twitter" border="0" /></a></td>
<td>', !empty($context['member']['options']['twitter']) ? '<a href="http://www.twitter.com/' . $context['member']['options']['twitter'] . '" target="_blank">' . $context['member']['options']['twitter'] . '</a>'  : '', '</td>
</tr><tr>
<td><img src="' . $settings['images_url'] . '/smigoogleplus.png" alt="GooglePlus" border="0" /></a></td>
<td>', !empty($context['member']['options']['googleplus']) ? '<a href="https://plus.google.com/' . $context['member']['options']['googleplus'] . '" target="_blank">' . $context['member']['options']['googleplus'] . '</a>'  : '', '</td>
</tr><tr>
<td><img src="' . $settings['images_url'] . '/smilinkedin.png" alt="LinkedIn" border="0" /></a></td>
<td>', !empty($context['member']['options']['linkedin']) ? '<a href="' . $context['member']['options']['linkedin'] . '" target="_blank">' . $context['member']['options']['linkedin'] . '</a>'  : '', '</td>
</tr><tr>
<td><img src="' . $settings['images_url'] . '/smiyoutube.png" alt="Youtube" border="0" /></a></td>
<td>', !empty($context['member']['options']['youtube']) ? '<a href="http://www.youtube.com/' . $context['member']['options']['youtube'] . '" target="_blank">' . $context['member']['options']['youtube'] . '</a>'  : '', '</td>
</tr><tr>
<td><img src="' . $settings['images_url'] . '/smideviantart.png" alt="Deviantart" border="0" /></a></td>
<td>', !empty($context['member']['options']['deviantart']) ? '<a href="http://' . $context['member']['options']['deviantart'] . '.deviantart.com/" target="_blank">' . $context['member']['options']['deviantart'] . '</a>'  : '', '</td>';

Conay

Hi hcfwesker,
Thanks for the great mod :)

I wanted to ask if you would modify the modification (:P) to allow people to add additional fields (for social media stuff exclusively) OR if you'd be able to add Fanfiction.net/FictionPress [nofollow] to your list of social media sites?

Thanks.

hcfwesker

Not really possible to add that functionality, least not my level of coding.  If i get some free time this week i may possibly add it, or make you a package with fanfiction options.

Kindred

you know that SMF already has a customizable profile fields?   That's how we are doing the facebook and linked in options here....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

hcfwesker

Yeah, I was going to suggest that, but he/she probably wants them to line up with the icons from this Mod.  Which it is actually possible to do with one of the custom profile field selections if one knows what they're doing.

Conay

Quote from: hcfwesker on August 21, 2012, 11:30:40 AM
Yeah, I was going to suggest that, but he/she probably wants them to line up with the icons from this Mod.  Which it is actually possible to do with one of the custom profile field selections if one knows what they're doing.

Thanks for your response. You've hit the nail on the head :) My FF.net [nofollow] field looks all lonely and out of place on my forum profile edit page.

Although I didn't know that was possible. I'll try having a go later.

Andrew Evenstar

I have a question again,

I'm using SMF 1.1.16, is there a way to get these icons to display on the private message view?

Thanks!

hcfwesker

Quote from: Andrew Evenstar on September 04, 2012, 12:31:34 PMis there a way to get these icons to display on the private message view?

Pretty sure you can make the same edits from the Display page to PersonalMessage.template.php

Code (Find) Select
// Show the profile, website, email address, and personal message buttons.

Code (Add Before) Select

  // Social Media Icons -->
echo
!empty($message['member']['options']['facebook']) ? '<a href="http://www.facebook.com/' . $message['member']['options']['facebook'] . '" target="_blank" title="'.$txt['smi_facebook_title'].'"><img border="0" src="' . $settings['images_url'] . '/smifacebook.png" alt="' . $message['member']['options']['facebook'] . '"></a> ' : '',
!empty($message['member']['options']['myspace']) ? '<a href="http://www.myspace.com/' . $message['member']['options']['myspace'] . '" target="_blank" title="'.$txt['smi_myspace_title'].'"><img border="0" src="' . $settings['images_url'] . '/smimyspace.png" alt="' . $message['member']['options']['myspace'] . '"></a> ' : '',
!empty($message['member']['options']['twitter']) ? '<a href="http://www.twitter.com/' . $message['member']['options']['twitter'] . '" target="_blank" title="'.$txt['smi_twitter_title'].'"><img border="0" src="' . $settings['images_url'] . '/smitwitter.png" alt="' . $message['member']['options']['twitter'] . '"></a> ' : '',
!empty($message['member']['options']['googleplus']) ? '<a href="https://plus.google.com/' . $message['member']['options']['googleplus'] . '" target="_blank" title="'.$txt['smi_googleplus_title'].'"><img border="0" src="' . $settings['images_url'] . '/smigoogleplus.png" alt="' . $message['member']['options']['googleplus'] . '"></a> ' : '',
!empty($message['member']['options']['linkedin']) ? '<a href="' . $message['member']['options']['linkedin'] . '" target="_blank" title="'.$txt['smi_linkedin_title'].'"><img border="0" src="' . $settings['images_url'] . '/smilinkedin.png" alt="' . $message['member']['options']['linkedin'] . '"></a> ' : '',
!empty($message['member']['options']['youtube']) ? '<a href="http://www.youtube.com/' . $message['member']['options']['youtube'] . '" target="_blank" title="'.$txt['smi_youtube_title'].'"><img border="0" src="' . $settings['images_url'] . '/smiyoutube.png" alt="' . $message['member']['options']['youtube'] . '"></a> ' : '',
!empty($message['member']['options']['deviantart']) ? '<a href="http://' . $message['member']['options']['deviantart'] . '.deviantart.com/" target="_blank" title="'.$txt['smi_deviantart_title'].'"><img border="0" src="' . $settings['images_url'] . '/smideviantart.png" alt="' . $message['member']['options']['deviantart'] . '"></a> ' : '',
!empty($message['member']['options']['myspace']) || !empty($message['member']['options']['facebook']) || !empty($message['member']['options']['twitter']) ||  !empty($message['member']['options']['googleplus']) || !empty($message['member']['options']['youtube']) || !empty($message['member']['options']['deviantart']) || !empty($message['member']['options']['linkedin']) ? '<br />' : '';
      // <-- Social Media Icons


Try and see if that works.  when I get spare time I'll try and add more options for SMF1


Andrew Evenstar

I believe it worked, wow you are awesome and so is this mod!

I have the Social Media icons on posts, inbox messages and site profiles (using the ultimate profile)!

hcfwesker

Thank you.  like I said I'll try and make SMF1 more indepth, like SMF2 version, its just my time is so limited, atm, but I'll have an update for it hopefully soon.

hcfwesker

Quote from: Andrew Evenstar on September 04, 2012, 05:42:40 PMI have the Social Media icons on posts, inbox messages and site profiles (using the ultimate profile)!

Found the fix for Ultimate profiles, so if a member hasnt filled out the fields, they won't show on their profile page.

Just replace the other code I showed you, with this.

echo '
<td>', !empty($context['member']['options']['facebook']) ? '<img src="' . $settings['images_url'] . '/smifacebook.png" alt="Facebook" border="0" /></a></td>
<td><a href="http://www.facebook.com/' . $context['member']['options']['facebook'] . '" target="_blank">' . $context['member']['options']['facebook'] . '</a>'  : '', '</td>
</tr><tr>
<td>', !empty($context['member']['options']['myspace']) ? '<img src="' . $settings['images_url'] . '/smimyspace.png" alt="MySpace" border="0" /></a></td>
<td><a href="http://www.myspace.com/' . $context['member']['options']['myspace'] . '" target="_blank">' . $context['member']['options']['myspace'] . '</a>'  : '', '</td>
</tr><tr>
<td>', !empty($context['member']['options']['twitter']) ? '<img src="' . $settings['images_url'] . '/smitwitter.png" alt="Twitter" border="0" /></a></td>
<td><a href="http://www.twitter.com/' . $context['member']['options']['twitter'] . '" target="_blank">' . $context['member']['options']['twitter'] . '</a>'  : '', '</td>
</tr><tr>
<td>', !empty($context['member']['options']['googleplus']) ? '<img src="' . $settings['images_url'] . '/smigoogleplus.png" alt="GooglePlus" border="0" /></a></td>
<td><a href="https://plus.google.com/' . $context['member']['options']['googleplus'] . '" target="_blank">' . $context['member']['options']['googleplus'] . '</a>'  : '', '</td>
</tr><tr>
<td>', !empty($context['member']['options']['linkedin']) ? '<img src="' . $settings['images_url'] . '/smilinkedin.png" alt="LinkedIn" border="0" /></a></td>
<td><a href="' . $context['member']['options']['linkedin'] . '" target="_blank">' . $context['member']['options']['linkedin'] . '</a>'  : '', '</td>
</tr><tr>
<td>', !empty($context['member']['options']['youtube']) ? '<img src="' . $settings['images_url'] . '/smiyoutube.png" alt="Youtube" border="0" /></a></td>
<td><a href="http://www.youtube.com/' . $context['member']['options']['youtube'] . '" target="_blank">' . $context['member']['options']['youtube'] . '</a>'  : '', '</td>
</tr><tr>
<td>', !empty($context['member']['options']['deviantart']) ? '<img src="' . $settings['images_url'] . '/smideviantart.png" alt="Deviantart" border="0" /></a></td>
<td><a href="http://' . $context['member']['options']['deviantart'] . '.deviantart.com/" target="_blank">' . $context['member']['options']['deviantart'] . '</a>'  : '', '</td>';


I had the ', !empty($context['member']['options']['socialmediablablah']) ? '  coming after theimage, which is why the image would show whether they had one or not.

Now that it's working like it should, I can scratch that off my update to do list and get progress done a little quicker.




Andrew Evenstar

Awesome stuff, tried it and it worked!

I think I'm going to change the myspace field to Last.fm or just program it in separately.
I already changed Linked to be Livestream instead too.

hcfwesker


DR1665

Quote from: hcfwesker on February 26, 2012, 01:44:33 PM
You also need to copy the image, or upload them, to your custom themes images folder.
Hi there! Just installed this one, current version, and everything worked like a charm. Except I've got broken images for the icons.

Just want to make sure (as I'm fresh off a phpBB conversion and back into SMF after many years away) I don't botch this install. My community members have already been through a LOT. Trying to minimize shock.

Thanks.

EDIT: image attached.

hcfwesker

Did you click on all other themes when installing the MOD.  Have you checked the SMF Default Curve theme to see if the icons show?

DR1665

Quote from: hcfwesker on September 12, 2012, 06:54:43 PM
Did you click on all other themes when installing the MOD.  Have you checked the SMF Default Curve theme to see if the icons show?
"Whenever there is any doubt, there is no doubt. That's the first thing they teach you." Clicking on "all other themes" does not sound like something I did. I recall seeing a list of zip files in a box toward the top right of the page, downloading the one with the latest version, and uploading that.

Icons work in Curve. I'm running BloQcs, though. I'll go back to package manager, remove the mod (I hope that works, SMF has come a long way since last time I used it regularly), and try being more careful about which package I select to download/install.

Thank you.

hcfwesker

You can just simply do this.  Goto your default themes Images folder, and just copy all images that start with "smi" ... 

smifacebook.png
smimyspace.png
smitwitter.png
smiyoutube.png
smideviantart.png
smigoogleplus.png
smilinkedin.png


Just copy those over to your other Images folder in other themes ;)

Quote from: DR1665 on September 13, 2012, 01:24:26 PMI recall seeing a list of zip files in a box toward the top right of the page, downloading the one with the latest version, and uploading that.

No, the option for other themes are listed Directly below the list of files on the Install page.  Where you'll see a list of php files being modified.  then just below you'll see options to check for each other theme, which would just have the image files listed on these.  You have to check the box next to each theme name that you want it installed on.

However, if you have a theme set to be hidden from public view, then that theme won't appear as an option.


Advertisement: