[GUIDE] Social Buttons in Footer 3.9.1

tomsit · Jun 5, 2017

It's been requested that I put up an tutorial on how to get social buttons in the footer (buttom of the page)

Well, it's very easy and you are done within a few steps. However, I recommend using this with the split front-page. It will look more natural.

Let's begin

- Locate the folder custom_hooks (normal path for this is "/app/themes/Peafowl/custom_hooks/"
- Open the file "footer.sample.php" with notepad++

Now in this file this is where the action happens. We need to insert some code here for it to work as we want. If you delete all the content in this file and replace it with this code:

Code:

<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<?php /* Add your custom PHP/HTML code in this file */ ?>

    <ul class="mendi-social-networks">
        <li class="facebook">
            <a href="https://www.facebook.com/photolandio/" title="Photoland on Facebook">
                <i class="fa fa-facebook"> </i>
                <p>JOIN US ON FACEBOOK</p>
                <span class="followers">and share your photos</span>
            </a>
        </li>
        <li class="twitter">
            <a href="https://twitter.com/photolandio" title="Photoland on Twitter">
                <i class="fa fa-twitter"> </i>
                <p>FOLLOW US ON TWITTER</p>
                <span class="followers">Monthly photo award</span>
            </a>
        </li>
    </ul>
<div id="powered-by" class="footer">Social Buttons by <a href="https://photoland.io" rel="generator">Photoland</a> image hosting</div>


<script src="https://use.fontawesome.com/5a9643cca3.js"></script>

</body>
</html>

Now you save this file as "footer.php" in your "custom_hooks" folder. The system will now call this file next time you hit refresh.

- Next step is to insert some custom CSS. This can be done from your adminpanel.
- Go to "settings" tab and "theme"
- Scroll down to where you can add custom CSS and add this code:

Code:

.mendi-social-networks {
    width: 100%;
    margin: 0;
}
.mendi-social-networks li {
    float: left;
    display: inline;
    width: 50%;
    color: #ffffff;
    position: relative;
}
.mendi-social-networks li i {
    font-size: 50px;
    float: left;
    width: 60px;
}
.mendi-social-networks li a {
    color: #ffffff;
    padding: 25px 65px 25px 40px;
    float: left;
    width: 100%;
    box-sizing: border-box;

}
.mendi-social-networks li a:hover {
     text-decoration:none;
}
.mendi-social-networks li p {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 2px 0 0px;
}
.mendi-social-networks li .followers {
    text-transform: uppercase;
}
.mendi-social-networks li:before {
    position: absolute;
    content: "\f105";
    right: 30px;
    top: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    border: 1px solid #ffffff;
    border-radius: 30px;
    margin: auto;
    font-size: 18px;
    font-family: FontAwesome;
    color: #ffffff;
    text-align: center;
    line-height: 26px;
}
.mendi-social-networks li:hover:before {
    background-color: #ffffff;
    color: #999999;
}
.mendi-social-networks li.facebook {
    background-color: #4d6bab;
}
.mendi-social-networks li.twitter {
    background-color: #4ec6f8;
}
.mendi-social-networks li.googleplus {
    background-color: #d34836;
}
.mendi-social-networks li.linkedin {
    background-color: #248cc9;
}

- If you want to add Google+ and Linkedin add this code instead of the first one in "footer.php"

Code:

<?php if(!defined('access') or !access) die('This file cannot be directly accessed.'); ?>
<?php /* Add your custom PHP/HTML code in this file */ ?>

    <ul class="mendi-social-networks">
        <li class="facebook">
            <a href="https://www.facebook.com/photolandio/" title="Photoland on Facebook">
                <i class="fa fa-facebook"> </i>
                <p>JOIN US ON FACEBOOK</p>
                <span class="followers">and share your photos</span>
            </a>
        </li>
        <li class="twitter">
            <a href="https://twitter.com/photolandio" title="Photoland on Twitter">
                <i class="fa fa-twitter"> </i>
                <p>FOLLOW US ON TWITTER</p>
                <span class="followers">Monthly best photo award</span>
            </a>
        </li>
    </ul>
    <li class="googleplus">
            <a href="" title="">
                <i class="fa fa-google-plus"> </i>
                <p>ADD TO OUR CIRCLE</p>
                <span class="followers">268K Followers</span>
            </a>
        </li>
        <li class="linkedin">
            <a href="" title="">
                <i class="fa fa-linkedin"> </i>
                <p>CONNECT TO OUR NETWORK</p>
                <span class="followers">268K Followers</span>
            </a>
        </li>
<div id="powered-by" class="footer">Social Buttons by <a href="https://myimg.io" rel="generator">MYIMG</a> image hosting</div>


<script src="https://use.fontawesome.com/5a9643cca3.js"></script>

</body>
</html>

- If you want 4 buttons in there you need to adjust the CSS.
- With 4 buttons change the width to 25% instead of 50%

Example:

Code:

.mendi-social-networks li {
    float: left;
    display: inline;
    width: 25%;   <--*! change to 50% for 2 buttons !--->
    color: #ffffff;
    position: relative;
}

If you have any questions, feel free to ask.

adam000 · Jun 7, 2017

on smaller devices one of the button's clicking area is a little bit cut off on the bottom, how we can fix that?

Rodolfo · Jun 7, 2017

adam000 said:
on smaller devices one of the button's clicking area is a little bit cut off on the bottom, how we can fix that?

Show it, I think that is easier if you show it rather than tell about it.

adam000 · Jun 7, 2017

At the bottom of the website https://photoland.io/
But only on smartphone

tomsit · Jun 7, 2017

adam000 said:
At the bottom of the website https://photoland.io/
But only on smartphone

It works fine on my phone. Can you take a screenshot and post it please?

adam000 · Jun 7, 2017

Left Facebook "box", I have got iphone 6

tomsit · Jun 7, 2017

Thanks, it seems to be an safari issue. I get the samme when I try it on a ipad mini, but on all other devices it's perfect. I don't know how to fix this now, must do some research, if not @Rodolfo got some magical eyes.

adam000 · Jun 7, 2017

anyway, thanks for showing interest

Rodolfo · Jun 7, 2017

tomsit said:
Thanks, it seems to be an safari issue. I get the samme when I try it on a ipad mini, but on all other devices it's perfect. I don't know how to fix this now, must do some research, if not @Rodolfo got some magical eyes.

No, it is not a Safari issue. Problem here is your CSS because you are using auto heights based on text length and when you do that you will always get issues like these. You need to fix heights or use a table display (so everything grows equally) or use flex.

tomsit · Jun 7, 2017

Rodolfo said:
No, it is not a Safari issue. Problem here is your CSS because you are using auto heights based on text length and when you do that you will always get issues like these. You need to fix heights or use a table display (so everything grows equally) or use flex.

I should have called that. Thanks for your reply, the idea here is not to have too long text in the buttons. With short worded text eg; "241 likes" or "241 followers" you should not get any issues. I changed my example text to "monthly photo awards" from "monthly best photo awards" Keeping the CSS as is.

mkerala · Jul 30, 2017

Thanks for this. Have been looking to get social links on the site for long time.

I removed share message and reduced font-size: 20px. It is now much smaller and more blend in on both desktop and mobile.

Code:

.mendi-social-networks li i {
    font-size: 20px;
    float: left;
    width: 60px;
}

mkerala · Jul 30, 2017

One thing I noticed is it is not staying at bottom in listing pages.

Eg: https://photoland.io/album/MOnn

tobi116 · Jan 29, 2018

Removed Both messeges -
<span class="followers">and share your photos</span>

<span class="followers">Monthly best photo award</span>

tobi116 · Jan 29, 2018

Arrow mark is not visible

tomsit · Jan 30, 2018

Looks like you are missing the fontawesome script.

Code:

<script src="https://use.fontawesome.com/5a9643cca3.js"></script>

Anyways, this guide is old. You could just use the iconmoon icons, this way you don't need to load an extra .js file

[GUIDE] Social Buttons in Footer 3.9.1

tomsit

Cheese

adam000

Chevereto Member

Rodolfo

⭐ Chevereto Godlike

adam000

Chevereto Member

tomsit

Cheese

adam000

Chevereto Member

Attachments

tomsit

Cheese

adam000

Chevereto Member

Rodolfo

⭐ Chevereto Godlike

tomsit

Cheese

mkerala

👽 Chevereto Freak

mkerala

👽 Chevereto Freak

tobi116

Chevereto Member

tobi116

Chevereto Member

tomsit

Cheese