[SOLVED] Instagram link in Follow Us

Maxima · March 27, 2014

Can anyone help me how can i add Instagram link besides of Facebook, Twitter, Google+....

in Footer (Social Media Links Module).

As there is no option for INSTAGRAM

and i have to add it........

Maxima · March 28, 2014

Please give it a look

Can i add instagram too????

Edited March 28, 2014 by Maxima (see edit history)

vekia · March 31, 2014

open themes/default-bootstrap/modues/blocksocial/blocksocial.tpl

before closing </ul> add

        	<li class="instagram">
        		<a href="http://instagram.com/mypresta">
        			<span>{l s='Instagram' mod='blocksocial'}</span>
        		</a>
        	</li>

(of course change link to your instagram profile)

then in global.css (/themes/default-bootstrap/css/global.css)

paste this:

.footer-container #footer #social_block ul li.instagram a:before {
content: "\f16d";
}

effect:

Maxima · April 1, 2014

Thanks Alot

vekia · April 1, 2014

you're welcome

i marked this thread as solved

with regards,

Milos

soufianester · May 29, 2014

open themes/default-bootstrap/modues/blocksocial/blocksocial.tpl

before closing </ul> add
 	<li class="instagram">
 		<a href="http://instagram.com/mypresta">
 			{l s='Instagram' mod='blocksocial'}
 		</a>
 	</li>
(of course change link to your instagram profile)

then in global.css (/themes/default-bootstrap/css/global.css)

paste this:
.footer-container #footer #social_block ul li.instagram a:before {
content: "\f16d";
}
effect:

I tried that but it does not work for me.

PS : i am not using bootstrap default theme

vekia · May 29, 2014

I tried that but it does not work for me.

PS : i am not using bootstrap default theme

doesn't work because? you see some errors? or what? whats going on exactly?

soufianester · May 29, 2014

doesn't work because? you see some errors? or what? whats going on exactly?

There is no errors it's just that instagram doesn't show up.

vekia · May 29, 2014

clear shop cache and turn on force compile (under adv. parameters > performance tab)

do it temporarily

soufianester · May 29, 2014

clear shop cache and turn on force compile (under adv. parameters > performance tab)

do it temporarily

I just did it , still nothing :s

smallbizwiz · June 16, 2014

soufianester - turn on dev mode /cache/defines.inc.php - any errors? Also, make sure you're editing under /theme/ and not under /modules/

soufianester · June 17, 2014

soufianester - turn on dev mode /cache/defines.inc.php - any errors? Also, make sure you're editing under /theme/ and not under /modules/

i did that but it didn't work . now i am trying to change my footer "www.epik.ma" i want it to be like the footer in this url : "www.ooh-design.com" .

Any idea please?

vekia · June 17, 2014

i did that but it didn't work . now i am trying to change my footer "www.epik.ma" i want it to be like the footer in this url : "www.ooh-design.com" .

Any idea please?

your shop doesnt use default theme so this is why guide related to instagram doesnt work for you. there is just no social sharing module.

regarding your footer, i replied in your topic.

soufianester · June 18, 2014

your shop doesnt use default theme so this is why guide related to instagram doesnt work for you. there is just no social sharing module.

regarding your footer, i replied in your topic.

i saw your reply but didnot understand it ?(in my topic)

thadunno · June 23, 2014

Hi,
Thanks for this, it works perfectly! Is there any way to do the same thing but for Tumblr?

Thanks

vekia · June 26, 2014

just follow the same steps but instead

"instagram" in class name use "tumblr" and in class instead content: "\f16d"; use

content: "\f173";

anthoj · July 17, 2014

Hi, I'm attempting to do that. I've changed the two files as you suggested but it's still not working for me.

blocksocial.tpl:

{if $facebook_url != ''}<li class="facebook"><a class="_blank" href="{$facebook_url|escape:html:'UTF-8'}">{l s='Facebook' mod='blocksocial'}</a></li>{/if}
		{if $twitter_url != ''}<li class="twitter"><a class="_blank" href="{$twitter_url|escape:html:'UTF-8'}">{l s='Twitter' mod='blocksocial'}</a></li>{/if}
		{if $rss_url != ''}<li class="rss"><a class="_blank" href="{$rss_url|escape:html:'UTF-8'}">{l s='RSS' mod='blocksocial'}</a></li>{/if}
		<li class="instagram"><a href="http://instagram.com/elitemstuning"><span>{l s='Instagram' mod='blocksocial'}</span></a></li>
		{if $youtube_url != ''}<li class="youtube"><a class="_blank" href="{$youtube_url|escape:html:'UTF-8'}">{l s='YouTube' mod='blocksocial'}</a></li>{/if}
		{if $google_plus_url != ''}<li class="google_plus"><a class="_blank" href="{$google_plus_url|escape:html:'UTF-8'}">{l s='Google+' mod='blocksocial'}</a></li>{/if}
		{if $pinterest_url != ''}<li class="pinterest"><a class="_blank" href="{$pinterest_url|escape:html:'UTF-8'}">{l s='Pinterest' mod='blocksocial'}</a></li>{/if}

global.css

.footer-container #footer #social_block ul li a:hover {
              color: white; }
          .footer-container #footer #social_block ul li.facebook a:before {
            content: "\f09a"; }
          .footer-container #footer #social_block ul li.twitter a:before {
            content: "\f099"; }
          .footer-container #footer #social_block ul li.rss a:before {
            content: "\f09e"; }
          .footer-container #footer #social_block ul li.instagram a:before {
			content: "\f16d"; }
          .footer-container #footer #social_block ul li.youtube a:before {
            content: "\f167"; }
          .footer-container #footer #social_block ul li.google-plus a:before {
            content: "\f0d5"; }
          .footer-container #footer #social_block ul li.pinterest a:before {
            content: "\f0d2"; }

After all that I'm still getting the same two icons I previously had (facebook and twitter):

How do I get instagram on there?

Thanks

chemamor · July 17, 2014

How i have to made to instagram open in a new window?.

vekia · July 17, 2014

add target="_blank" to <a href="" with instagram link :-)

jjryeste · August 9, 2014

Hello, Vekia i need move tex follow Us , up center,

ad image.

me Webpage http://www.punto-de-cruz.es/

Thank you

vekia · August 9, 2014

Hello, Vekia i need move tex follow Us , up center,

ad image.

footer.jpg

me Webpage http://www.punto-de-cruz.es/

Thank you

try to use these styles:


#social_block h4 {
position:absolute;
right:-40px;
top:30px;
}

jjryeste · August 9, 2014

Ok Vekia , in global.css

vekia · August 9, 2014

that's right in global.css file

jjryeste · August 9, 2014

I have

#footer #social_block h4{float:right;margin-bottom:0;font-size:21px;line-height:25px;text-transform:none;padding:0 600px 0 0}@media(max-width:767px){.footer-container #footer #social_block h4{display:none;text-align:center[spam-filter].

is here

#footer #social_block h4position:absolute;
right:-40px;
top:30px;
} {float:right;margin-bottom:0;font-size:21px;line-height:25px;text-transform:none;padding:0 600px 0 0}@media(max-width:767px){.footer-container #footer #social_block h4{display:none;text-align:center[spam-filter].

vekia · August 10, 2014

can you turn off CCC for css files temporarily?

Luccas · August 10, 2014

Adding a custom block, in my example Instagram, to be visble also in bakoffice. It can be done with any link (of course following Instagram example and changing variables).

1. Edit: modules/blocksocial/blocksocial.php (look for the Instagram example)

a) function install () - our line goess just after "VIMEO"

	
			Configuration::updateValue('BLOCKSOCIAL_VIMEO', '') &&
                        Configuration::updateValue('BLOCKSOCIAL_INSTAGRAM', '') &&  
			$this->registerHook('displayHeader') && 
			$this->registerHook('displayFooter'));
	}

function uninstall() - again our line goes after "Vimeo"


			Configuration::deleteByName('BLOCKSOCIAL_VIMEO') AND
            Configuration::deleteByName('BLOCKSOCIAL_INSTAGRAM') AND
			parent::uninstall());
	}

c) function getContent() - we add the following line just after "Vimeo" entry

Configuration::updateValue('BLOCKSOCIAL_INSTAGRAM', Tools::getValue('blocksocial_instagram', ''));

d) function hookDisplayFooter() - another line put after "Vimeo" entry

'instagram_url' => Configuration::get('BLOCKSOCIAL_INSTAGRAM'),

e) function renderForm - we add the array, this is the end of the function where we add our entry

array(						
						'type' => 'text',						
						'label' => $this->l('Vimeo URL:'),						
						'name' => 'blocksocial_vimeo',						
						'desc' => $this->l('Your official Vimeo account.'),					
					),
                    array(						                    //adding new array for instagram
						'type' => 'text',						    //displays in backoffice module
						'label' => $this->l('Instagram URL:'),						
						'name' => 'blocksocial_instagram',						
						'desc' => $this->l('Your official Instagram account.'),					
					),
				),
				'submit' => array(
					'title' => $this->l('Save'),
				)
			),
		);

e) function getConfigFieldsValues() - again our entry after "Vimeo" one:

'blocksocial_instagram' => Tools::getValue('blocksocial_instagram', Configuration::get('BLOCKSOCIAL_INSTAGRAM')),

2. modules/blocksocial/blocksocial.tpl - adding our line regarding "Instagram"

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

Now we have our module ready for re-installation. I install it manually agan, we will have Instagram entry in our backoffice functioning like the rest of the links.

However, if we do not want to reinstall the block, we have to edit more files, located in directory of our theme, my example uses defalut Presta 1.6 theme.

3. Edit: themes/default-bootstrap/modules/blocksocial/blocksocial.tpl - we add our entry regarding Instagram in <ul> list

 {if $pinterest_url != ''}
        	<li class="pinterest">
        		<a href="{$pinterest_url|escape:html:'UTF-8'}">
        			<span>{l s='Pinterest' mod='blocksocial'}</span>
        		</a>
        	</li>
        {/if}
        <!-- Instagram - socialLink - start -->
        {if $instagram_url != ''}
        <li class="instagram">
        		<a href="{$instagram_url|escape:html:'UTF-8'}" target="_blank">
        			<span>{l s='Instagram' mod='blocksocial'}</span>
        		</a>
       	</li>
        {/if}
        <!-- Instargarm - socialLink - end -->
	</ul>

4. Edit: themes/default-bootstrap/css/global.css - at the end of the file add the lines

.footer-container #footer #social_block ul li.instagram a:before {
content: "\f16d";
}

And That's it. We can change our Instagram link in BackOffice like the rest.

If any mistakes in this entry, please correct.

NYNDesign · August 20, 2014

adding the:

.footer-container #footer #social_block ul li.instagram a:before {
content: "\f16d";
}

to my themes/default-bootstrap/css/global.css file gives an internal server error :s

NYNDesign · August 21, 2014

Infact, changing anything in the global.css file gives the internal server error.

Leylani · September 22, 2014

open themes/default-bootstrap/modues/blocksocial/blocksocial.tpl

before closing </ul> add
 	<li class="instagram">
 		<a href="http://instagram.com/mypresta">
 			{l s='Instagram' mod='blocksocial'}
 		</a>
 	</li>
(of course change link to your instagram profile)

then in global.css (/themes/default-bootstrap/css/global.css)

paste this:
.footer-container #footer #social_block ul li.instagram a:before {
content: "\f16d";
}
effect:

Hello Vekia,

I'm sorry I'm a big big newbie concerning coding.

The thing is that I followed everything you said here but I had no results? I still have this in my footer. Please kindly help and sorry for my english (I'm french)

Thanks a lot

aliaspt · September 26, 2014

I'm editing to add that I found the social block is now appearing in the bottom right of the footer instead of next to the Newsletter block (see attached image). How do I bring it back up where it was? No clue how and why it went down there.

I still get 403 error when I try to add an instagram link in the BO.

I'm having troubles with this social sharing block. I wanted to add Instagram via module, and it gives me the following error:

"403 Permission Denied

You do not have permission for this request"

I changed permissions to 777 for the tpl and php files in the social block module and then the entire module folder, but I still get this error. Then I went and added the code that Vekia suggested for global.css (Instagram wasn't in the list of social links), and now all the icons are gone and I still get the 403 error when I try to add my instaram link in the BO. Please, how do I make this thing work?

Edited September 26, 2014 by aliaspt (see edit history)

aliaspt · September 27, 2014

I'd assume this to be an easy fix. Please help!

vekia · September 28, 2014

modules > positions

search for "displayFooter" modules list and move social block module right after newsletter block module (on displayFooter modules list)

aliaspt · September 28, 2014

modules > positions

search for "displayFooter" modules list and move social block module right after newsletter block module (on displayFooter modules list)

That helped to move the block up, thank you!

What about the error I get when I try to add an instagram link?

"403 Permission Denied

You do not have permission for this request"

vekia · September 28, 2014

That helped to move the block up, thank you!

What about the error I get when I try to add an instagram link?

"403 Permission Denied

You do not have permission for this request"

how you're trying to add it? can you describe whole process?

aliaspt · September 28, 2014

how you're trying to add it? can you describe whole process?

I try to add the link via the module. I go to the modules list, choose to configure Social networking block, and then enter the instagram link in the Instagram field. See attached images.

I checked the global.css file and there is no instagram link included in the footer's code. I tried adding the following code in the footer container:

.footer-container #footer #social_block ul li.instagram a:before {
            content: "\f16d"; }

This did not help. I still got the 403 error. I tried resetting the social networking block, and tried the force compilation with no results.

Thank you so much for looking into this, Vekia!

vekia · September 28, 2014

what module verison you've got at the moment?

aliaspt · September 29, 2014

Hmm, images did not get attached with the previous post.

The version is 1.1.5 - by PrestaShop

Edited September 29, 2014 by aliaspt (see edit history)

aliaspt · October 3, 2014

Bumping this. Still unable to add Instagram link.

aliaspt · October 3, 2014

Solved. So here is what I did:

1) I contacted the hosting company and they white-listed whatever was triggering the error.

2) Added the code that vekia posted on the first page for global.css file.

3) Added the following code in themes/bootstrap/modules/blocksocial/blocksocial.tpl:

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

4) Then reload the front office several times (!) or clear cache because it may not show right away.

3gg · October 23, 2014

open themes/default-bootstrap/modues/blocksocial/blocksocial.tpl

before closing </ul> add
 	<li class="instagram">
 		<a href="http://instagram.com/mypresta">
 			{l s='Instagram' mod='blocksocial'}
 		</a>
 	</li>

For this first file, i write the same code like other social_block source code :

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

and for the second file /themes/default-bootstrap/css/global.css i do what you say and everything works!!

thanks you very much

Edited October 23, 2014 by 3gg (see edit history)

CarpalWatch.com · February 5, 2015

Solved! =) Thank you, Vekia!

The key lies in "\f16d" in global.css. Just open the file and find all instances of pinterest or facebook. Copy and paste and replace with instagram and "\f16d".

Cheers,

Vern

http://www.carpalwatch.com/shop

[SOLVED] Instagram link in Follow Us

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment