Topic: Additional social links to site information

Hello

I was thinking about all the social communities I am involved in, or trying to be, and thought it would be great to be able to add customized links and icons in the site information options for social links.

For example, there is facebook, twitter and an RSS feed right now. I would like to add several new ones like youtube, flickr, tumblr, etc.

So I can create a new entry, name it, provide a link, and upload a icon. Formating would just be handled by CSS.

Considering the amount of different networks out there, I thought others might enjoy this idea.

It would also be handy if these links opened in a new window.

Cheers

Thumbs up

Re: Additional social links to site information

bumping because this is relevant to my interests.

Thumbs up

Re: Additional social links to site information

Also bumping.  Also relevant to my interests.

Thumbs up

Re: Additional social links to site information

So hello guys, let´s do it!

I´ve an other domain to do my tests, and I´ll show how to do in the hard way ok?
I´ve tested and it work so fine, but you will need to make the images for the social media you want ok?

First see that experience is under the:

Wordpress version 3.2
Arras theme Version 1.5.1

Let´s work with 4 files:


default.css             located in ./css/styles/default.css
options.php           located in ./admin/options.php
template.php         located in ./library/template.php
arras-general.php located in ./admin/templates/arras-general.php

First in the default.css locate the line:

.quick-nav #facebook

and add after

.quick-nav #youtube    { background: url(../../images/youtube.png) no-repeat; }
.quick-nav #linkedin    { background: url(../../images/linkedin.png) no-repeat; }
.quick-nav #gplus    { background: url(../../images/googleplus.png) no-repeat; }

So now you have the CSS style !

Then go to options.php           located in ./admin/options.php find the line:

function save_options

add after $this->facebook_profile = (string)$_POST['arras-facebook']; the lines:

        $this->youtube_profile  = (string)$_POST['arras-youtube'];
        $this->linkedin_profile = (string)$_POST['arras-linkedin'];
        $this->gplus_profile    = (string)$_POST['arras-gplus'];

Well, now you have the necessary calls to be saved in the file! But how I put the links? Easy, save the options.php and run away to template.php         located in ./library/template.php and locate the

function arras_social_nav()

After the

        <?php $facebook_profile = arras_get_option('facebook_profile'); ?>
        <?php if ($facebook_profile != '') : ?>
            <li><a id="facebook" title="<?php printf( __( '%s Facebook', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $facebook_profile ?>" target="_blank"><?php _e('Facebook', 'arras') ?></a></li>
        <?php endif ?>

Insert the code

        <?php $youtube_profile = arras_get_option('youtube_profile'); ?>
        <?php if ($youtube_profile != '') : ?>
            <li><a id="youtube" title="<?php printf( __( '%s Youtube', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $youtube_profile ?>" target="_blank"><?php _e('Youtube', 'arras') ?></a></li>
        <?php endif ?>        

        <?php $linkedin_profile = arras_get_option('linkedin_profile'); ?>
        <?php if ($linkedin_profile != '') : ?>
            <li><a id="linkedin" title="<?php printf( __( '%s LinkedIn', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $linkedin_profile ?>" target="_blank"><?php _e('LinkedIn', 'arras') ?></a></li>
        <?php endif ?>        

        <?php $gplus_profile = arras_get_option('gplus_profile'); ?>
        <?php if ($gplus_profile != '') : ?>
            <li><a id="gplus" title="<?php printf( __( '%s Google+', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $gplus_profile ?>" target="_blank"><?php _e('Google+', 'arras') ?></a></li>
        <?php endif ?>        
        

Well, well, well! if you get here is easy to finish what we started, open the last file arras-general.php located in ./admin/templates/arras-general.php because, it will be lovely to show the questions in the options page right?

locate the code:

<tr valign="top">
<th scope="row"><label for="arras-facebook"><?php _e('Facebook Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-facebook', 'id' => 'arras-facebook', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('facebook_profile') )) ?><br />
<?php _e('Link to your Facebook profile.', 'arras') ?>
</td>
</tr>

After you simply add this lines:

<tr valign="top">
<th scope="row"><label for="arras-youtube"><?php _e('YouTube Channel (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-youtube', 'id' => 'arras-youtube', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('youtube_profile') )) ?><br />
<?php _e('Link to your Youtube profile.', 'arras') ?>
</td>
</tr>

<tr valign="top">
<th scope="row"><label for="arras-linkedin"><?php _e('Linkedin Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-linkedin', 'id' => 'arras-linkedin', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('linkedin_profile') )) ?><br />
<?php _e('Link to your Linkedin profile.', 'arras') ?>
</td>
</tr>

<tr valign="top">
<th scope="row"><label for="arras-gplus"><?php _e('Google+ Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-gplus', 'id' => 'arras-gplus', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('gplus_profile') )) ?><br />
<?php _e('Link to your Google+ profile.', 'arras') ?>
</td>
</tr>

Well done! see the results here!

Wordpress version 3.2
Arras theme Version 1.5.1

Post's attachments

profiles.PNG 27.1 kb, 5 downloads since 2011-07-07 

You don't have the permssions to download the attachments of this post.
Ваша программа сосет - Whiplash

Re: Additional social links to site information

Hello it is my first reply on this website and firstly I would like to thank for the great quality information, which I found in this and all previous topics , it really helped me very much. I will definitely put this website on my rss reader  Also, I would like to ask - don't you mind if I will quite some information from your website since I am writing articles for the Bukisa, Ezine and other articles directories (this is my part time job)? It would really help me with some of mine articles. Of course, I will mention your website title or URL (not all articles directories allow URL’s, so I can't 100% promises that you will get a direct back link to your website).

Thanks..........

Thumbs up

Re: Additional social links to site information

hi,
i did it just as you wrote, and went over and over it, but the buttons do not show up on the site...
Can you help?

www.wordpress.studioplot.nl

Thumbs up

Re: Additional social links to site information

sinette wrote:

hi,
i did it just as you wrote, and went over and over it, but the buttons do not show up on the site...
Can you help?

www.wordpress.studioplot.nl

sinette, good morning!

In order to work you have to create the 16x16px images ( youtube.png, linkedin.png, and googleplus.png ) and put them in the images folder in your ftp.

did you made them?

Ваша программа сосет - Whiplash

Re: Additional social links to site information

coimbra wrote:
sinette wrote:

hi,
i did it just as you wrote, and went over and over it, but the buttons do not show up on the site...
Can you help?

www.wordpress.studioplot.nl

sinette, good morning!

In order to work you have to create the 16x16px images ( youtube.png, linkedin.png, and googleplus.png ) and put them in the images folder in your ftp.

did you made them?

sinette, good morning again!

See how the icons work in my site http://projetoseti.com.br

Ваша программа сосет - Whiplash

Re: Additional social links to site information

coimbra wrote:

So hello guys, let´s do it!

I´ve an other domain to do my tests, and I´ll show how to do in the hard way ok?
I´ve tested and it work so fine, but you will need to make the images for the social media you want ok?

First see that experience is under the:

Wordpress version 3.2
Arras theme Version 1.5.1

Let´s work with 4 files:


default.css             located in ./css/styles/default.css
options.php           located in ./admin/options.php
template.php         located in ./library/template.php
arras-general.php located in ./admin/templates/arras-general.php

First in the default.css locate the line:

.quick-nav #facebook

and add after

.quick-nav #youtube    { background: url(../../images/youtube.png) no-repeat; }
.quick-nav #linkedin    { background: url(../../images/linkedin.png) no-repeat; }
.quick-nav #gplus    { background: url(../../images/googleplus.png) no-repeat; }

So now you have the CSS style !

Then go to options.php           located in ./admin/options.php find the line:

function save_options

add after $this->facebook_profile = (string)$_POST['arras-facebook']; the lines:

        $this->youtube_profile  = (string)$_POST['arras-youtube'];
        $this->linkedin_profile = (string)$_POST['arras-linkedin'];
        $this->gplus_profile    = (string)$_POST['arras-gplus'];

Well, now you have the necessary calls to be saved in the file! But how I put the links? Easy, save the options.php and run away to template.php         located in ./library/template.php and locate the

function arras_social_nav()

After the

        <?php $facebook_profile = arras_get_option('facebook_profile'); ?>
        <?php if ($facebook_profile != '') : ?>
            <li><a id="facebook" title="<?php printf( __( '%s Facebook', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $facebook_profile ?>" target="_blank"><?php _e('Facebook', 'arras') ?></a></li>
        <?php endif ?>

Insert the code

        <?php $youtube_profile = arras_get_option('youtube_profile'); ?>
        <?php if ($youtube_profile != '') : ?>
            <li><a id="youtube" title="<?php printf( __( '%s Youtube', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $youtube_profile ?>" target="_blank"><?php _e('Youtube', 'arras') ?></a></li>
        <?php endif ?>        

        <?php $linkedin_profile = arras_get_option('linkedin_profile'); ?>
        <?php if ($linkedin_profile != '') : ?>
            <li><a id="linkedin" title="<?php printf( __( '%s LinkedIn', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $linkedin_profile ?>" target="_blank"><?php _e('LinkedIn', 'arras') ?></a></li>
        <?php endif ?>        

        <?php $gplus_profile = arras_get_option('gplus_profile'); ?>
        <?php if ($gplus_profile != '') : ?>
            <li><a id="gplus" title="<?php printf( __( '%s Google+', 'arras' ), esc_html( get_bloginfo('name'), 1 ) ) ?>" href="<?php echo $gplus_profile ?>" target="_blank"><?php _e('Google+', 'arras') ?></a></li>
        <?php endif ?>        
        

Well, well, well! if you get here is easy to finish what we started, open the last file arras-general.php located in ./admin/templates/arras-general.php because, it will be lovely to show the questions in the options page right?

locate the code:

<tr valign="top">
<th scope="row"><label for="arras-facebook"><?php _e('Facebook Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-facebook', 'id' => 'arras-facebook', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('facebook_profile') )) ?><br />
<?php _e('Link to your Facebook profile.', 'arras') ?>
</td>
</tr>

After you simply add this lines:

<tr valign="top">
<th scope="row"><label for="arras-youtube"><?php _e('YouTube Channel (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-youtube', 'id' => 'arras-youtube', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('youtube_profile') )) ?><br />
<?php _e('Link to your Youtube profile.', 'arras') ?>
</td>
</tr>

<tr valign="top">
<th scope="row"><label for="arras-linkedin"><?php _e('Linkedin Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-linkedin', 'id' => 'arras-linkedin', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('linkedin_profile') )) ?><br />
<?php _e('Link to your Linkedin profile.', 'arras') ?>
</td>
</tr>

<tr valign="top">
<th scope="row"><label for="arras-gplus"><?php _e('Google+ Profile (URL)', 'arras') ?></label></th>
<td>
<?php echo arras_form_input(array('name' => 'arras-gplus', 'id' => 'arras-gplus', 'class' => 'code', 'size' => '65', 'value' => arras_get_option('gplus_profile') )) ?><br />
<?php _e('Link to your Google+ profile.', 'arras') ?>
</td>
</tr>

Well done! see the results here!

Wordpress version 3.2
Arras theme Version 1.5.1


very cool, worked perfectly!   THANKS coimbra!!!

Thumbs up

Re: Additional social links to site information

I couldn't get this to work.  If someone could take a look at my site and tell me what I did wrong I would really appreciate it.  I can't figure it out for the life of me.

I tried to delete the facebook link and insert the gplus one.

techhype.net

Thanks!!!

Thumbs up

Re: Additional social links to site information

brettbazaar wrote:

I couldn't get this to work.  If someone could take a look at my site and tell me what I did wrong I would really appreciate it.  I can't figure it out for the life of me.

I tried to delete the facebook link and insert the gplus one.

techhype.net

Thanks!!!

brettbazaar, good morning!!

It´s not just change the image, you have to change the files that I change
default.css           
options.php         
template.php       
arras-general.php

You made it?

Ваша программа сосет - Whiplash

Re: Additional social links to site information

Yes I changed all of the files, I deleted the facebook code and added gplus, but its not showing up.  The RSS and Twityter moved to the left to make room for the gplus but it is not acctually there on my site. I uploaded a pic as well.

http://techhype.net

Thumbs up

Re: Additional social links to site information

brettbazaar wrote:

Yes I changed all of the files, I deleted the facebook code and added gplus, but its not showing up.  The RSS and Twityter moved to the left to make room for the gplus but it is not acctually there on my site. I uploaded a pic as well.

http://techhype.net

brettbazaar, good morning!

It´s not just delete the facebook code, get these files and upload to the respective folders and look again ok?

Remember, make the correct changes in the Default.css

Post's attachments

SocialIcons.rar 7.51 kb, 2 downloads since 2011-10-13 

You don't have the permssions to download the attachments of this post.
Ваша программа сосет - Whiplash

Re: Additional social links to site information

For those of you that can't get the icons to work, are you using the Classical Gamer theme?  If so, that's your problem.  The css for Gamer calls on the quick nav icons differently.  Below is the black.css file.

.quick-nav a:link, .quick-nav a:visited    { background: url(../images/icon_bits.gif) no-repeat; }

The regular Arras theme has all of this listed in the default.css.

#nav .quick-nav li  { padding-top: 8px; }

.quick-nav li            { padding: 5px 0 0 8px; }
.quick-nav a:link, .quick-nav a:visited    { display: block; text-indent: -9000px; width: 16px; height: 16px; float: left; clear: left; opacity: 0.6; }
.quick-nav a:hover  { opacity: 1; }

.quick-nav #rss            { background: url(../../images/rss.png) no-repeat; }
.quick-nav #twitter        { background: url(../../images/twitter.png) no-repeat; }
.quick-nav #facebook    { background: url(../../images/facebook.png) no-repeat; }
.quick-nav #youtube    { background: url(../../images/youtube.png) no-repeat; }
.quick-nav #linkedin    { background: url(../../images/linkedin.png) no-repeat; }
.quick-nav #gplus    { background: url(../../images/googleplus.png) no-repeat; }

Obviously it's different, and I don't know how to code around it.  A simply code swap from one css to the other doesn't work, and coding isn't my strong suit.  The icons for Gamer are in the icons_bits.gif file, and that's no good for customization.  Anyone have a solution?

Thumbs up