Add Pinterest, Instagram To Block Social Module

[GoGoMo]

Hi! How do I modify the Block Social module to add Pinterest, Instagram or any other social media url link? So I can show other prospective social media icons in the unordered list shown in the footer. The Block Social module in the back office doesn't have any additional boxes or fields to add the additional social media links I want to show in footer of the default theme. I have Prestashop v1.5.3.1 installed on Xampp v1.8.1 localhost Windows 7 Professional 32-bit. Thanks greatly appreciate some guidance.

[hassantariq]

any reply yet ?

i also want to have a block showing images from instagram on the footer.

[vekia]

you need to modify template file of this module located in modules / blocksocial / blocksocial.tpl.

remember that in some cases this file is also available in your theme folder themes/yourtheme/modules/blocksocial/blocksocial.tpl. If so - you have to apply changes there.

 

what to do? Just open the file and you've got there:

<ul>
 {if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
 {if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
 {if $rss_url != ''}<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}
</ul>

 

add new <li> with your social media link:

 

<ul>
 {if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
 {if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
 {if $rss_url != ''}<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}
<li><a href="URL TO PINTEREST">PINTEREST</a></li>
<li><a href="URL TO INSTAGRAM">INSTAGRAM</a></li>
</ul>

 

sometimes after changes in tpl files - you may need to turn force compilation on

[Loguste]

Merci de France l'ami

 

Thank you friend of France

 

loguste

[agplacid]

you need to modify template file of this module located in modules / blocksocial / blocksocial.tpl.

remember that in some cases this file is also available in your theme folder themes/yourtheme/modules/blocksocial/blocksocial.tpl. If so - you have to apply changes there.

 

what to do? Just open the file and you've got there:

<ul>
  {if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
  {if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
  {if $rss_url != ''}<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}
</ul>

add new <li> with your social media link:

 

<ul>
  {if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
  {if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
  {if $rss_url != ''}<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}
<li><a href="URL TO PINTEREST">PINTEREST</a></li>
<li><a href="URL TO INSTAGRAM">INSTAGRAM</a></li>
</ul>

sometimes after changes in tpl files - you may need to turn force compilation on

 

 

I am trying to add instagram to the blocksocial module; I followed the steps you described above and added this line to the blocksocial.tpl 

{if $instagram_url !=''}<li class="instagram"><a href="{$instagram_url|escape:html:'UTF-8'}">{l s='instagram' mod='blocksocial'}</a></li>{/if} 

But its not showing up on the blocksocial module. What else do I need to do?

[vekia]

hello

 

i've got questions:

 

1) you use default theme?

2) if not, are you sure that your theme uses default blocksocial module?

3) sometimes module files are stored also in /theme/YOUR_THEME/modules/ directory, if blocksocial module exists there - you have to edit this file (not original module file) - please verify it

[agplacid]

hello

 

i've got questions:

 

1) you use default theme?

2) if not, are you sure that your theme uses default blocksocial module?

3) sometimes module files are stored also in /theme/YOUR_THEME/modules/ directory, if blocksocial module exists there - you have to edit this file (not original module file) - please verify it

 

Thanks for your quick response. The theme I'm using is not the default and I can't find any module on the theme. I guess that compounds my problem but I have updated all the blocksocial.tpl I could find with the code; still no change.

[vekia]

okay

so if you're convinced that you changed correct file: try to clear shop cache and recompile theme.

opem adv. paramters > performance tab in your back office, turn of force compile option temporarily, then try to refresh your front office

[agplacid]

okay

so if you're convinced that you changed correct file: try to clear shop cache and recompile theme.

opem adv. paramters > performance tab in your back office, turn of force compile option temporarily, then try to refresh your front office

Still no success this is the site www.mariesmartfashin.co.uk

[vekia]

are you sure that url is correct? it doesn't work for me

[agplacid]

are you sure that url is correct? it doesn't work for me

sorry my mistake www.mariesmartfashion.co.uk

[vekia]

it's default blocksocial module.

so, if file blocksocial.tpl doesn't exist in /themes/YOUR_THEME/modules/blocksocial/blocksocial.tpl doesn't exist you have to edit /modules/blocksocial/blocksocial.tpl file

 

can you show contents of this file?

[agplacid]

it's default blocksocial module.

so, if file blocksocial.tpl doesn't exist in /themes/YOUR_THEME/modules/blocksocial/blocksocial.tpl doesn't exist you have to edit /modules/blocksocial/blocksocial.tpl file

 

can you show contents of this file?

<div id="social_block">

<h4 class="title_block">{l s='Follow us' mod='blocksocial'}</h4>

<ul>

{if $facebook_url != ''}<li class="facebook"><a href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}

{if $twitter_url != ''}<li class="twitter"><a href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}

{if $rss_url != ''}<li class="rss"><a href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}

{if $instagram_url !=''}<li class="instagram"><a href="{$instagram_url|escape:html:'UTF-8'}">{l s='instagram' mod='blocksocial'}</a></li>{/if}

</ul>

</div>

[vekia]

where you've got definition of $instagram_url variable?

[agplacid]

where you've got definition of $instagram_url variable?

I didn't define it anywhere, do I have to define some where else?

[PascalVG]

Try this step for step tutorial:

http://www.prestashop.com/forums/topic/235315-solved-how-to-add-new-social-icons/?p=1158935&do=findComment&comment=1158935

 

pascal

[vekia]

so if you haven't got there instagram variable, it will not appear.

code that you use: 

{if $instagram_url !=''}

means something like: if there is no $instagram_url - don't display it.

 

 

instead of:

{if $instagram_url !=''}<li class="instagram"><a href="{$instagram_url|escape:html:'UTF-8'}">{l s='instagram' mod='blocksocial'}</a></li>{/if}

use just:

<li class="instagram"><a href="HTTP://URL_TO_YOUR_INSTAGRAM">{l s='instagram' mod='blocksocial'}</a></li>

[agplacid]

 

so if you haven't got there instagram variable, it will not appear.

code that you use: 

{if $instagram_url !=''}

means something like: if there is no $instagram_url - don't display it.

 

 

instead of:

{if $instagram_url !=''}<li class="instagram"><a href="{$instagram_url|escape:html:'UTF-8'}">{l s='instagram' mod='blocksocial'}</a></li>{/if}

use just:

<li class="instagram"><a href="HTTP://URL_TO_YOUR_INSTAGRAM">{l s='instagram' mod='blocksocial'}</a></li>

Hi Vekia, I followed the instruction provided by pascal on this link http://www.prestashop.com/forums/topic/235315-solved-how-to-add-new-social-icons/?p=1158935&do=findComment&comment=1158935

I have got Instagram showing in the module but the module has gone out of it align position. I don't have a clue how to solve this one; this prestashop is proving really challenging.

[vekia]

hello

 

this is what you expect:

 

?

[agplacid]

hello

 

this is what you expect:

 

?

yes I want to get it back to its position

[agplacid]

yes I want to get it back to its position

 

 

Another problem I have is, when I tried to load images to my products, this is the message I get "undefined" do you know how I can resolve this issue?

[vekia]

go to modules > positions tab in your back office.

 

search for "displayFooter" modules list

 

then move "block social" module right after "block cms" module

[agplacid]

go to modules > positions tab in your back office.

 

search for "displayFooter" modules list

 

then move "block social" module right after "block cms" module

Thanks alot Vekia, it worked and I have my alignment back in place. The only downside is that I could not edit the  /modules/blocksocial/img/sprite_pict_social_block.png 

which left instagram link standing on its own, I don't know how to carry out that edit.

[vekia]

hello

 

you've got there some kind of problem with images

it's because in css styles you use images:

 

 

#footer #social_block li.facebook {background: url(images/l.jpg) no-repeat center left;}

 

this image doesn't exist. definition of these styles are in: http://mariesmartfashion.co.uk/modules/uhu_setting/setting_1.css

 

please correct iurls to images.

 

[agplacid]

 

hello

 

you've got there some kind of problem with images

it's because in css styles you use images:

 

 

#footer #social_block li.facebook {background: url(images/l.jpg) no-repeat center left;}

 

this image doesn't exist. definition of these styles are in: http://mariesmartfashion.co.uk/modules/uhu_setting/setting_1.css

 

please correct iurls to images.

 

 

How do I correct that?

[vekia]

in background: url(images/l.jpg)  use url to correct picture

[agplacid]

in background: url(images/l.jpg)  use url to correct picture

Thank you very much Vekia.

I'm new to Prestashop, I don't understand how to do that. Is there any code I need to insert on any of the files?

[PascalVG]

Hi agplacid,

If I understand you well, you want the same black/white background as rss, trwitter, facebook also behind the instagram link, right?

 

edit file:

http://mariesmartfashion.co.uk/modules/uhu_setting/setting_1.css ,

and go to line 109. You will see this code:

 

#footer #social_block li.rss, li.instagram {

    background: url(images/l2.jpg) no-repeat center left;

}

 

 

here, add the red code , li.instagram

 

save and refresh your front page (Ctrl-F5)

 

That should do it.

 

 

One small thing, see that the instagram is being overlapped by the address line below it. to fix that:

same file, at line 104:

#footer #social_block {

    width: 245px;

    height: 89px;              <- take this line out.

    padding: 4px 0px 0 20px;

    margin: 0 0px 0 0;

}

 

That should do the trick,

pascal.

[PascalVG]

See that the footer still is a little messy:

edit file: mariesmartfashion.co.uk/modules/uhu_setting/setting_1.css

 

line 104:

change to:

#footer #social_block {

    width: 25%;

    height: 89px;

    padding: 0px 0px 0 0px;

    margin: 0 0px 0 0;

}

 

line 99:

 

#footer .block_various_links {

    width: 75%;

    height: 93px;

    padding: 0 0 0 0px;

    margin: 0;

}

 

line 102:

#footer .block_various_links li {

    width: 33%;

    background: url(images/bullet1.gif) no-repeat center left;

    font: normal 11px/17px Verdana, Arial, Helvetica, Sans-Serif;

    float: left;

    text-indent: 10px;

}

 

 

Hope you like this.

pascal

[agplacid]

Hi agplacid,

If I understand you well, you want the same black/white background as rss, trwitter, facebook also behind the instagram link, right?

 

edit file:

http://mariesmartfashion.co.uk/modules/uhu_setting/setting_1.css ,

and go to line 109. You will see this code:

 

#footer #social_block li.rss, li.instagram {

    background: url(images/l2.jpg) no-repeat center left;

}

 

 

here, add the red code , li.instagram

 

save and refresh your front page (Ctrl-F5)

 

That should do it.

 

 

One small thing, see that the instagram is being overlapped by the address line below it. to fix that:

same file, at line 104:

#footer #social_block {

    width: 245px;

    height: 89px;              <- take this line out.

    padding: 4px 0px 0 20px;

    margin: 0 0px 0 0;

}

 

That should do the trick,

pascal.

Thank you very much pascal, it worked very well

[PascalVG]

Glad it works!

 

If you have more questions, just add a new topic, or if you have more on this topic, just add to this one,

 

Happy selling,

pascal

Edited December 16, 2013 by PascalVG
yo-> yoUUU, darn keyboard... (see edit history)

[mobimik]

Great ! thank you. Added Instagram as well as Vkontakte here http://mobimik.kiev.ua

Edited December 14, 2014 by mobimik (see edit history)