[staszamParticipant]

I’ve pasted the Facebook Javascript code

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

in the custom JavaScript field, then I added the Plugin code to one of the footer widget fields.
<div class="fb-page" data-href="https://www.facebook.com/ZahnarztOsterburken" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ZahnarztOsterburken"><a href="https://www.facebook.com/ZahnarztOsterburken">Zahnarztpraxis Stanislav Albrecht und Dr. Claus Kuhn</a></blockquote></div></div>

The Facebook Like Box doesn’t show up. It only shows a link to the facebook fanpage.

Page:
http://zahnarzt-osterburken.de/wordpress/

Theme Version: 4.1.0

WP-Version: 4.3.1

Stack: Integrity

[ThaiModerator]

Hi There,

Thank you for writing in!

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, add the following code in your child theme’s functions.php file:

add_action( 'x_before_site_begin', 'x_body_code' );
function x_body_code(){
	?>
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.5";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<?php
}

After that remove this following code from your Customize > Custom > Javascript:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Hope this helps 🙂

[staszamParticipant]

That worked. Thank you!

I have two more questions:

1. Is it possible to make a text slider with cornerstone? I want a slider with some of my customer reviews

2. Can I add a custom icon to the social media footer section? I would like to replace LinkedIn (or another social media I don’t use) with the Jameda icon (a doctors rating website).

[ZeshanMember]

Hi there,

Thanks for writing in!

#1: Yes, you can use our slider element in for that purpose. In each slider item, you can insert any content including text, images and even other shortcodes. Checkout our demo on slider for more detail: http://theme.co/x/demo/integrity/1/shortcodes/responsive-slider/

#2: In this case, you can add a link to your Jameda profile in Linkedin field, then add following CSS code under Custom > CSS in the Customizer to replace the icon with Jameda icon:

.x-social-global a.linkedin > i {
    width: 20px;
    height: 20px;
    display: block;
    background: url('url-to-your-image') center center no-repeat;
    background-size: contain;
}

.x-social-global a.linkedin > i:before {
    content: none;
}

Replace url-to-your-image with the URL of your Jameda icon image.

Hope this helps. 🙂

Thank you!

[staszamParticipant]

#1: Thank you! I didn’t knew that the slider supports all formats!

#2: The code works, but I need some little adaptions. The Jameda icon is a few pixels higher than the others. I tried to replace it with margin-top/bottom or to put the image to center bottom instead of center center, but it doesn’t work. And is there a way to get the hover color-change for my custom icon, too? I use a png file, but I can either make another one in the lighter green color or I can export it as .icon/.svg or which format is needed.

Thanks in advance!

__________
http://www.zahnarzt-osterburken.de/wordpress/

[FriechModerator]

Hi There,

Since that icon is image you need to create an hover version of that icon with light background like the facebook and g+ icons. And add the css below on CUSTOM CSS on the Customizer

.x-social-global a.linkedin > i {
	height: 18px;
}

.x-social-global a.linkedin > i:hover {
	background-image: url('HOVER IMAGE URL');
}

Hope it helps, Cheers!

[staszamParticipant]

Like I said, I can export the icon in every other format, if this is more handy. The image is very pixelated in the mobile view, so if you could give me a hint, which format I should better use, I would be glad 🙂

And is there a way to reduce the loading time of the homepage? Everytime I go to the website, it takes a long time to load. But after the website is loaded, all the pages are loading fast.

[JadeModerator]

Hi there,

For icons, .png image format is recommended. Kindly review this post in our knowledge base which covers how to improve the performance of your site.

Feel free to let us know if you have any questions. Cheers!

[staszamParticipant]

I use a png image, but the position isn’t right yet. I tried to fix it with “background-position: 0px 2px;” but this cuts off the bottom of the image.

Thanks for your help so far! Especially for the performance improvement review!

[Rue NelModerator]

Hello There,

Please find and remove this code in your customizer,

.x-social-global a.linkedin > i {
    width: 20px;
    height: 20px;
    display: block;
    background: url('http://zahnarzt-osterburken.de/wordpress/wp-content/uploads/2015/10/icon_jameda.png') center center no-repeat;
    background-size: contain;
background-position: 0px 2px;
}

.x-social-global a.linkedin > i:before {
    content: none;
}

.x-social-global a.linkedin > i {
	height: 18px;
}

And replace it with just this code instead:

.x-social-global a.linkedin > i {
    width: 20px;
    height: 20px;
    display: block;
    background: url('http://zahnarzt-osterburken.de/wordpress/wp-content/uploads/2015/10/icon_jameda.png') center center no-repeat;
    background-size: contain;
}

.x-social-global a.linkedin > i:before {
    visibility: hidden;
}

We would loved to know if this has work for you. Thank you.

[staszamParticipant]

It’s working! Thank you very much!
Would it be possible to change the hover text? If I’m above the jameda icon, the hover-text still says LinkedIn.

[RupokMember]

You are welcome!

To change the hover Title, you can add this under Custom > JavaScript in the Customizer.

(function($) {
$(.linkedin').attr('title','Jameda');
})(jQuery);

Hope this helps.

Cheers!

[staszamParticipant]

It didn’t work. I copied the code to the custom javascript field, but there’s still LinkedIn shown when I hover over the icon.

[RadModerator]

Hi there,

Sorry for the typo, please try this one,

(function($) {
$('.linkedin').attr('title','Jameda');
})(jQuery);

Thanks.

[Author]

Posts