• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Social buttons in navbar

lms

Well-known member
#1
FaceBook, Twitter, MySpace, StumbleUpon, reddit, delicious and Addthis connect. The more interesting of all is Addthis now that allows you to send 416 sites, including the previous.

The code is the next:
Code:
<li class="navTab PopupClosed facebooktab"><a class="navLink" target="_blank" href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN"><img src="@imagePath/xenforo/social/facebook.png" width="16" height="16" alt="Compartir a Facebook" /></a><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN&amp;v=wall" layout="button_count"></fb:like></li>
<li class="navTab PopupClosed twitterktab"><a class="navLink" target="_blank" href="http://twitter.com/#!/soylms/xenfacil"><img src="@imagePath/xenforo/social/twitter.png" width="16" height="16" alt="Compartir a Twitter" /></a></li>
<li class="navTab PopupClosed myspacektab"><a class="navLink" target="_blank" href="http://www.myspace.com/TU_ID_DE_USUARIO"><img src="@imagePath/xenforo/social/myspace.png" width="16" height="16" alt="Compartir a MySpace" /></a></li>
<li class="navTab PopupClosed stumbleuponktab"><a class="navLink" target="_blank" href="http://www.stumbleupon.com/"><img src="@imagePath/xenforo/social/stumbleupon.png" width="16" height="16" alt="Compartir a Stumble It" /></a></li>
<li class="navTab PopupClosed redditktab"><a class="navLink" target="_blank" href="http://reddit.com/submit" onclick="window.location = 'http://reddit.com/submit?url=' + encodeURIComponent(window.location); return false"><img src="@imagePath/xenforo/social/reddit.png" width="16" height="16" alt="Compartir a Reddit" border="0" /></a></li>
<li class="navTab PopupClosed deliciousktab"><a class="navLink" target="_blank" href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="@imagePath/xenforo/social/delicious.png" width="16" height="16" alt="Compartir en Delicious" /></a></li>
<!-- AddThis Button BEGIN -->
<li class="navTab PopupClosed morektab"><a class="navLink" target="_blank" href="http://www.addthis.com/bookmark.php?v=250&amp;username=TU_USERNAME"><img src="@imagePath/xenforo/social/addthis_64.png" width="16" height="16" alt="Más..." /></a></li>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=TU_USERNAME"></script>
<!-- AddThis Button END -->

        <!-- no selection -->
In the navigation template, just above
Code:
        <!-- no selection -->
And the navigation.css Template, at the end of the whole, add:
Code:
.facebooktab a {
    background: transparent url(@imagePath/xenforo/social/facebook_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.twitterktab a {
     background: transparent url(@imagePath/xenforo/social/twitter_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.myspacektab a {
    background: transparent url(@imagePath/xenforo/social/myspace_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.stumbleuponktab a {
     background: transparent url(@imagePath/xenforo/social/stumbleupon_icon.png) center center no-repeat;
     text-indent: -9999px;
}
.redditktab a {
    background: transparent url(@imagePath/xenforo/social/reddit_icon.png) center center no-repeat;
     text-indent: -9999px;
}

.deliciousktab a {
     background: transparent url(@imagePath/xenforo/social/delicious_icon.png) center center no-repeat;
     text-indent: -9999px;
}
.morektab a {
     background: transparent url(@imagePath/xenforo/social/addthis_64_icon.png) center center no-repeat;
     text-indent: -9999px;
}
I create a directory in path root/styles/default/xenforo that name social (path sería root/styles/default/xenforo/social). upload attatches zip images to this directory.

Salud2
 

Attachments

Russ

Well-known member
#2
Looks good other than the facebook likes :) the spacing is a little out of place but overall great template modification :)
 

lms

Well-known member
#4
Yeah I don't like the FB likes either, but the rest looks great.
Delete this in first line:
Code:
<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/apps/application.php?id=TU_ID_DE_APLICACIÓN&amp;v=wall" layout="button_count"></fb:like>
Salud2
 

Ryan Kent

Well-known member
#11
Is anyone using this code? It isn't working for me. I'm wondering if the issue is the last update seemed to be around Beta 4, or perhaps because the coding is in spanish.

disregard, the pathing to the icons was using the @imagePath variable, and I have Flexile template so the path wasn't correct. Fixed and all is well.