PS 1.6 How To Change Facebook Block To Display an Image

[yaptalk]

Hello everyone, this is my 1st post so I hope some of you find this helpful.

 

MODS: If on the wrong forum, please move to the correct one.

 

I was looking for a way to replace the facebook block by the custom cms section with an image pointing to an affiliate program. Since I could not find anything, here is a quick and dirty way to get this accomplished.

 

1. Log on to your store via FTP and go into the Modules Folder

2. Find your blockfacebook folder and open it

3. Open blockfacebook.tpl file with your favorite editor

 

Between line 28 - 34 you will see this code

<div id="facebook_block" class="col-xs-4">
	<h4 >{l s='Follow us on Facebook' mod='blockfacebook'}</h4>
	<div class="facebook-fanbox">
		<div class="fb-like-box" data-href="{$facebookurl|escape:'html':'UTF-8'}" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false">
		</div>
	</div>
</div>

If you want to display a clickable image instead of the facebook like box & keep the "look" of your site intact, replace with this code

<div id="facebook_block" class="col-xs-4">
    <center><h4 >{l s='Whatever You Want Your Heading To Be' mod='blockfacebook'}</h4></center>
<a href="URL You Want To Send Visitors To" target="blank"> <img src="Full URL / Path To Your Image"></a>
</div>

Remember to upload your image to your site so you can get its fullt path / url.

 

Save and upload your blockfacebook.tpl back to your server and you should end up with something like this

 

 

If anyone knows of an easier way, just post it below so everyone can benefit.

 

Yaptalk

Edited September 28, 2014 by yaptalk (see edit history)

[yaptalk]

Now, if someone can helpme make this image responsive, I would greatly appreciate it.  The code I have on the css file is

.facebook-fanbox {
	overflow-x : hidden;
}

Thanks!

 

[vekia]

to image add class:

 

class="img-responsive"

[yaptalk]

That worked... Thanks!