Jump to content
JoeDer

Προσθήκη Facebook Fan Page στην πλαϊνή μπάρα

Recommended Posts

JoeDer

Για να προσθέσετε το Facebook Fan Page στην πλαϊνή μπάρα ακολουθήστε τον παρακάτω οδηγό.

 

Αρχικά είναι σημαντικό (για ευκολία) να εγκαταστήσετε ένα widget που λέγετε TXT & PHP Widget, η εγκατάστασή του είναι πολύ εύκολη.

Το επόμενο βήμα είναι να πάρετε τον Page Plugin κώδικα του facebook από την σελίδα Social Plugins

 

Στο αναδυόμενο παράθυρο πατώντας το "Get Code" με τίτλο "Your Plugin Code" θα δείτε:

 

1. Τον JavaScript SDK κώδικα. Όλο το περιεχόμενο του JavaScript SDK κώδικα είναι αναγκαίο να προστεθεί στο globalTemplate του θέματος που χρησιμοποιείτε ακριβώς κάτω από το body. Για παράδειγμα το globalTemplate στο σημείο που πρέπει να προστεθεί ο JavaScript SDK θα πρέπει να μοιάζει κάπως έτσι:

	<body class='ipsApp ipsApp_front {{if isset( \IPS\Request::i()->cookie['hasJS'] )}}ipsJS_has{{else}}ipsJS_none{{endif}} ipsClearfix{{foreach output.bodyClasses as $class}} {$class}{{endforeach}}' {{if output.globalControllers}}data-controller='{expression="implode( ',', output.globalControllers )"}'{{endif}} {{if isset( output.inlineMessage )}}data-message="{expression="output.inlineMessage"}"{{endif}} data-pageApp='{$location['app']}' data-pageLocation='front' data-pageModule='{$location['module']}' data-pageController='{$location['controller']}' itemscope itemtype="http://schema.org/WebSite">
      <!-- Facebook Likebox Start -->
            <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/en_US/sdk.js#xfbml=1&version=v2.5&appId=Edw einai to AppID ";
  				fjs.parentNode.insertBefore(js, fjs);
				}(document, 'script', 'facebook-jssdk'));</script>
      <!-- Facebook Likebox End -->
		<meta itemprop="url" content="{setting="base_url"}">

 

2. Στην αρχική σελίδα (index) του φόρουμ και συνδεδεμένοι ως διαχειριστές, ανοίγουμε την αριστερή πλαϊνή μπάρα που βρίσκονται όλα τα widgets. Ανοίγουμε την καρτέλα με το widget "TXT & PHP Widget" και σέρνουμε την από κάτω καρτέλα στην θέση που θέλουμε της πλαϊνής μπάρας. Πατάμε Edit και προσθέτουμε τον δεύτερο κώδικα που μας έχει δώσει το Page Plugin του facebook. Για παράδειγμα ο κώδικας που πρέπει να προσθέσουμε πρέπει να μοιάζει κάπως έτσι:

<div class="fb-page" data-href="https://www.facebook.com/ipbgr/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ipbgr/"><a href="https://www.facebook.com/ipbgr/">IPB.GR</a></blockquote></div></div>

Πατώντας Save είναι όλα έτοιμα για να εμφανιστεί η fan page του facebook στην πλαϊνή μπάρα.

 

Σημείωση

Όσοι είναι κάτοχοι του Pages (IP.Content) δεν χρειάζεται η εγκατάσταση του widget "TXT & PHP". Δημιουργήστε ένα Custom Block και προσθέστε τον δεύτερο κώδικα που δίνει το facebook page plugin. Στην συνέχεια στην αρχική από την αριστερή μπάρα των widgets ανοίγουμε την καρτέλα "Pages" και σέρνουμε το widget "Custom Blocks" στο σημείο της πλαϊνής μπάρας που θέλουμε και επιλέγουμε το custom block που δημιουργήσαμε. 

Share this post


Link to post
Share on other sites
Dimitris_p
Posted (edited)

Μια βοηθεια παρακαλώ. Στο θέμα μου στο  globalTemplate εχω στον παρακάτω κώδικα. Που πρέπει να βάλω τον κώδικα του FB?

 

<!DOCTYPE html>
<html lang="{expression="\IPS\Member::loggedIn()->language()->bcp47()"}" dir="{{if member.language()->isrtl}}rtl{{else}}ltr{{endif}}">
	<head>
		<title>{expression="output.getTitle( $title )"}</title>
		{{if settings.ipbseo_ga_enabled}}
			{setting="ipseo_ga"}
		{{endif}}
		<!--[if lt IE 9]>
			{{foreach \IPS\Theme::i()->css( 'extra/ie8.css', 'core' ) as $css}}<link rel="stylesheet" type="text/css" href="{$css}">{{endforeach}}
		    <script src="{url="applications/core/interface/html5shiv/html5shiv.js" base="none" protocol="\IPS\Http\Url::PROTOCOL_RELATIVE"}"></script>
		<![endif]-->
		{template="includeMeta" app="core" group="global" location="global" params=""}
		{template="includeCSS" app="core" group="global" location="global" params=""}
		{template="includeJS" if="theme.js_include != 'footer'" app="core" group="global" location="global" params=""}
		{template="favico" app="core" group="global" location="front" params=""}
	</head>
	<body class='ipsApp ipsApp_front {{if isset( \IPS\Request::i()->cookie['hasJS'] )}}ipsJS_has{{else}}ipsJS_none{{endif}} ipsClearfix{{foreach output.bodyClasses as $class}} {$class}{{endforeach}}' {{if output.globalControllers}}data-controller='{expression="implode( ',', output.globalControllers )"}'{{endif}} {{if isset( output.inlineMessage )}}data-message="{expression="output.inlineMessage"}"{{endif}} data-pageApp='{$location['app']}' data-pageLocation='front' data-pageModule='{$location['module']}' data-pageController='{$location['controller']}' {{if isset( \IPS\Request::i()->id )}}data-pageID='{expression="(int) \IPS\Request::i()->id"}'{{endif}}>
<div id="border_left">
<div id="border_right">
<div id='forum_wrapper1'>
        <a href='#elContent' class='ipsHide' title='{lang="jump_to_content_desc"}' accesskey='m'>{lang="jump_to_content"}</a>
		<div id='ipsLayout_header' class='ipsClearfix'>
       	<div class='mainwidth ipsResponsive_showDesktop ipsResponsive_hidePhone ipsResponsive_hideTablet'>
            {template="navBar" app="core" group="global" params=""}
        </div>
          	{template="updateWarning" app="core" group="global" params=""}
			{{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="mobileNavBar" app="core" group="global" params=""}{{endif}}
			<header>
				<div class='ipsLayout_container'>
					{template="logo" app="core" group="global" params=""}
					{{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="userBar" app="core" group="global" params=""}{{endif}}
				</div>
			</header>
		</div>
		<main id='ipsLayout_body' class='ipsLayout_container'>
			<div id='ipsLayout_contentArea'>
				<div id='ipsLayout_contentWrapper'>
					{template="breadcrumb" app="core" group="global" params="'top'"}
					{template="sidebar" if="theme.sidebar_position == 'left'" app="core" group="global" params="'left'"}
					<div id='ipsLayout_mainArea'>
						<a id='elContent'></a>
						{advertisement="ad_global_header"}
						{template="acknowledgeWarning" if="\IPS\Member::loggedIn()->members_bitoptions['unacknowledged_warnings']" params="\IPS\Member::loggedIn()->warnings( 1, FALSE )" group="global" app="core"}
						{{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses ) and !member.members_bitoptions['profile_completion_dismissed'] and $nextStep = member.nextProfileStep()}}
							{template="profileNextStep" group="global" app="core" params="$nextStep, true"}
						{{endif}}
						{template="widgetContainer" group="global" app="core" params="'header', 'horizontal'"}
						{$html|raw}
						{template="widgetContainer" group="global" app="core" params="'footer', 'horizontal'"}
					</div>
					{template="sidebar" if="theme.sidebar_position == 'right'" app="core" group="global" params="'right'"}
					{template="breadcrumb" app="core" group="global" params="'bottom'"}
				</div>
			</div>
			{template="inlineMessage" if="member.msg_show_notification and $message = \IPS\core\Messenger\Conversation::latestUnreadMessage()" app="core" group="global" params="$message"}
		</main>
		<footer id='ipsLayout_footer' class='ipsClearfix'>
			<div class='ipsLayout_container'>
				{advertisement="ad_global_footer"}
				{template="footer" app="core" group="global" params=""}
			</div>
		</footer>
		{{if !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="mobileNavigation" if="theme.responsive" app="core" group="global" params=""}{{endif}}
		{template="guestTermsBar" if="!\IPS\Member::loggedIn()->member_id and \IPS\Settings::i()->guest_terms_bar" app="core" group="global" params="base64_encode( \IPS\Settings::i()->base_url )"}
		{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}
		{template="viglink" if="settings.viglink_enabled" app="core" group="global" params=""}
		{template="metaTagEditor" if="isset( $_SESSION['live_meta_tags'] ) and $_SESSION['live_meta_tags'] and member.isAdmin()" app="core" group="global" params=""}
		<!--ipsQueryLog-->
		<!--ipsCachingLog-->
		{expression="output.endBodyCode" raw="true"}
		{{if settings.fb_pixel_enabled and settings.fb_pixel_id and $noscript = \IPS\core\Facebook\Pixel::i()->noscript()}}
			<noscript>
			{$noscript|raw}
			</noscript>
		{{endif}}
</div>
</div>
</div>
	</body>
</html>

 

Ακυρο το παραπάνω μύνημα, βρήκα που έπρεπε να τον βάλω. 

ΥΣ. Κάποιον ανάλογο οδηγό και για το Twitter θα εχουμε καποια στιγμη? 

Edited by Dimitris_p

Share this post


Link to post
Share on other sites
Dimitris_p

Σήμερα παρατήρησα κάτι που δεν δουλεύει. Στον chrome opera και Edge το widget φορτώνει κανονικά. Σε Firefox όμως δεν το φορτώνει.Τι μπορεί να συμβαίνει υπάρχει κάποια λύση?

fb.png

Share this post


Link to post
Share on other sites
Σχολιάστε εποικοδομητικά

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. | Terms of Use