I have this website http://smithachallathomas.net63.net/. Now I am trying to add a share, like, comment stream. I made this website using php.
Here's my index.php
<?php include('Header.php'); ?>
<div id = "content">
<div class = "post">
<h2></h2>
<p>
<p>Body BodyLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod leo vitae nulla euismod commodo. Phasellus at mi quam.
Etiam lacinia elit pellentesque ligula faucibus nec luctus mi mollis. Duis ante elit, blandit sed placerat sit amet, varius vitae tellus.
Duis in ante sed metus mollis ornare. Donec ipsum lorem, mollis non ultrices et, porta at dolor. Sed nisi mauris, condimentum nec vehicula
</p>
</div>
</div>
<?php include('Sidebar.php'); ?>
<fb:like href="http://www.http://smithachallathomas.net63.net/" send="true" width="450" show_faces="true" font="lucida grande"></fb:like>
<?php include('Footer.php'); ?>
Header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
Blog for healthy living
</head>
<body>
Healthy living practices
<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/all.js#xfbml=1&appId=******";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
I dont see the like/share button on the webpage. Please help me. I am assuming that once someone likes this I will be shown on my facebook wall page
PS: this is just some website I did to test out the share, like, comments.
Thanks
Sun
You have put http://www.http://. Try fixing that:
<fb:like href="http://smithachallathomas.net63.net/" send="true" width="450" show_faces="true" font="lucida grande"></fb:like>
Also, you appear to be missing the http: beginning on your JavaScript source line, here:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=******";
Just minor things that would cause problems. I'm no Facebook API expert though.
Related
I want to open a dynamic modal on v-card onclick, each card clicked will change the content of the v-dialog.
In my case it open once and then nothing happen.
here the view
<template>
<div>
<OrderComment :display="display"/>
<h1 align="center">Commandes à Livrer</h1>
<v-row>
<!-- <Message></Message> -->
<v-col lg="3" sm="6" v-for="order in orders.orders" v-bind:key="order.id" class="mt-16">
<!-- </v-sheet>-->
<v-card #click="displayModal(order.id)">
<v-card-title align="center" class="big-font">
<strong>{{ order.id }}</strong>
</v-card-title>
<v-divider class="mx-4"></v-divider>
<v-card-text>
{{ order.date_upd }}
<!-- <OrderPartialCustomer :id_customer="order.id_customer" /> <br/>-->
<OrderPartialAddress :id_address_delivery="order.id_address_delivery"/>
</v-card-text>
<v-card-actions>
<v-btn #click="changeStatus(order.id)">
Passer en Livre
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
method in script
const display = ref(false);
function displayModal(id_order: String) {
display.value = true;
console.log(display.value)
}
And my component
<template v-slot:activator="{ on, attrs }">
<div>
<v-dialog
v-model="props.display"
width="500"
>
<v-card>
<v-card-title class="text-h5 grey lighten-2">
Commentaires
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="danger"
text
#click="display = false"
>
Fermer
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
display: {
type: Boolean,
required: true,
},
})
</script>
So finally it works only once. I don't know what is wrong or how i have to achieve it. I even don't know if i have to use v-slot:activator
I'm adding an Openstreetmap component. Newbie, straight to Vue3 (do not ask me to start from Vue2),
MapLeaflet.vue : I took the code from here: https://vue2-leaflet.netlify.app/examples/simple.html
And tried to modify to suite vue3, creating setup(), move functions etc. However looks like the return statement and some imports need to be further tweaked. What should I change in this vue2-leaflet to transform it to work in vue3?
<template>
<div style="height: 500px; width: 100%">
<div style="height: 200px overflow: auto;">
<p>First marker is placed at {{ withPopup.lat }}, {{ withPopup.lng }}</p>
<p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>
<button #click="showLongText">
Toggle long popup
</button>
<button #click="showMap = !showMap">
Toggle map
</button>
</div>
<l-map
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 80%"
#update:center="centerUpdate()"
#update:zoom="zoomUpdate()"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-marker :lat-lng="withPopup">
<l-popup>
<div #click="innerClick()">
I am a popup
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-popup>
</l-marker>
<l-marker :lat-lng="withTooltip">
<l-tooltip :options="{ permanent: true, interactive: true }">
<div #click="innerClick">
I am a tooltip
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-tooltip>
</l-marker>
</l-map>
</div>
</template>
<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";
export default {
name: "Example",
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
LTooltip
},
setup() {
function zoomUpdate(zoom) {
currentZoom = zoom;
}
function centerUpdate(center) {
currentCenter = center;
}
function showLongText() {
showParagraph = !this.showParagraph;
}
function innerClick() {
alert("Click!");
}
return {
zoom: 13,
center: latLng(47.41322, -1.219482),
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© OpenStreetMap contributors',
withPopup: latLng(47.41322, -1.219482),
withTooltip: latLng(47.41422, -1.250482),
currentZoom: 11.5,
currentCenter: latLng(47.41322, -1.219482),
showParagraph: false,
mapOptions: {
zoomSnap: 0.5
},
showMap: true
};
},
methods: {
}
};
</script>
There is a Vue 3 compatible version here:
https://www.npmjs.com/package/#vue-leaflet/vue-leaflet
But it is still in the beta version, but everything works from what I've seen.
I want my homepage to have a list of articles, with the first bit of text from each as a preview. Something like:
<div class="article">
<h2>Article Title</h2>
<div class="article-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor quam, vulputate at pharetra et, molestie vel nisi. Donec quis tellus pretium, sollicitudin neque et, tristique nunc. Proin id nunc augue. Quisque iaculis iaculis dui, et dictum tortor.</p>
<p>Morbi ligula felis, rhoncus at felis a, egestas scelerisque metus. In sit amet urna nec sem tristique fringilla vel nec sem. Nullam at ante</p>
</div>
<p class="read-more">Read More…</p>
</div>
So, in my fluid template, I had:
<div class="article-text">
<f:format.crop maxCharacters="480" respectHtml="true">
<v:content.render column="0" pageUid="{article.uid}" />
</f:format.crop>
</div>
And as long as the article starts with text, this works fine. But then I had an article which started with some images with captions, like:
<div class="img-grid">
<figure>
<img src="/fileadmin/image1.jpg">
<figcaption>Here's a picture of a thing</figcaption>
</figure>
<figure>
<img src="/fileadmin/image2.jpg">
<figcaption>Here's a picture of another thing</figcaption>
</figure>
</div>
<p>Lorem ipsum, etc., etc...</p>
What I want is to somehow strip out that <div class="img-grid">, to instead show starting with the first bit of regular text from the article. I think the correct way to do this would be with <f:format.html>, but for some reason it isn't working for me. In my fluid template, I have:
<f:format.crop maxCharacters="480" respectHtml="true">
<f:format.html parseFuncTSPath="lib.parseFunc_List">
<v:content.render column="0" pageUid="{article.uid}" />
</f:format.html>
</f:format.crop>
And in my TypoScript setup.txt I have:
lib.parseFunc_List {
externalBlocks {
figure.stdWrap.HTMLparser = 1
figure.stdWrap.HTMLparser {
tags.figure = 0
tags.figcaption = 0
tags.img = 0
removeTags = "figure, figcaption, img"
}
}
}
But it doesn't strip anything out.
How can I parse my HTML, and remove the content I don't want?
If you just remove tags you still have the content, here the image captions.
If you only want the text part you might change the rendering of the CEs so you could more easily identify the text part. you might use a html comment before and after the text part and extract that substring before you use the crop VH.
You also have the option to render your content individually ignoring any / most types. this can be done in typoscript (CONTENT with individual renderObj) or in a PHP VH.
I want solve my problem with Getuikit.
Accordion plugin is working. But I want make active (clicked) specific accordion on page load.
How can I do this ?
edit: getuikit v2
<div class="uk-accordion" data-uk-accordion="{collapse: false}">
<h3 class="uk-accordion-title">Accordion 1</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
<h3 class="uk-accordion-title">Accordion 2</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
<h3 class="uk-accordion-title">Accordion 3</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
<h3 class="uk-accordion-title">Accordion 4</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
</div>
Example: How make "Accordion 3 & Accordion 4" active ?
I've found the answer on SO. Here someone opens all accordions on page, so I've tweaked the code little bit for you. You can choose, which accordion you want to open on init.
UIkit.on('afterready.uk.dom', function() {
var accordion = UIkit.accordion(UIkit.$('#myAccordion'), {collapse:false, showfirst: false});
//choose which number of accordion interest you, here we choose 1 and 3, index starts from 0
accordion.find('[data-wrapper]').each(function (index) {
if (index==0 || index==2)
accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false
});
});
Here's working pen for you.
If I am not wrong, You are looking to keep by default first accordion. right? If yes you don't need to do any extra code for this. As Uikit as the solution itself.
You just have to put uk-open with first , take a look at below code and codepen.
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 3</a>
<div class="uk-accordion-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
</div>
</li>
Look at CodePen too : Codepen
I recently started playing with Ionic and I'm trying to pull data from OMDb API. Seems there is some trouble with CORS and I've read the guide at http://blog.ionic.io/handling-cors-issues-in-ionic/, tried adding proxyURL but doesn't seem to work or I'm missing something.
Here's what I'm trying to do:
.controller('MovieController', ['$scope', '$http', function($scope, $http) {
$http.get('http://www.omdbapi.com/?s=Star+Wars').success(function(data) {
$scope.movies = data;
});
}]);
And trying to show the movie data here:
<ion-content ng-controller="MovieController" class="has-subheader">
<ion-list>
<ion-item ng-repeat='item in movies' class="item-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Photo">
<h2>{{ item.Title }}</h2>
<h3>{{ item.Year }}</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</ion-item>
</ion-list>
</ion-content>
Full code (not much besides this above) here http://play.ionic.io/app/84f6a0092ffe
What am I missing here? Something needs to be changed in my Ionic project or I'm misusing the OMDb API? Thank you very much in advance.
Alright, I got this. Seems that I needed to request the API a bit differently. Here's an updated, working code.
angular.module('app', ['ionic'])
.controller('AppCtrl', function($scope, HttpService) {
HttpService.getPost()
.then(function(response) {
$scope.post = response;
})
})
.service('HttpService', function($http) {
return {
getPost: function() {
return $http.get('http://www.omdbapi.com/?t=Star+Wars')
.then(function (response) {
console.log('Get Post', response);
return response.data;
});
}
}
})
This shows only one item. Remove the ng-repeat in the view.
EDIT: It's weird. Doesn't always fetch from OMDb Api. It says Cross-Origin Request Blocked now.