Μετάβαση στο περιεχόμενο

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


JoeDer

Recommended Posts

Για να προσθέσετε το 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 που δημιουργήσαμε. 

Link to comment
Share on other sites


  • 5 years later...

Μια βοηθεια παρακαλώ. Στο θέμα μου στο  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
Link to comment
Share on other sites


  • 3 weeks later...

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

fb.png

Link to comment
Share on other sites


  • 9 months later...

Λοιπόν ξαφνικά σταμάτησε να φορτώνει δεδομένα από την σελίδα μου και βγαζει αυτό την παρακάτω φωτο. Διαβάζω στην σελίδα Social Plugins ΄λίγο ποιο κάτω σχετικά με τον κώδικα αυτό 

Καταργημένα χαρακτηριστικά

  • Το χαρακτηριστικό data-show-postsέχει καταργηθεί. Χρησιμοποιήστε το χαρακτηριστικό tabs/ data-tabsκαι χρησιμοποιήστε την τιμή timelineγια να εμφανίσετε δημοσιεύσεις από το χρονοδιάγραμμα της Σελίδας.

Να είναι αυτό η αιτία? Τι να αλλάξω δηλ από τον κώδικα? δεν κατάλαβα! 

2022-03-25-200543.png

Edited by Dimitris_p
Link to comment
Share on other sites


Δημιουργήστε ένα λογαριασμό ή συνδεθείτε προκειμένου να αφήσετε κάποιο σχόλιο

Πρέπει να είστε μέλος για να μπορέσετε να αφήσετε κάποιο σχόλιο

Δημιουργία λογαριασμού

Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Είναι εύκολο!

Εγγραφή νέου λογαριασμού

Σύνδεση

Εάν έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
×
×
  • 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