Jump to content
  • 0
Maxima

[SOLVED] Instagram link in Follow Us

Question

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........

 

 

 

 

Share this post


Link to post
Share on other sites

40 answers to this question

Recommended Posts

  • 0

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:
EEjcXsu.png

Share this post


Link to post
Share on other sites
  • 0

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:

EEjcXsu.png

I tried that but it does not work for me.

PS : i am not using bootstrap default theme 

Share this post


Link to post
Share on other sites
  • 0

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?

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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?

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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)

Share this post


Link to post
Share on other sites
  • 0

just follow the same steps but instead 

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

content: "\f173";

Share this post


Link to post
Share on other sites
  • 0

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):

DfKEFWd.png

 

How do I get instagram on there?

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

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].

Share this post


Link to post
Share on other sites
  • 0

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'));
	}

B) 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.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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:

EEjcXsu.png

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

 

Follow us
 

Share this post


Link to post
Share on other sites
  • 0

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?

 

post-123291-0-61176400-1411755492_thumb.jpg

Edited by aliaspt

Share this post


Link to post
Share on other sites
  • 0

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"

Share this post


Link to post
Share on other sites
  • 0

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?

Share this post


Link to post
Share on other sites
  • 0

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!

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0
3gg    0

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>

 

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 by 3gg

Share this post


Link to post
Share on other sites

×