GoGoMo 16 Posted February 14, 2013 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
hassantariq 0 Posted May 3, 2013 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
vekia 8,950 Posted May 3, 2013 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
Loguste 0 Posted August 1, 2013 Merci de France l'ami Thank you friend of France loguste Share this post Link to post Share on other sites
agplacid 0 Posted December 13, 2013 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
vekia 8,950 Posted December 13, 2013 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
agplacid 0 Posted December 13, 2013 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
vekia 8,950 Posted December 13, 2013 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
agplacid 0 Posted December 13, 2013 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
vekia 8,950 Posted December 13, 2013 are you sure that url is correct? it doesn't work for me Share this post Link to post Share on other sites
agplacid 0 Posted December 13, 2013 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
vekia 8,950 Posted December 13, 2013 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
agplacid 0 Posted December 13, 2013 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
vekia 8,950 Posted December 13, 2013 where you've got definition of $instagram_url variable? Share this post Link to post Share on other sites
agplacid 0 Posted December 13, 2013 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
PascalVG 723 Posted December 13, 2013 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 Share this post Link to post Share on other sites
vekia 8,950 Posted December 14, 2013 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
agplacid 0 Posted December 14, 2013 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
vekia 8,950 Posted December 14, 2013 hello this is what you expect: ? Share this post Link to post Share on other sites
agplacid 0 Posted December 14, 2013 hello this is what you expect: ? yes I want to get it back to its position Share this post Link to post Share on other sites
agplacid 0 Posted December 14, 2013 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
vekia 8,950 Posted December 14, 2013 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
agplacid 0 Posted December 14, 2013 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
vekia 8,950 Posted December 14, 2013 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. Share this post Link to post Share on other sites
agplacid 0 Posted December 14, 2013 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? Share this post Link to post Share on other sites
vekia 8,950 Posted December 14, 2013 in background: url(images/l.jpg) use url to correct picture Share this post Link to post Share on other sites
agplacid 0 Posted December 14, 2013 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
PascalVG 723 Posted December 14, 2013 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
PascalVG 723 Posted December 14, 2013 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
agplacid 0 Posted December 15, 2013 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
PascalVG 723 Posted December 16, 2013 (edited) 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) Share this post Link to post Share on other sites
mobimik 0 Posted December 14, 2014 (edited) Great ! thank you. Added Instagram as well as Vkontakte here http://mobimik.kiev.ua Edited December 14, 2014 by mobimik (see edit history) Share this post Link to post Share on other sites