[Wactclc-alma] Twitter feed and Chat Help link in Primo

[Nicole Longpre]

Bellevue did for a while but we didn’t have enough followers to make it worthwhile. We just have Facebook, that one of our staff members posts to a lot.
Nicole

From: Wactclc-alma <wactclc-alma-bounces at lists.ctc.edu> On Behalf Of Bem, Greg
Sent: Thursday, April 16, 2020 9:41 AM
To: WACTCLC Alma Discussion <wactclc-alma at lists.ctc.edu>
Subject: Re: [Wactclc-alma] Twitter feed and Chat Help link in Primo

Thanks Dan!

I am curious how many WACTC college libraries have an active Twitter account. I used to keep LWTech’s going but haven’t used it for quite some time.

Greg Bem, MLIS
Faculty Library Coordinator
Vice President, AFT 3533, ’19-‘20
Library Learning Commons
Lake Washington Inst. Of Technology
Pronouns: he/him/his

Contact Info
greg.bem at lwtech.edu<mailto:greg.bem at lwtech.edu%0d>
425-739-8100 xt.8898
http://www.lwtech.edu/campus-life/library<https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.lwtech.edu%2Fcampus-life%2Flibrary&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017546076&sdata=j%2BmAFuH7pTbEqCaRGTsE3AC7Gy8PTaEMYtHjc0GTVfI%3D&reserved=0>

Chat with me on Microsoft Teams<https://teams.microsoft.com/>

From: Wactclc-alma <wactclc-alma-bounces at lists.ctc.edu<mailto:wactclc-alma-bounces at lists.ctc.edu>> On Behalf Of Daniel Moore
Sent: Tuesday, April 14, 2020 12:10 PM
To: WACTCLC Alma Discussion <wactclc-alma at lists.ctc.edu<mailto:wactclc-alma at lists.ctc.edu>>
Subject: [Wactclc-alma] Twitter feed and Chat Help link in Primo

EXTERNAL SENDER: Use caution with links and attachments
________________________________
Hi all,

There were two questions during today's call that I wanted to follow up on.

Twitter
ExL has published instructions on this, but they're ultimately disappointing because it only creates a LINK to your Twitter feed - it doesn't actually display the timeline: https://knowledge.exlibrisgroup.com/Primo/Product_Documentation/Primo/New_Primo_User_Interface/New_UI_Customization_-_Best_Practices#Creating_a_Twitter_Feed<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fknowledge.exlibrisgroup.com%2FPrimo%2FProduct_Documentation%2FPrimo%2FNew_Primo_User_Interface%2FNew_UI_Customization_-_Best_Practices%23Creating_a_Twitter_Feed&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017546076&sdata=bRBxjP9J1MnFJPyxbU6qZjMOyRzvI279M00mDkmNht8%3D&reserved=0>

This other method works too. First, go to publish.twitter.com<https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fpublish.twitter.com%2F&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017556026&sdata=quVqPF5xWxzw2ilPlnp2dP7t%2BcwWzVre8fFAu35IF0o%3D&reserved=0> and enter the URL of the Twitter feed that you want to create a timeline of. You'll click between whatever options of timeline are available - ours only has an embedded timeline and Twitter buttons, and I don't use Twitter normally so I'm not fully aware of all the options. But once you choose the medium you want, you'll get a small block of code consisting of an anchor link and a script tag. Copy all of that. For reference, ours is:

<a class="twitter-timeline" href="https://twitter.com/EdmondsCC?ref_src=twsrc%5Etfw<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ftwitter.com%2FEdmondsCC%3Fref_src%3Dtwsrc%255Etfw&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017556026&sdata=9qcDE1ZaWY0fOpPnYxuRJliKT4ggm%2B0ZKhRJhGUD0Mk%3D&reserved=0>">Tweets by EdmondsCC</a>
<script async src="https://platform.twitter.com/widgets.js<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017565991&sdata=wHiw1uw3UA8o6AteB4LNs8fNwmhxg86Lx9JvU5qrDmc%3D&reserved=0>" charset="utf-8"></script>

Now, you'll need to edit two things. We'll start with the Javascript stuff since that's more of a headache. To make this work, I used a published Angular directive that works better with Twitter. You'll find that code here<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fedccl%2Fedcc-primo%2Fblob%2Fmaster%2Fprimo-explore%2Fcustom%2FEDMONDS%2Fjs%2Ftwitter.js&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017565991&sdata=T35o9juSXr53G1Zj6f%2BEPbAgO6ov%2BeEY1L9%2F1YtrmmQ%3D&reserved=0>. This needs to go into your custom.js file. It doesn't matter where in the file it goes; be careful though that you don't overwrite any of the wrappers that are included in the file, as those wrappers help Primo define all the scripts that are added to it. You can see our whole custom.js file here<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fedccl%2Fedcc-primo%2Fblob%2Fmaster%2Fprimo-explore%2Fcustom%2FEDMONDS%2Fjs%2Fcustom.js&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017575936&sdata=9SMq5Of6GRYjy4H%2FR3Es71JSH4lNL9Lh4zAagdT6YMw%3D&reserved=0>, if you wanted to reference how it shows up there.

On your homepage_en_US.html file<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fedccl%2Fedcc-primo%2Fblob%2Fmaster%2Fprimo-explore%2Fcustom%2FEDMONDS%2Fhtml%2Fhomepage%2Fhomepage_en.html&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017575936&sdata=jF5SwMxPOzQIvwMPurluJbkorlKh4TjYk2Q75%2FfiMUo%3D&reserved=0>, you'll need to add a content card that includes the anchor link produced earlier. Lines 25 through 30 have our Twitter component. Because these content cards are managed using flex widths, you may need to play around with different flex attribute values in order to make it look good. Also note that you don't actually need that script async element from publish.twitter.com<https://nam02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fpublish.twitter.com%2F&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017585891&sdata=DiiKcs7ltVW6P%2F7bGRaIfx6gxhURDAdtuKFCm5LMZXI%3D&reserved=0> since we're using a much better script in our custom.js file. The last thing you may need to add are data-width elements. The 400 values we have seem to be working well.

Both of these elements will produce a fully usable Twitter timeline on your Primo home page. Animated GIFs work too!

Chat Help Link
This one is actually just a link to our main QP form. Back in custom.js, add lines 152 to 156 from our custom.js<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fedccl%2Fedcc-primo%2Fblob%2Fmaster%2Fprimo-explore%2Fcustom%2FEDMONDS%2Fjs%2Fcustom.js&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017585891&sdata=3F7t5e2Gpq1RK6QY14TJGXwwys9mQNNP9Vd%2FgJMZyK4%3D&reserved=0> file. Change line 155's anchor link to your QP form. You can also edit or modify what the actual link says. The div class allows you to style the link however you prefer in your custom1.css file. Ours <https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fedccl%2Fedcc-primo%2Fblob%2Fmaster%2Fprimo-explore%2Fcustom%2FEDMONDS%2Fcss%2Fcustom1.css&data=02%7C01%7Cnlongpre%40bellevuecollege.edu%7C7e2940b2d202411da41308d7e22509e8%7Cf94c251c1347422eb3ea8ac56befd6cb%7C0%7C0%7C637226521017585891&sdata=TsztqDjHthWL99FWpleziZSk9ja08Dtp38Uc%2BJawzd0%3D&reserved=0> shows some minor style edits from lines 56 to 68.

-Dan
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ctc.edu/pipermail/wactclc-alma_lists.ctc.edu/attachments/20200416/0289ab55/attachment-0002.html>