Jump to content
GoGoMo

Add Pinterest, Instagram To Block Social Module

Recommended Posts

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.

Share this post


Link to post
Share on other sites

any reply yet ?

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

sorry my mistake www.mariesmartfashion.co.uk

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

where you've got definition of $instagram_url variable?

Share this post


Link to post
Share on other sites

where you've got definition of $instagram_url variable?

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

hello

 

this is what you expect:

4vvtCAY.png

 

?

yes I want to get it back to its position

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

go to modules > positions tab in your back office.

 

search for "displayFooter" modules list

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

hello

 

you've got there some kind of problem with images

BxCcQQw.png

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.

 

Share this post


Link to post
Share on other sites

 

hello

 

you've got there some kind of problem with images

BxCcQQw.png

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by PascalVG
yo-> yoUUU, darn keyboard... (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More